From 8856099f2aa80dc2c9523cf6f682218721a135b2 Mon Sep 17 00:00:00 2001 From: ap7 Date: Mon, 29 Apr 2019 14:53:40 +0800 Subject: [PATCH] Initial commit Integrated UIKit 3 styles and JavaScript. Added default header and custom menu. Added footer and custom settings for organization name and copyright date. Minor typos. --- footer.php | 34 +- functions.php | 32 +- header.php | 76 +- inc/custom-menu.php | 141 + inc/custom-settings.php | 75 + inc/customizer.php | 2 +- inc/defines.php | 4 + style.css | 12432 +++++++++++++++++++++++++++++++++++--- style.scss | 969 +-- 9 files changed, 12070 insertions(+), 1695 deletions(-) create mode 100644 inc/custom-menu.php create mode 100644 inc/custom-settings.php create mode 100644 inc/defines.php diff --git a/footer.php b/footer.php index 6a8ae15..7235e09 100644 --- a/footer.php +++ b/footer.php @@ -9,24 +9,32 @@ * @package TeamWPUGPHTheme */ +$org_name = get_option('teamwpugph_org_name', ''); +$org_year = get_option('teamwpugph_org_year', ''); + ?> + + - - - + + \ No newline at end of file diff --git a/functions.php b/functions.php index 1c0fa25..299da71 100644 --- a/functions.php +++ b/functions.php @@ -1,12 +1,15 @@ - + > @@ -20,33 +20,51 @@ > -
- - + +
+
+ +
+
+ + +
+ \ No newline at end of file diff --git a/inc/custom-menu.php b/inc/custom-menu.php new file mode 100644 index 0000000..a4884bc --- /dev/null +++ b/inc/custom-menu.php @@ -0,0 +1,141 @@ +item_spacing) && 'discard' === $args->item_spacing ) { + $t = ''; + $n = ''; + } else { + $t = "\t"; + $n = "\n"; + } + $indent = str_repeat( $t, $depth ); + + $output .= $indent . '
' . "\n"; + $output .= $indent . "\t" . '
    ' . "\n"; + } + + /** + * Ends the list of after the elements are added. + * + * @param string $output Used to append additional content (passed by reference). + * @param int $depth Depth of the item. + * @param array $args An array of additional arguments. + * @return void + */ + public function end_lvl(&$output, $depth = 0, $args = array()) + { + if (isset($args->item_spacing) && 'discard' === $args->item_spacing) { + $t = ''; + $n = ''; + } else { + $t = "\t"; + $n = "\n"; + } + $indent = str_repeat($t, $depth); + + $output .= $indent . "\t" . '
' . "\n"; + $output .= $indent . '
' . "\n"; + } + + /** + * Displays start of an element. E.g '
  • Item Name' + * + * @param string $output Used to append additional content (passed by reference). + * @param WP_Post $item Menu item data object. + * @param int $depth Depth of menu item. Used for padding. + * @param stdClass $args An object of wp_nav_menu() arguments. + * @param int $id Current item ID. + * @see Walker::start_el() + */ + // + function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) + { + + if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) { + $t = ''; + $n = ''; + } else { + $t = "\t"; + $n = "\n"; + } + $indent = ( $depth ) ? str_repeat( $t, $depth ) : ''; + + $object = $item->object; + $type = $item->type; + $title = $item->title; + $description = $item->description; + $permalink = $item->url; + + $classes = empty( $item->classes ) ? array() : (array) $item->classes; + $classes[] = 'menu-item-' . $item->ID; + + foreach ($classes as &$class) { + switch ($class) { + case 'current-menu-item': + case 'current-page-item': + case 'current-menu-parent': + case 'current-menu-ancestor': + $classes[] = 'uk-active'; + break; + default: + break; + } + } + + $item_output .= '
  • '; + + //Add SPAN if no Permalink + if ($permalink && $permalink != '#') { + $item_output .= ''; + } else { + $item_output .= ''; + } + $item_output .= $title; + + // @todo: UIKit 3 navbar subtitle, @see https://getuikit.com/docs/navbar#subtitle + if ($description != '' && $depth == 0) { + $item_output .= '' . $description . ''; + } + + // Close Permalink or span + if ($permalink && $permalink != '#') { + $item_output .= ''; + } else { + $item_output .= ''; + } + + /** + * Filters a menu item's starting output. + * + * The menu item's starting output only includes `$args->before`, the opening ``, + * the menu item's title, the closing ``, and `$args->after`. Currently, there is + * no filter for modifying the opening and closing `
  • ` for a menu item. + * + * @since 3.0.0 + * + * @param string $item_output The menu item's starting HTML output. + * @param WP_Post $item Menu item data object. + * @param int $depth Depth of menu item. Used for padding. + * @param stdClass $args An object of wp_nav_menu() arguments. + */ + $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); + } +} diff --git a/inc/custom-settings.php b/inc/custom-settings.php new file mode 100644 index 0000000..b80565e --- /dev/null +++ b/inc/custom-settings.php @@ -0,0 +1,75 @@ +' . __( 'Organization Name' , 'teamwpugph' ) . '', + array( $this, 'render_org_name_field' ), + 'general', + 'teamwpugph_custom_settings' + ); + + register_setting( 'general', 'teamwpugph_org_year', 'sanitize_text_field' ); + add_settings_field( + 'teamwpugph_org_year_id', + '', + array( $this, 'render_org_year_field' ), + 'general', + 'teamwpugph_custom_settings' + ); + + } + + /** + * Render the settings + * + * @return void + */ + public function render_section() { + esc_html_e( 'Custom settings for theme use.', 'teamwpugph' ); + } + + public function render_org_name_field() { + + $value = get_option( 'teamwpugph_org_name', '' ); + echo ''; + + } + + public function render_org_year_field() { + + $value = get_option( 'teamwpugph_org_year', '' ); + echo ''; + + } +} +new TeamWPUGPH_Add_Settings_Field(); \ No newline at end of file diff --git a/inc/customizer.php b/inc/customizer.php index 89a544b..9a98703 100644 --- a/inc/customizer.php +++ b/inc/customizer.php @@ -1,6 +1,6 @@ >> TABLE OF CONTENTS: ----------------------------------------------------------------- -# Normalize -# Typography -# Elements -# Forms -# Navigation - ## Links - ## Menus -# Accessibility -# Alignments -# Widgets -# Content - ## Posts and pages - ## Comments -# Infinite scroll -# Media - ## Captions - ## Galleries ---------------------------------------------------------------*/ -/*-------------------------------------------------------------- -# Normalize +# Include UIKit 3 +# Reference https://getuikit.com/docs/sass --------------------------------------------------------------*/ +body { + overflow-y: scroll; +} + +/* ======================================================================== + Component: Base + ========================================================================== */ +/* + * 1. Set `font-size` to support `rem` units + * Not using `font` property because a leading hyphen (e.g. -apple-system) causes the font to break in IE11 and Edge + * 2. Prevent adjustments of font size after orientation changes in iOS. + * 3. Style + */ html { - font-family: sans-serif; + /* 1 */ + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-size: 16px; + font-weight: normal; + line-height: 1.5; + /* 2 */ -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; + /* 3 */ + background: #fff; + color: #666; } +/* + * Remove the margin in all browsers. + */ body { margin: 0; } -article, -aside, -details, -figcaption, -figure, -footer, -header, -main, -menu, -nav, -section, -summary { - display: block; +/* Links + ========================================================================== */ +/* + * Remove gaps in links underline in iOS 8+ and Safari 8+. + */ +a { + -webkit-text-decoration-skip: objects; +} + +/* + * Remove the outline on focused links when they are also active or hovered + */ +a:active, +a:hover { + outline: none; +} + +/* + * Style + */ +a, +.uk-link { + color: #1e87f0; + text-decoration: none; + cursor: pointer; +} + +a:hover, +.uk-link:hover { + color: #0f6ecd; + text-decoration: underline; +} + +/* Text-level semantics + ========================================================================== */ +/* + * 1. Add an underline text decoration in Safari, Edge and IE. + * 2. Add `dotted` style in Safari. + * Note: The shorthand declaration `underline dotted` is not supported in Safari, Edge and IE. + */ +abbr[title] { + /* 1 */ + text-decoration: underline; + /* 2 */ + -webkit-text-decoration-style: dotted; +} + +/* + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; +} + +/* + * 1. Consolas has a better baseline in running text compared to `Courier` + * 2. Correct the odd `em` font sizing in all browsers. + * 3. Style + */ +:not(pre) > code, +:not(pre) > kbd, +:not(pre) > samp { + /* 1 */ + font-family: Consolas, monaco, monospace; + /* 2 */ + font-size: 0.875rem; + /* 3 */ + color: #f0506e; + white-space: nowrap; +} + +/* + * Emphasize + */ +em { + color: #f0506e; +} + +/* + * Insert + */ +ins { + background: #ffd; + color: #666; + text-decoration: none; +} + +/* + * Mark + */ +mark { + background: #ffd; + color: #666; +} + +/* + * Quote + */ +q { + font-style: italic; +} + +/* + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; +} + +/* + * Prevents `sub` and `sup` affecting `line-height` in all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; } +/* Embedded content + ========================================================================== */ +/* + * Remove the gap between embedded content and the bottom of their containers. + */ audio, canvas, -progress, +iframe, +img, +svg, video { - display: inline-block; - vertical-align: baseline; + vertical-align: middle; } -audio:not([controls]) { - display: none; +/* + * 1. Add responsiveness. + * 2. Auto-scale the height. Only needed if `height` attribute is present. + * 3. Corrects responsive `max-width` behavior if padding and border are used. + * 4. Exclude SVGs for IE11 because they don't preserve their aspect ratio. + */ +canvas, +img, +video { + /* 1 */ + max-width: 100%; + /* 2 */ + height: auto; + /* 3 */ + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* 4 */ +@supports (display: block) { + svg { + max-width: 100%; + height: auto; + -webkit-box-sizing: border-box; + box-sizing: border-box; + } +} + +/* + * Hide the overflow in IE. + */ +svg:not(:root) { + overflow: hidden; +} + +/* + * Hide `alt` text for lazy load images + * Selector for background while loading img[data-src*='.jpg'][src*='data:image'] { background: grey; } + */ +img:not([src]) { + visibility: hidden; +} + +/* + * Iframe + * Remove border in all browsers + */ +iframe { + border: 0; +} + +/* Block elements + ========================================================================== */ +/* + * Margins + */ +p, +ul, +ol, +dl, +pre, +address, +fieldset, +figure { + margin: 0 0 20px 0; +} + +/* Add margin if adjacent element */ +* + p, +* + ul, +* + ol, +* + dl, +* + pre, +* + address, +* + fieldset, +* + figure { + margin-top: 20px; +} + +/* Headings + ========================================================================== */ +h1, .uk-h1, +h2, .uk-h2, +h3, .uk-h3, +h4, .uk-h4, +h5, .uk-h5, +h6, .uk-h6, +.uk-heading-small, +.uk-heading-medium, +.uk-heading-large, +.uk-heading-xlarge, +.uk-heading-2xlarge { + margin: 0 0 20px 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-weight: normal; + color: #333; + text-transform: none; +} + +/* Add margin if adjacent element */ +* + h1, * + .uk-h1, +* + h2, * + .uk-h2, +* + h3, * + .uk-h3, +* + h4, * + .uk-h4, +* + h5, * + .uk-h5, +* + h6, * + .uk-h6, +* + .uk-heading-small, +* + .uk-heading-medium, +* + .uk-heading-large, +* + .uk-heading-xlarge, +* + .uk-heading-2xlarge { + margin-top: 40px; +} + +/* + * Sizes + */ +h1, .uk-h1 { + font-size: 2.23125rem; + line-height: 1.2; +} + +h2, .uk-h2 { + font-size: 1.7rem; + line-height: 1.3; +} + +h3, .uk-h3 { + font-size: 1.5rem; + line-height: 1.4; +} + +h4, .uk-h4 { + font-size: 1.25rem; + line-height: 1.4; +} + +h5, .uk-h5 { + font-size: 16px; + line-height: 1.4; +} + +h6, .uk-h6 { + font-size: 0.875rem; + line-height: 1.4; +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + h1, .uk-h1 { + font-size: 2.625rem; + } + h2, .uk-h2 { + font-size: 2rem; + } +} + +/* Lists + ========================================================================== */ +ul, +ol { + padding-left: 30px; +} + +/* + * Reset margin for nested lists + */ +ul > li > ul, +ul > li > ol, +ol > li > ol, +ol > li > ul { + margin: 0; +} + +/* Description lists + ========================================================================== */ +dt { + font-weight: bold; +} + +dd { + margin-left: 0; +} + +/* Horizontal rules + ========================================================================== */ +/* + * 1. Add the correct box sizing and height in Firefox. + * 2. Show the overflow in Edge and IE. + * 3. Add the correct text-align in Edge and IE. + * 4. Style + */ +hr, .uk-hr { + /* 1 */ + -webkit-box-sizing: content-box; + box-sizing: content-box; height: 0; + /* 2 */ + overflow: visible; + /* 3 */ + text-align: inherit; + /* 4 */ + margin: 0 0 20px 0; + border: 0; + border-top: 1px solid #e5e5e5; } -[hidden], +/* Add margin if adjacent element */ +* + hr, +* + .uk-hr { + margin-top: 20px; +} + +/* Address + ========================================================================== */ +address { + font-style: normal; +} + +/* Blockquotes + ========================================================================== */ +blockquote { + margin: 0 0 20px 0; + font-size: 1.25rem; + line-height: 1.5; + font-style: italic; +} + +/* Add margin if adjacent element */ +* + blockquote { + margin-top: 20px; +} + +/* + * Content + */ +blockquote p:last-of-type { + margin-bottom: 0; +} + +blockquote footer { + margin-top: 10px; + font-size: 0.875rem; + line-height: 1.5; +} + +/* Preformatted text + ========================================================================== */ +/* + * 1. Contain overflow in all browsers. + */ +pre { + font: 0.875rem / 1.5 Consolas, monaco, monospace; + color: #666; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + /* 1 */ + overflow: auto; +} + +pre code { + font-family: Consolas, monaco, monospace; +} + +/* Selection pseudo-element + ========================================================================== */ +::-moz-selection { + background: #39f; + color: #fff; + text-shadow: none; +} +::selection { + background: #39f; + color: #fff; + text-shadow: none; +} + +/* HTML5 elements + ========================================================================== */ +/* + * 1. Add the correct display in Edge, IE 10+, and Firefox. + * 2. Add the correct display in IE. + */ +details, +main { + /* 2 */ + display: block; +} + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; +} + +/* + * Add the correct display in IE. + */ template { display: none; } -a { - background-color: transparent; +/* Pass media breakpoints to JS + ========================================================================== */ +/* + * Breakpoints + */ +.uk-breakpoint-s::before { + content: "640px"; } -a:active, -a:hover { - outline: 0; +.uk-breakpoint-m::before { + content: "960px"; } -abbr[title] { - border-bottom: 1px dotted; +.uk-breakpoint-l::before { + content: "1200px"; } -b, -strong { - font-weight: bold; +.uk-breakpoint-xl::before { + content: "1600px"; +} + +:root { + --uk-breakpoint-s: 640px; + --uk-breakpoint-m: 960px; + --uk-breakpoint-l: 1200px; + --uk-breakpoint-xl: 1600px; +} + +/* ======================================================================== + Component: Link + ========================================================================== */ +/* Muted + ========================================================================== */ +a.uk-link-muted, +.uk-link-muted a { + color: #999; +} + +a.uk-link-muted:hover, +.uk-link-muted a:hover { + color: #666; +} + +/* Text + ========================================================================== */ +a.uk-link-text:not(:hover), +.uk-link-text a:not(:hover) { + color: inherit; +} + +a.uk-link-text:hover, +.uk-link-text a:hover { + color: #999; +} + +/* Heading + ========================================================================== */ +a.uk-link-heading:not(:hover), +.uk-link-heading a:not(:hover) { + color: inherit; +} + +a.uk-link-heading:hover, +.uk-link-heading a:hover { + color: #1e87f0; + text-decoration: none; +} + +/* Reset + ========================================================================== */ +/* + * `!important` needed to override inverse component + */ +a.uk-link-reset, +a.uk-link-reset:hover, +.uk-link-reset a, +.uk-link-reset a:hover { + color: inherit !important; + text-decoration: none !important; +} + +/* ======================================================================== + Component: Heading + ========================================================================== */ +.uk-heading-small { + font-size: 2.6rem; + line-height: 1.2; +} + +.uk-heading-medium { + font-size: 2.8875rem; + line-height: 1.1; +} + +.uk-heading-large { + font-size: 3.4rem; + line-height: 1.1; +} + +.uk-heading-xlarge { + font-size: 4rem; + line-height: 1; +} + +.uk-heading-2xlarge { + font-size: 6rem; + line-height: 1; +} + +/* Tablet Landscape and bigger */ +@media (min-width: 960px) { + .uk-heading-small { + font-size: 3.25rem; + } + .uk-heading-medium { + font-size: 3.5rem; + } + .uk-heading-large { + font-size: 4rem; + } + .uk-heading-xlarge { + font-size: 6rem; + } + .uk-heading-2xlarge { + font-size: 8rem; + } +} + +/* Laptop and bigger */ +@media (min-width: 1200px) { + .uk-heading-medium { + font-size: 4rem; + } + .uk-heading-large { + font-size: 6rem; + } + .uk-heading-xlarge { + font-size: 8rem; + } + .uk-heading-2xlarge { + font-size: 11rem; + } +} + +/* Primary + Deprecated: Use `uk-heading-medium` instead + ========================================================================== */ +/* Tablet landscape and bigger */ +/* Desktop and bigger */ +/* Hero + Deprecated: Use `uk-heading-xlarge` instead + ========================================================================== */ +/* Tablet landscape and bigger */ +/* Desktop and bigger */ +/* Divider + ========================================================================== */ +.uk-heading-divider { + padding-bottom: calc(10px + 0.1em); + border-bottom: calc(0.2px + 0.05em) solid #e5e5e5; +} + +/* Bullet + ========================================================================== */ +.uk-heading-bullet { + position: relative; +} + +/* + * 1. Using `inline-block` to make it work with text alignment + * 2. Center vertically + * 3. Style + */ +.uk-heading-bullet::before { + content: ""; + /* 1 */ + display: inline-block; + /* 2 */ + position: relative; + top: calc(-0.1 * 1em); + vertical-align: middle; + /* 3 */ + height: calc(4px + 0.7em); + margin-right: calc(5px + 0.2em); + border-left: calc(5px + 0.1em) solid #e5e5e5; +} + +/* Line + ========================================================================== */ +/* + * Clip the child element + */ +.uk-heading-line { + overflow: hidden; +} + +/* + * Extra markup is needed to make it work with text align + */ +.uk-heading-line > * { + display: inline-block; + position: relative; +} + +/* + * 1. Center vertically + * 2. Make the element as large as possible. It's clipped by the container. + * 3. Style + */ +.uk-heading-line > ::before, +.uk-heading-line > ::after { + content: ""; + /* 1 */ + position: absolute; + top: calc(50% - (calc(0.2px + 0.05em) / 2)); + /* 2 */ + width: 2000px; + /* 3 */ + border-bottom: calc(0.2px + 0.05em) solid #e5e5e5; +} + +.uk-heading-line > ::before { + right: 100%; + margin-right: calc(5px + 0.3em); +} + +.uk-heading-line > ::after { + left: 100%; + margin-left: calc(5px + 0.3em); +} + +/* ======================================================================== + Component: Divider + ========================================================================== */ +/* + * 1. Reset default `hr` + * 2. Set margin if a `div` is used for semantical reason + */ +[class*='uk-divider'] { + /* 1 */ + border: none; + /* 2 */ + margin-bottom: 20px; +} + +/* Add margin if adjacent element */ +* + [class*='uk-divider'] { + margin-top: 20px; +} + +/* Icon + ========================================================================== */ +.uk-divider-icon { + position: relative; + height: 20px; + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%23e5e5e5%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); + background-repeat: no-repeat; + background-position: 50% 50%; +} + +.uk-divider-icon::before, +.uk-divider-icon::after { + content: ""; + position: absolute; + top: 50%; + max-width: calc(50% - (50px / 2)); + border-bottom: 1px solid #e5e5e5; +} + +.uk-divider-icon::before { + right: calc(50% + (50px / 2)); + width: 100%; +} + +.uk-divider-icon::after { + left: calc(50% + (50px / 2)); + width: 100%; +} + +/* Small + ========================================================================== */ +/* + * Fix height of `hr` element not being expanded by child border width. + * `height` also needed to reset the child `line-height` caused by `inline-block` + */ +.uk-divider-small { + height: 1px; +} + +.uk-divider-small::after { + content: ""; + display: inline-block; + width: 100px; + max-width: 100%; + border-top: 1px solid #e5e5e5; + vertical-align: top; +} + +/* Vertical + ========================================================================== */ +.uk-divider-vertical { + width: 1px; + height: 100px; + margin-left: auto; + margin-right: auto; + border-left: 1px solid #e5e5e5; +} + +/* ======================================================================== + Component: List + ========================================================================== */ +.uk-list { + padding: 0; + list-style: none; +} + +/* + * Micro clearfix + */ +.uk-list > li::before, +.uk-list > li::after { + content: ""; + display: table; +} + +.uk-list > li::after { + clear: both; +} + +/* + * Remove margin from the last-child + */ +.uk-list > li > :last-child { + margin-bottom: 0; +} + +/* + * Nested lists + */ +.uk-list ul { + margin: 0; + padding-left: 30px; + list-style: none; +} + +/* + * Style + */ +.uk-list > li:nth-child(n+2), +.uk-list > li > ul { + margin-top: 10px; +} + +/* Style modifiers + ========================================================================== */ +/* + * Divider + */ +.uk-list-divider > li:nth-child(n+2) { + margin-top: 10px; + padding-top: 10px; + border-top: 1px solid #e5e5e5; +} + +/* + * Striped + */ +.uk-list-striped > li { + padding: 10px 10px; +} + +.uk-list-striped > li:nth-of-type(odd) { + background: #f8f8f8; +} + +.uk-list-striped > li:nth-child(n+2) { + margin-top: 0; +} + +/* + * Bullet + * 1. Reset display `table` which causes issues in combination with multi column layouts. + */ +.uk-list-bullet > li { + position: relative; + padding-left: calc(1.5em + 10px); +} + +.uk-list-bullet > li::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 1.5em; + height: 1.5em; + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23666%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E"); + background-repeat: no-repeat; + background-position: 50% 50%; + /* 1 */ + display: block; +} + +/* Size modifier + ========================================================================== */ +.uk-list-large > li:nth-child(n+2), +.uk-list-large > li > ul { + margin-top: 20px; +} + +/* + * Divider + */ +.uk-list-large.uk-list-divider > li:nth-child(n+2) { + margin-top: 20px; + padding-top: 20px; +} + +/* + * Striped + */ +.uk-list-large.uk-list-striped > li { + padding: 20px 10px; +} + +.uk-list-large.uk-list-striped > li:nth-child(n+2) { + margin-top: 0; +} + +/* ======================================================================== + Component: Description list + ========================================================================== */ +/* + * Term + */ +.uk-description-list > dt { + color: #333; +} + +.uk-description-list > dt:nth-child(n+2) { + margin-top: 20px; +} + +/* + * Description + */ +/* Style modifier + ========================================================================== */ +/* + * Line + */ +.uk-description-list-divider > dt:nth-child(n+2) { + margin-top: 20px; + padding-top: 20px; + border-top: 1px solid #e5e5e5; +} + +/* ======================================================================== + Component: Table + ========================================================================== */ +/* + * 1. Remove most spacing between table cells. + * 2. Behave like a block element + * 3. Style + */ +.uk-table { + /* 1 */ + border-collapse: collapse; + border-spacing: 0; + /* 2 */ + width: 100%; + /* 3 */ + margin-bottom: 20px; +} + +/* Add margin if adjacent element */ +* + .uk-table { + margin-top: 20px; +} + +/* Header cell + ========================================================================== */ +/* + * 1. Style + */ +.uk-table th { + padding: 16px 12px; + text-align: left; + vertical-align: bottom; + /* 1 */ + font-size: 0.875rem; + font-weight: normal; + color: #999; +} + +/* Cell + ========================================================================== */ +.uk-table td { + padding: 16px 12px; + vertical-align: top; +} + +/* + * Remove margin from the last-child + */ +.uk-table td > :last-child { + margin-bottom: 0; +} + +/* Footer + ========================================================================== */ +.uk-table tfoot { + font-size: 0.875rem; +} + +/* Caption + ========================================================================== */ +.uk-table caption { + font-size: 0.875rem; + text-align: left; + color: #999; +} + +/* Alignment modifier + ========================================================================== */ +.uk-table-middle, +.uk-table-middle td { + vertical-align: middle !important; +} + +/* Style modifiers + ========================================================================== */ +/* + * Divider + */ +.uk-table-divider > tr:not(:first-child), +.uk-table-divider > :not(:first-child) > tr, +.uk-table-divider > :first-child > tr:not(:first-child) { + border-top: 1px solid #e5e5e5; +} + +/* + * Striped + */ +.uk-table-striped > tr:nth-of-type(odd), +.uk-table-striped tbody tr:nth-of-type(odd) { + background: #f8f8f8; +} + +/* + * Hover + */ +.uk-table-hover > tr:hover, +.uk-table-hover tbody tr:hover { + background: #ffd; +} + +/* Active state + ========================================================================== */ +.uk-table > tr.uk-active, +.uk-table tbody tr.uk-active { + background: #ffd; +} + +/* Size modifier + ========================================================================== */ +.uk-table-small th, +.uk-table-small td { + padding: 10px 12px; +} + +.uk-table-large th, +.uk-table-large td { + padding: 22px 12px; +} + +/* Justify modifier + ========================================================================== */ +.uk-table-justify th:first-child, +.uk-table-justify td:first-child { + padding-left: 0; +} + +.uk-table-justify th:last-child, +.uk-table-justify td:last-child { + padding-right: 0; +} + +/* Cell size modifier + ========================================================================== */ +.uk-table-shrink { + width: 1px; +} + +.uk-table-expand { + min-width: 150px; +} + +/* Cell link modifier + ========================================================================== */ +/* + * Does not work with `uk-table-justify` at the moment + */ +.uk-table-link { + padding: 0 !important; +} + +.uk-table-link > a { + display: block; + padding: 16px 12px; +} + +.uk-table-small .uk-table-link > a { + padding: 10px 12px; +} + +/* Responsive table + ========================================================================== */ +/* Phone landscape and smaller */ +@media (max-width: 959px) { + .uk-table-responsive, + .uk-table-responsive tbody, + .uk-table-responsive th, + .uk-table-responsive td, + .uk-table-responsive tr { + display: block; + } + .uk-table-responsive thead { + display: none; + } + .uk-table-responsive th, + .uk-table-responsive td { + width: auto !important; + max-width: none !important; + min-width: 0 !important; + overflow: visible !important; + white-space: normal !important; + } + .uk-table-responsive th:not(:first-child):not(.uk-table-link), + .uk-table-responsive td:not(:first-child):not(.uk-table-link), + .uk-table-responsive .uk-table-link:not(:first-child) > a { + padding-top: 5px !important; + } + .uk-table-responsive th:not(:last-child):not(.uk-table-link), + .uk-table-responsive td:not(:last-child):not(.uk-table-link), + .uk-table-responsive .uk-table-link:not(:last-child) > a { + padding-bottom: 5px !important; + } + .uk-table-justify.uk-table-responsive th, + .uk-table-justify.uk-table-responsive td { + padding-left: 0; + padding-right: 0; + } +} + +/* ======================================================================== + Component: Icon + ========================================================================== */ +/* + * Note: 1. - 7. is required for `button` elements. Needed for Close and Form Icon component. + * 1. Remove margins in Chrome, Safari and Opera. + * 2. Remove borders for `button`. + * 3. Remove border-radius in Chrome. + * 4. Address `overflow` set to `hidden` in IE. + * 5. Correct `font` properties and `color` not being inherited for `button`. + * 6. Remove the inheritance of text transform in Edge, Firefox, and IE. + * 7. Remove default `button` padding and background color + * 8. Style + * 9. Fill all SVG elements with the current text color if no `fill` attribute is set + * 10. Let the container fit the height of the icon + */ +.uk-icon { + /* 1 */ + margin: 0; + /* 2 */ + border: none; + /* 3 */ + border-radius: 0; + /* 4 */ + overflow: visible; + /* 5 */ + font: inherit; + color: inherit; + /* 6 */ + text-transform: none; + /* 7. */ + padding: 0; + background-color: transparent; + /* 8 */ + display: inline-block; + /* 9 */ + fill: currentcolor; + /* 10 */ + line-height: 0; +} + +/* Required for `button`. */ +button.uk-icon:not(:disabled) { + cursor: pointer; +} + +/* + * Remove the inner border and padding in Firefox. + */ +.uk-icon::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * Set the fill and stroke color of all SVG elements to the current text color + */ +.uk-icon:not(.uk-preserve) [fill*='#']:not(.uk-preserve) { + fill: currentcolor; +} + +.uk-icon:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) { + stroke: currentcolor; +} + +/* + * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835 + */ +.uk-icon > * { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); +} + +/* Image modifier + ========================================================================== */ +/* + * Display images in icon dimensions + */ +.uk-icon-image { + width: 20px; + height: 20px; + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: contain; + vertical-align: middle; +} + +/* Style modifiers + ========================================================================== */ +/* + * Link + */ +.uk-icon-link { + color: #999; +} + +.uk-icon-link:hover, +.uk-icon-link:focus { + color: #666; + outline: none; +} + +/* OnClick + Active */ +.uk-icon-link:active, +.uk-active > .uk-icon-link { + color: #595959; +} + +/* + * Button + * 1. Center icon vertically and horizontally + */ +.uk-icon-button { + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 36px; + height: 36px; + border-radius: 500px; + background: #f8f8f8; + color: #999; + vertical-align: middle; + /* 1 */ + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +/* Hover + Focus */ +.uk-icon-button:hover, +.uk-icon-button:focus { + background-color: #ebebeb; + color: #666; + outline: none; +} + +/* OnClick + Active */ +.uk-icon-button:active, +.uk-active > .uk-icon-button { + background-color: #dfdfdf; + color: #666; +} + +/* ======================================================================== + Component: Form Range + ========================================================================== */ +/* + * 1. Normalize and defaults + * 2. Prevent content overflow if a fixed width is used + * 3. Take the full width + * 4. Remove default style + * 5. Remove white background in Chrome + * 6. Remove padding in IE11 + */ +.uk-range { + /* 1 */ + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + vertical-align: middle; + /* 2 */ + max-width: 100%; + /* 3 */ + width: 100%; + /* 4 */ + -webkit-appearance: none; + /* 5 */ + background: transparent; + /* 6 */ + padding: 0; +} + +/* Focus */ +.uk-range:focus { + outline: none; +} + +.uk-range::-moz-focus-outer { + border: none; +} + +/* IE11 Reset */ +.uk-range::-ms-track { + height: 15px; + background: transparent; + border-color: transparent; + color: transparent; +} + +/* + * Improves consistency of cursor style for clickable elements + */ +.uk-range:not(:disabled)::-webkit-slider-thumb { + cursor: pointer; +} + +.uk-range:not(:disabled)::-moz-range-thumb { + cursor: pointer; +} + +.uk-range:not(:disabled)::-ms-thumb { + cursor: pointer; +} + +/* Thumb + ========================================================================== */ +/* + * 1. Reset + * 2. Style + */ +/* Webkit */ +.uk-range::-webkit-slider-thumb { + /* 1 */ + -webkit-appearance: none; + margin-top: -7px; + /* 2 */ + height: 15px; + width: 15px; + border-radius: 500px; + background: #fff; +} + +/* Firefox */ +.uk-range::-moz-range-thumb { + /* 1 */ + border: none; + /* 2 */ + height: 15px; + width: 15px; + border-radius: 500px; + background: #fff; +} + +/* Edge */ +.uk-range::-ms-thumb { + /* 1 */ + margin-top: 0; +} + +/* IE11 */ +.uk-range::-ms-thumb { + /* 1 */ + border: none; + /* 2 */ + height: 15px; + width: 15px; + border-radius: 500px; + background: #fff; +} + +/* Edge + IE11 */ +.uk-range::-ms-tooltip { + display: none; +} + +/* Track + ========================================================================== */ +/* + * 1. Safari doesn't have a focus state. Using active instead. + */ +/* Webkit */ +.uk-range::-webkit-slider-runnable-track { + height: 3px; + background: #ebebeb; +} + +.uk-range:focus::-webkit-slider-runnable-track, +.uk-range:active::-webkit-slider-runnable-track { + background: #d2d2d2; +} + +/* Firefox */ +.uk-range::-moz-range-track { + height: 3px; + background: #ebebeb; +} + +.uk-range:focus::-moz-range-track { + background: #d2d2d2; +} + +/* Edge */ +.uk-range::-ms-fill-lower, +.uk-range::-ms-fill-upper { + height: 3px; + background: #ebebeb; +} + +.uk-range:focus::-ms-fill-lower, +.uk-range:focus::-ms-fill-upper { + background: #d2d2d2; +} + +/* ======================================================================== + Component: Form + ========================================================================== */ +/* + * 1. Define consistent box sizing. + * Default is `content-box` with following exceptions set to `border-box` + * `select`, `input[type="checkbox"]` and `input[type="radio"]` + * `input[type="search"]` in Chrome, Safari and Opera + * `input[type="color"]` in Firefox + * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera. + * 3. Remove `border-radius` in iOS. + * 4. Change font properties to `inherit` in all browsers. + */ +.uk-input, +.uk-select, +.uk-textarea, +.uk-radio, +.uk-checkbox { + /* 1 */ + -webkit-box-sizing: border-box; + box-sizing: border-box; + /* 2 */ + margin: 0; + /* 3 */ + border-radius: 0; + /* 4 */ + font: inherit; +} + +/* + * Show the overflow in Edge. + */ +.uk-input { + overflow: visible; +} + +/* + * Remove the inheritance of text transform in Firefox. + */ +.uk-select { + text-transform: none; +} + +/* + * 1. Change font properties to `inherit` in all browsers + * 2. Don't inherit the `font-weight` and use `bold` instead. + * NOTE: Both declarations don't work in Chrome, Safari and Opera. + */ +.uk-select optgroup { + /* 1 */ + font: inherit; + /* 2 */ + font-weight: bold; +} + +/* + * Remove the default vertical scrollbar in IE 10+. + */ +.uk-textarea { + overflow: auto; +} + +/* + * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X. + */ +.uk-input[type="search"]::-webkit-search-cancel-button, +.uk-input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +.uk-input[type="number"]::-webkit-inner-spin-button, +.uk-input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/* + * Removes placeholder transparency in Firefox. + */ +.uk-input::-moz-placeholder, +.uk-textarea::-moz-placeholder { + opacity: 1; +} + +/* + * Improves consistency of cursor style for clickable elements + */ +.uk-radio:not(:disabled), +.uk-checkbox:not(:disabled) { + cursor: pointer; +} + +/* + * Define consistent border, margin, and padding. + */ +.uk-fieldset { + border: none; + margin: 0; + padding: 0; +} + +/* Input, select and textarea + * Allowed: `text`, `password`, `datetime`, `datetime-local`, `date`, `month`, + `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color` + * Disallowed: `range`, `radio`, `checkbox`, `file`, `submit`, `reset` and `image` + ========================================================================== */ +/* + * Remove default style in iOS. + */ +.uk-input, +.uk-textarea { + -webkit-appearance: none; +} + +/* + * 1. Prevent content overflow if a fixed width is used + * 2. Take the full width + * 3. Reset default + * 4. Style + */ +.uk-input, +.uk-select, +.uk-textarea { + /* 1 */ + max-width: 100%; + /* 2 */ + width: 100%; + /* 3 */ + border: 0 none; + /* 4 */ + padding: 0 10px; + background: #fff; + color: #666; +} + +/* + * Single-line + * 1. Allow any element to look like an `input` or `select` element + * 2. Make sure line-height is not larger than height + * Also needed to center the text vertically + */ +.uk-input, +.uk-select:not([multiple]):not([size]) { + height: 40px; + vertical-align: middle; + /* 1 */ + display: inline-block; +} + +/* 2 */ +.uk-input:not(input), +.uk-select:not(select) { + line-height: 38px; +} + +/* + * Multi-line + */ +.uk-select[multiple], +.uk-select[size], +.uk-textarea { + padding-top: 4px; + padding-bottom: 4px; + vertical-align: top; +} + +/* Focus */ +.uk-input:focus, +.uk-select:focus, +.uk-textarea:focus { + outline: none; + background-color: #fff; + color: #666; +} + +/* Disabled */ +.uk-input:disabled, +.uk-select:disabled, +.uk-textarea:disabled { + background-color: #f8f8f8; + color: #999; +} + +/* + * Placeholder + */ +.uk-input::-ms-input-placeholder { + color: #999 !important; +} + +.uk-input::-webkit-input-placeholder { + color: #999; +} + +.uk-input:-ms-input-placeholder { + color: #999; +} + +.uk-input::placeholder { + color: #999; +} + +.uk-textarea::-ms-input-placeholder { + color: #999 !important; +} + +.uk-textarea::-webkit-input-placeholder { + color: #999; +} + +.uk-textarea:-ms-input-placeholder { + color: #999; +} + +.uk-textarea::placeholder { + color: #999; +} + +/* Style modifier (`uk-input`, `uk-select` and `uk-textarea`) + ========================================================================== */ +/* + * Small + */ +.uk-form-small { + font-size: 0.875rem; +} + +.uk-form-small:not(textarea):not([multiple]):not([size]) { + height: 30px; + padding-left: 8px; + padding-right: 8px; +} + +.uk-form-small:not(select):not(input):not(textarea) { + line-height: 28px; +} + +/* + * Large + */ +.uk-form-large { + font-size: 1.25rem; +} + +.uk-form-large:not(textarea):not([multiple]):not([size]) { + height: 55px; + padding-left: 12px; + padding-right: 12px; +} + +.uk-form-large:not(select):not(input):not(textarea) { + line-height: 53px; +} + +/* Style modifier (`uk-input`, `uk-select` and `uk-textarea`) + ========================================================================== */ +/* + * Error + */ +.uk-form-danger, +.uk-form-danger:focus { + color: #f0506e; +} + +/* + * Success + */ +.uk-form-success, +.uk-form-success:focus { + color: #32d296; +} + +/* + * Blank + */ +.uk-form-blank { + background: none; +} + +/* Width modifiers (`uk-input`, `uk-select` and `uk-textarea`) + ========================================================================== */ +/* + * Fixed widths + * Different widths for mini sized `input` and `select` elements + */ +input.uk-form-width-xsmall { + width: 50px; +} + +select.uk-form-width-xsmall { + width: 75px; +} + +.uk-form-width-small { + width: 130px; +} + +.uk-form-width-medium { + width: 200px; +} + +.uk-form-width-large { + width: 500px; +} + +/* Select + ========================================================================== */ +/* + * 1. Remove default style. Also works in Firefox + * 2. Style + * 3. Remove default style in IE 10/11 + * 4. Set `color` for options in the select dropdown, because the inherited `color` might be too light. + */ +.uk-select:not([multiple]):not([size]) { + /* 1 */ + -webkit-appearance: none; + -moz-appearance: none; + /* 2 */ + padding-right: 20px; + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); + background-repeat: no-repeat; + background-position: 100% 50%; +} + +/* 3 */ +.uk-select:not([multiple]):not([size])::-ms-expand { + display: none; +} + +/* 4 */ +.uk-select:not([multiple]):not([size]) option { + color: #444; +} + +/* + * Disabled + */ +.uk-select:not([multiple]):not([size]):disabled { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); +} + +/* Radio and checkbox + * Note: Does not work in IE11 + ========================================================================== */ +/* + * 1. Style + * 2. Make box more robust so it clips the child element + * 3. Vertical alignment + * 4. Remove default style + * 5. Fix black background on iOS + * 6. Center icons + */ +.uk-radio, +.uk-checkbox { + /* 1 */ + display: inline-block; + height: 16px; + width: 16px; + /* 2 */ + overflow: hidden; + /* 3 */ + margin-top: -4px; + vertical-align: middle; + /* 4 */ + -webkit-appearance: none; + -moz-appearance: none; + /* 5 */ + background-color: transparent; + /* 6 */ + background-repeat: no-repeat; + background-position: 50% 50%; +} + +.uk-radio { + border-radius: 50%; +} + +/* Focus */ +.uk-radio:focus, +.uk-checkbox:focus { + outline: none; +} + +/* + * Checked + */ +.uk-radio:checked, +.uk-checkbox:checked, +.uk-checkbox:indeterminate { + background-color: #1e87f0; +} + +/* Focus */ +.uk-radio:checked:focus, +.uk-checkbox:checked:focus, +.uk-checkbox:indeterminate:focus { + background-color: #0e6ecd; +} + +/* + * Icons + */ +.uk-radio:checked { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23fff%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E"); +} + +.uk-checkbox:checked { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); +} + +.uk-checkbox:indeterminate { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23fff%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E"); +} + +/* + * Disabled + */ +.uk-radio:disabled, +.uk-checkbox:disabled { + background-color: #f8f8f8; +} + +.uk-radio:disabled:checked { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23999%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E"); +} + +.uk-checkbox:disabled:checked { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); +} + +.uk-checkbox:disabled:indeterminate { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23999%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E"); +} + +/* Legend + ========================================================================== */ +/* + * Legend + * 1. Behave like block element + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove padding so people aren't caught out if they zero out fieldsets. + * 4. Style + */ +.uk-legend { + /* 1 */ + width: 100%; + /* 2 */ + color: inherit; + /* 3 */ + padding: 0; + /* 4 */ + font-size: 1.5rem; + line-height: 1.4; +} + +/* Custom controls + ========================================================================== */ +/* + * 1. Container fits its content + * 2. Create position context + * 3. Prevent content overflow + * 4. Behave like most inline-block elements + */ +.uk-form-custom { + /* 1 */ + display: inline-block; + /* 2 */ + position: relative; + /* 3 */ + max-width: 100%; + /* 4 */ + vertical-align: middle; +} + +/* + * 1. Position and resize the form control to always cover its container + * 2. Required for Firefox for positioning to the left + * 3. Required for Webkit to make `height` work + * 4. Hide controle and show cursor + * 5. Needed for the cursor + * 6. Clip height caused by 5. Needed for Webkit only + */ +.uk-form-custom select, +.uk-form-custom input[type="file"] { + /* 1 */ + position: absolute; + top: 0; + z-index: 1; + width: 100%; + height: 100%; + /* 2 */ + left: 0; + /* 3 */ + -webkit-appearance: none; + /* 4 */ + opacity: 0; + cursor: pointer; +} + +.uk-form-custom input[type="file"] { + /* 5 */ + font-size: 500px; + /* 6 */ + overflow: hidden; +} + +/* Label + ========================================================================== */ +/* Layout + ========================================================================== */ +/* + * Stacked + */ +.uk-form-stacked .uk-form-label { + display: block; + margin-bottom: 5px; +} + +/* + * Horizontal + */ +/* Tablet portrait and smaller */ +@media (max-width: 959px) { + /* Behave like `uk-form-stacked` */ + .uk-form-horizontal .uk-form-label { + display: block; + margin-bottom: 5px; + } +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-form-horizontal .uk-form-label { + width: 200px; + margin-top: 7px; + float: left; + } + .uk-form-horizontal .uk-form-controls { + margin-left: 215px; + } + /* Better vertical alignment if controls are checkboxes and radio buttons with text */ + .uk-form-horizontal .uk-form-controls-text { + padding-top: 7px; + } +} + +/* Icons + ========================================================================== */ +/* + * 1. Set position + * 2. Set width + * 3. Center icon vertically and horizontally + * 4. Style + */ +.uk-form-icon { + /* 1 */ + position: absolute; + top: 0; + bottom: 0; + left: 0; + /* 2 */ + width: 40px; + /* 3 */ + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + /* 4 */ + color: #999; +} + +/* + * Required for `a`. + */ +.uk-form-icon:hover { + color: #666; +} + +/* + * Make `input` element clickable through icon, e.g. if it's a `span` + */ +.uk-form-icon:not(a):not(button):not(input) { + pointer-events: none; +} + +/* + * Input padding + */ +.uk-form-icon:not(.uk-form-icon-flip) ~ .uk-input { + padding-left: 40px !important; +} + +/* + * Position modifier + */ +.uk-form-icon-flip { + right: 0; + left: auto; +} + +.uk-form-icon-flip ~ .uk-input { + padding-right: 40px !important; +} + +/* ======================================================================== + Component: Button + ========================================================================== */ +/* + * 1. Remove margins in Chrome, Safari and Opera. + * 2. Remove borders for `button`. + * 3. Address `overflow` set to `hidden` in IE. + * 4. Correct `font` properties and `color` not being inherited for `button`. + * 5. Remove the inheritance of text transform in Edge, Firefox, and IE. + * 6. Style + * 7. `line-height` is used to create a height because it also centers the text vertically for `a` elements. + * Better would be to use height and flexbox to center the text vertically but flexbox doesn't work in Firefox on `button` elements. + * 8. Align text if button has a width + * 9. Required for `a`. + */ +.uk-button { + /* 1 */ + margin: 0; + /* 2 */ + border: none; + /* 3 */ + overflow: visible; + /* 4 */ + font: inherit; + color: inherit; + /* 5 */ + text-transform: none; + /* 6 */ + display: inline-block; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding: 0 30px; + vertical-align: middle; + font-size: 0.875rem; + /* 7 */ + line-height: 38px; + /* 8 */ + text-align: center; + /* 9 */ + text-decoration: none; +} + +.uk-button:not(:disabled) { + cursor: pointer; +} + +/* + * Remove the inner border and padding in Firefox. + */ +.uk-button::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* Hover */ +.uk-button:hover { + /* 9 */ + text-decoration: none; +} + +/* Focus */ +.uk-button:focus { + outline: none; +} + +/* OnClick + Active */ +/* Style modifiers + ========================================================================== */ +/* + * Default + */ +.uk-button-default { + background-color: transparent; + color: #333; +} + +/* Hover + Focus */ +.uk-button-default:hover, +.uk-button-default:focus { + background-color: transparent; + color: #333; +} + +/* OnClick + Active */ +.uk-button-default:active, +.uk-button-default.uk-active { + background-color: transparent; + color: #333; +} + +/* + * Primary + */ +.uk-button-primary { + background-color: #1e87f0; + color: #fff; +} + +/* Hover + Focus */ +.uk-button-primary:hover, +.uk-button-primary:focus { + background-color: #0f7ae5; + color: #fff; +} + +/* OnClick + Active */ +.uk-button-primary:active, +.uk-button-primary.uk-active { + background-color: #0e6ecd; + color: #fff; +} + +/* + * Secondary + */ +.uk-button-secondary { + background-color: #222; + color: #fff; +} + +/* Hover + Focus */ +.uk-button-secondary:hover, +.uk-button-secondary:focus { + background-color: #151515; + color: #fff; +} + +/* OnClick + Active */ +.uk-button-secondary:active, +.uk-button-secondary.uk-active { + background-color: #090909; + color: #fff; +} + +/* + * Danger + */ +.uk-button-danger { + background-color: #f0506e; + color: #fff; +} + +/* Hover + Focus */ +.uk-button-danger:hover, +.uk-button-danger:focus { + background-color: #ee395b; + color: #fff; +} + +/* OnClick + Active */ +.uk-button-danger:active, +.uk-button-danger.uk-active { + background-color: #ec2147; + color: #fff; +} + +/* + * Disabled + * The same for all style modifiers + */ +.uk-button-default:disabled, +.uk-button-primary:disabled, +.uk-button-secondary:disabled, +.uk-button-danger:disabled { + background-color: transparent; + color: #999; +} + +/* Size modifiers + ========================================================================== */ +.uk-button-small { + padding: 0 15px; + line-height: 28px; + font-size: 0.875rem; +} + +.uk-button-large { + padding: 0 40px; + line-height: 53px; + font-size: 0.875rem; +} + +/* Text modifiers + ========================================================================== */ +/* + * Text + * 1. Reset + * 2. Style + */ +.uk-button-text { + /* 1 */ + padding: 0; + line-height: 1.5; + background: none; + /* 2 */ + color: #333; +} + +/* Hover + Focus */ +.uk-button-text:hover, +.uk-button-text:focus { + color: #333; +} + +/* Disabled */ +.uk-button-text:disabled { + color: #999; +} + +/* + * Link + * 1. Reset + * 2. Style + */ +.uk-button-link { + /* 1 */ + padding: 0; + line-height: 1.5; + background: none; + /* 2 */ + color: #1e87f0; +} + +/* Hover + Focus */ +.uk-button-link:hover, +.uk-button-link:focus { + color: #0f6ecd; + text-decoration: underline; +} + +/* Disabled */ +.uk-button-link:disabled { + color: #999; + text-decoration: none; +} + +/* Group + ========================================================================== */ +/* + * 1. Using `flex` instead of `inline-block` to prevent whitespace betweent child elements + * 2. Behave like button + * 3. Create position context + */ +.uk-button-group { + /* 1 */ + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + /* 2 */ + vertical-align: middle; + /* 3 */ + position: relative; +} + +/* ======================================================================== + Component: Section + ========================================================================== */ +/* + * 1. Make it work with `100vh` and height in general + */ +.uk-section { + -webkit-box-sizing: border-box; + box-sizing: border-box; + /* 1 */ + padding-top: 40px; + padding-bottom: 40px; +} + +/* Desktop and bigger */ +@media (min-width: 960px) { + .uk-section { + padding-top: 70px; + padding-bottom: 70px; + } +} + +/* + * Micro clearfix + */ +.uk-section::before, +.uk-section::after { + content: ""; + display: table; +} + +.uk-section::after { + clear: both; +} + +/* + * Remove margin from the last-child + */ +.uk-section > :last-child { + margin-bottom: 0; +} + +/* Size modifiers + ========================================================================== */ +/* + * XSmall + */ +.uk-section-xsmall { + padding-top: 20px; + padding-bottom: 20px; +} + +/* + * Small + */ +.uk-section-small { + padding-top: 40px; + padding-bottom: 40px; +} + +/* + * Large + */ +.uk-section-large { + padding-top: 70px; + padding-bottom: 70px; +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-section-large { + padding-top: 140px; + padding-bottom: 140px; + } +} + +/* + * XLarge + */ +.uk-section-xlarge { + padding-top: 140px; + padding-bottom: 140px; +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-section-xlarge { + padding-top: 210px; + padding-bottom: 210px; + } +} + +/* Style modifiers + ========================================================================== */ +/* + * Default + */ +.uk-section-default { + background: #fff; +} + +/* + * Muted + */ +.uk-section-muted { + background: #f8f8f8; +} + +/* + * Primary + */ +.uk-section-primary { + background: #1e87f0; +} + +/* + * Secondary + */ +.uk-section-secondary { + background: #222; +} + +/* Overlap modifier + ========================================================================== */ +/* + * Reserved modifier to make a section overlap another section with an border image + * Implemented by the theme + */ +/* ======================================================================== + Component: Container + ========================================================================== */ +/* + * 1. Box sizing has to be `content-box` so the max-width is always the same and + * unaffected by the padding on different breakpoints. It's important for the size modifiers. + */ +.uk-container { + /* 1 */ + -webkit-box-sizing: content-box; + box-sizing: content-box; + max-width: 1200px; + margin-left: auto; + margin-right: auto; + padding-left: 15px; + padding-right: 15px; +} + +/* Phone landscape and bigger */ +@media (min-width: 640px) { + .uk-container { + padding-left: 30px; + padding-right: 30px; + } +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-container { + padding-left: 40px; + padding-right: 40px; + } +} + +/* + * Micro clearfix + */ +.uk-container::before, +.uk-container::after { + content: ""; + display: table; +} + +.uk-container::after { + clear: both; +} + +/* + * Remove margin from the last-child + */ +.uk-container > :last-child { + margin-bottom: 0; +} + +/* + * Remove padding from nested containers + */ +.uk-container .uk-container { + padding-left: 0; + padding-right: 0; +} + +/* Size modifier + ========================================================================== */ +.uk-container-xsmall { + max-width: 750px; +} + +.uk-container-small { + max-width: 900px; +} + +.uk-container-large { + max-width: 1600px; +} + +.uk-container-expand { + max-width: none; +} + +/* Expand modifier + ========================================================================== */ +/* + * Expand one side only + */ +.uk-container-expand-left { + margin-left: 0; +} + +.uk-container-expand-right { + margin-right: 0; +} + +/* Phone landscape and bigger */ +@media (min-width: 640px) { + .uk-container-expand-left.uk-container-xsmall, + .uk-container-expand-right.uk-container-xsmall { + max-width: calc(50% + (750px / 2) - 30px); + } + .uk-container-expand-left.uk-container-small, + .uk-container-expand-right.uk-container-small { + max-width: calc(50% + (900px / 2) - 30px); + } +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-container-expand-left, + .uk-container-expand-right { + max-width: calc(50% + (1200px / 2) - 40px); + } + .uk-container-expand-left.uk-container-xsmall, + .uk-container-expand-right.uk-container-xsmall { + max-width: calc(50% + (750px / 2) - 40px); + } + .uk-container-expand-left.uk-container-small, + .uk-container-expand-right.uk-container-small { + max-width: calc(50% + (900px / 2) - 40px); + } + .uk-container-expand-left.uk-container-large, + .uk-container-expand-right.uk-container-large { + max-width: calc(50% + (1600px / 2) - 40px); + } +} + +/* Item + ========================================================================== */ +/* + * Utility classes to reset container padding on the left or right side + * Note: It has to be negative margin on the item, because it's specific to the item. + */ +.uk-container-item-padding-remove-left, +.uk-container-item-padding-remove-right { + width: calc(100% + 15px); +} + +.uk-container-item-padding-remove-left { + margin-left: -15px; +} + +.uk-container-item-padding-remove-right { + margin-right: -15px; +} + +/* Phone landscape and bigger */ +@media (min-width: 640px) { + .uk-container-item-padding-remove-left, + .uk-container-item-padding-remove-right { + width: calc(100% + 30px); + } + .uk-container-item-padding-remove-left { + margin-left: -30px; + } + .uk-container-item-padding-remove-right { + margin-right: -30px; + } +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-container-item-padding-remove-left, + .uk-container-item-padding-remove-right { + width: calc(100% + 40px); + } + .uk-container-item-padding-remove-left { + margin-left: -40px; + } + .uk-container-item-padding-remove-right { + margin-right: -40px; + } +} + +/* ======================================================================== + Component: Grid + ========================================================================== */ +/* + * 1. Allow cells to wrap into the next line + * 2. Reset list + */ +.uk-grid { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + /* 1 */ + -ms-flex-wrap: wrap; + flex-wrap: wrap; + /* 2 */ + margin: 0; + padding: 0; + list-style: none; +} + +/* + * Grid cell + * Note: Space is allocated solely based on content dimensions, but shrinks: 0 1 auto + * Reset margin for e.g. paragraphs + */ +.uk-grid > * { + margin: 0; +} + +/* + * Remove margin from the last-child + */ +.uk-grid > * > :last-child { + margin-bottom: 0; +} + +/* Gutter + ========================================================================== */ +/* + * Default + */ +/* Horizontal */ +.uk-grid { + margin-left: -30px; +} + +.uk-grid > * { + padding-left: 30px; +} + +/* Vertical */ +.uk-grid + .uk-grid, +.uk-grid > .uk-grid-margin, +* + .uk-grid-margin { + margin-top: 30px; +} + +/* Desktop and bigger */ +@media (min-width: 1200px) { + /* Horizontal */ + .uk-grid { + margin-left: -40px; + } + .uk-grid > * { + padding-left: 40px; + } + /* Vertical */ + .uk-grid + .uk-grid, + .uk-grid > .uk-grid-margin, + * + .uk-grid-margin { + margin-top: 40px; + } +} + +/* + * Small + */ +/* Horizontal */ +.uk-grid-small { + margin-left: -15px; +} + +.uk-grid-small > * { + padding-left: 15px; +} + +/* Vertical */ +.uk-grid + .uk-grid-small, +.uk-grid-small > .uk-grid-margin, +* + .uk-grid-margin-small { + margin-top: 15px; +} + +/* + * Medium + */ +/* Horizontal */ +.uk-grid-medium { + margin-left: -30px; +} + +.uk-grid-medium > * { + padding-left: 30px; +} + +/* Vertical */ +.uk-grid + .uk-grid-medium, +.uk-grid-medium > .uk-grid-margin, +* + .uk-grid-margin-medium { + margin-top: 30px; +} + +/* + * Large + */ +/* Horizontal */ +.uk-grid-large { + margin-left: -40px; +} + +.uk-grid-large > * { + padding-left: 40px; +} + +/* Vertical */ +.uk-grid + .uk-grid-large, +.uk-grid-large > .uk-grid-margin, +* + .uk-grid-margin-large { + margin-top: 40px; +} + +/* Desktop and bigger */ +@media (min-width: 1200px) { + /* Horizontal */ + .uk-grid-large { + margin-left: -70px; + } + .uk-grid-large > * { + padding-left: 70px; + } + /* Vertical */ + .uk-grid + .uk-grid-large, + .uk-grid-large > .uk-grid-margin, + * + .uk-grid-margin-large { + margin-top: 70px; + } +} + +/* + * Collapse + */ +/* Horizontal */ +.uk-grid-collapse { + margin-left: 0; +} + +.uk-grid-collapse > * { + padding-left: 0; +} + +/* Vertical */ +.uk-grid + .uk-grid-collapse, +.uk-grid-collapse > .uk-grid-margin { + margin-top: 0; +} + +/* Divider + ========================================================================== */ +.uk-grid-divider > * { + position: relative; +} + +.uk-grid-divider > :not(.uk-first-column)::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + border-left: 1px solid #e5e5e5; +} + +/* Vertical */ +.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before { + content: ""; + position: absolute; + left: 0; + right: 0; + border-top: 1px solid #e5e5e5; +} + +/* + * Default + */ +/* Horizontal */ +.uk-grid-divider { + margin-left: -60px; +} + +.uk-grid-divider > * { + padding-left: 60px; +} + +.uk-grid-divider > :not(.uk-first-column)::before { + left: 30px; +} + +/* Vertical */ +.uk-grid-divider.uk-grid-stack > .uk-grid-margin { + margin-top: 60px; +} + +.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before { + top: -30px; + left: 60px; +} + +/* Desktop and bigger */ +@media (min-width: 1200px) { + /* Horizontal */ + .uk-grid-divider { + margin-left: -80px; + } + .uk-grid-divider > * { + padding-left: 80px; + } + .uk-grid-divider > :not(.uk-first-column)::before { + left: 40px; + } + /* Vertical */ + .uk-grid-divider.uk-grid-stack > .uk-grid-margin { + margin-top: 80px; + } + .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before { + top: -40px; + left: 80px; + } +} + +/* + * Small + */ +/* Horizontal */ +.uk-grid-divider.uk-grid-small { + margin-left: -30px; +} + +.uk-grid-divider.uk-grid-small > * { + padding-left: 30px; +} + +.uk-grid-divider.uk-grid-small > :not(.uk-first-column)::before { + left: 15px; +} + +/* Vertical */ +.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin { + margin-top: 30px; +} + +.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin::before { + top: -15px; + left: 30px; +} + +/* + * Medium + */ +/* Horizontal */ +.uk-grid-divider.uk-grid-medium { + margin-left: -60px; +} + +.uk-grid-divider.uk-grid-medium > * { + padding-left: 60px; +} + +.uk-grid-divider.uk-grid-medium > :not(.uk-first-column)::before { + left: 30px; +} + +/* Vertical */ +.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin { + margin-top: 60px; +} + +.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin::before { + top: -30px; + left: 60px; +} + +/* + * Large + */ +/* Horizontal */ +.uk-grid-divider.uk-grid-large { + margin-left: -80px; +} + +.uk-grid-divider.uk-grid-large > * { + padding-left: 80px; +} + +.uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before { + left: 40px; +} + +/* Vertical */ +.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin { + margin-top: 80px; +} + +.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before { + top: -40px; + left: 80px; +} + +/* Desktop and bigger */ +@media (min-width: 1200px) { + /* Horizontal */ + .uk-grid-divider.uk-grid-large { + margin-left: -140px; + } + .uk-grid-divider.uk-grid-large > * { + padding-left: 140px; + } + .uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before { + left: 70px; + } + /* Vertical */ + .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin { + margin-top: 140px; + } + .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before { + top: -70px; + left: 140px; + } +} + +/* Match child of a grid cell + ========================================================================== */ +/* + * Behave like a block element + * 1. Wrap into the next line + * 2. Take the full width, at least 100%. Only if no class from the Width component is set. + * 3. Expand width even if larger than 100%, e.g. because of negative margin (Needed for nested grids) + */ +.uk-grid-match > *, +.uk-grid-item-match { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + /* 1 */ + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.uk-grid-match > * > :not([class*='uk-width']), +.uk-grid-item-match > :not([class*='uk-width']) { + /* 2 */ + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + /* 3 */ + -webkit-box-flex: 1; + -ms-flex: auto; + flex: auto; +} + +/* ======================================================================== + Component: Tile + ========================================================================== */ +.uk-tile { + position: relative; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding-left: 15px; + padding-right: 15px; + padding-top: 40px; + padding-bottom: 40px; +} + +/* Phone landscape and bigger */ +@media (min-width: 640px) { + .uk-tile { + padding-left: 30px; + padding-right: 30px; + } +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-tile { + padding-left: 40px; + padding-right: 40px; + padding-top: 70px; + padding-bottom: 70px; + } +} + +/* + * Micro clearfix + */ +.uk-tile::before, +.uk-tile::after { + content: ""; + display: table; +} + +.uk-tile::after { + clear: both; +} + +/* + * Remove margin from the last-child + */ +.uk-tile > :last-child { + margin-bottom: 0; +} + +/* Size modifiers + ========================================================================== */ +/* + * XSmall + */ +.uk-tile-xsmall { + padding-top: 20px; + padding-bottom: 20px; +} + +/* + * Small + */ +.uk-tile-small { + padding-top: 40px; + padding-bottom: 40px; +} + +/* + * Large + */ +.uk-tile-large { + padding-top: 70px; + padding-bottom: 70px; +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-tile-large { + padding-top: 140px; + padding-bottom: 140px; + } +} + +/* + * XLarge + */ +.uk-tile-xlarge { + padding-top: 140px; + padding-bottom: 140px; +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-tile-xlarge { + padding-top: 210px; + padding-bottom: 210px; + } +} + +/* Style modifiers + ========================================================================== */ +/* + * Default + */ +.uk-tile-default { + background: #fff; +} + +/* + * Muted + */ +.uk-tile-muted { + background: #f8f8f8; +} + +/* + * Primary + */ +.uk-tile-primary { + background: #1e87f0; +} + +/* + * Secondary + */ +.uk-tile-secondary { + background: #222; +} + +/* ======================================================================== + Component: Card + ========================================================================== */ +.uk-card { + position: relative; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* Sections + ========================================================================== */ +.uk-card-body { + padding: 30px 30px; +} + +.uk-card-header { + padding: 15px 30px; +} + +.uk-card-footer { + padding: 15px 30px; +} + +/* Desktop and bigger */ +@media (min-width: 1200px) { + .uk-card-body { + padding: 40px 40px; + } + .uk-card-header { + padding: 20px 40px; + } + .uk-card-footer { + padding: 20px 40px; + } +} + +/* + * Micro clearfix + */ +.uk-card-body::before, +.uk-card-body::after, +.uk-card-header::before, +.uk-card-header::after, +.uk-card-footer::before, +.uk-card-footer::after { + content: ""; + display: table; +} + +.uk-card-body::after, +.uk-card-header::after, +.uk-card-footer::after { + clear: both; +} + +/* + * Remove margin from the last-child + */ +.uk-card-body > :last-child, +.uk-card-header > :last-child, +.uk-card-footer > :last-child { + margin-bottom: 0; +} + +/* Media + ========================================================================== */ +/* + * Reserved alignment modifier to style the media element, e.g. with `border-radius` + * Implemented by the theme + */ +/* Title + ========================================================================== */ +.uk-card-title { + font-size: 1.5rem; + line-height: 1.4; +} + +/* Badge + ========================================================================== */ +.uk-card-badge { + position: absolute; + top: 30px; + right: 30px; + z-index: 1; +} + +/* + * Remove margin from adjacent element + */ +.uk-card-badge:first-child + * { + margin-top: 0; +} + +/* Hover modifier + ========================================================================== */ +.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover { + background: #fff; +} + +/* Style modifiers + ========================================================================== */ +/* + * Default + * Note: Header and Footer are only implemented for the default style + */ +.uk-card-default { + background: #fff; + color: #666; +} + +.uk-card-default .uk-card-title { + color: #333; +} + +.uk-card-default.uk-card-hover:hover { + background-color: #fff; +} + +/* + * Primary + */ +.uk-card-primary { + background: #1e87f0; + color: #fff; +} + +.uk-card-primary .uk-card-title { + color: #fff; +} + +.uk-card-primary.uk-card-hover:hover { + background-color: #1e87f0; +} + +/* + * Secondary + */ +.uk-card-secondary { + background: #222; + color: #fff; +} + +.uk-card-secondary .uk-card-title { + color: #fff; +} + +.uk-card-secondary.uk-card-hover:hover { + background-color: #222; +} + +/* Size modifier + ========================================================================== */ +/* + * Small + */ +.uk-card-small.uk-card-body, +.uk-card-small .uk-card-body { + padding: 20px 20px; +} + +.uk-card-small .uk-card-header { + padding: 13px 20px; +} + +.uk-card-small .uk-card-footer { + padding: 13px 20px; +} + +/* + * Large + */ +/* Desktop and bigger */ +@media (min-width: 1200px) { + .uk-card-large.uk-card-body, + .uk-card-large .uk-card-body { + padding: 70px 70px; + } + .uk-card-large .uk-card-header { + padding: 35px 70px; + } + .uk-card-large .uk-card-footer { + padding: 35px 70px; + } +} + +/* ======================================================================== + Component: Close + ========================================================================== */ +/* + * Adopts `uk-icon` + */ +.uk-close { + color: #999; +} + +/* Hover + Focus */ +.uk-close:hover, +.uk-close:focus { + color: #666; + outline: none; +} + +/* ======================================================================== + Component: Spinner + ========================================================================== */ +/* + * Adopts `uk-icon` + */ +/* SVG + ========================================================================== */ +.uk-spinner > * { + -webkit-animation: uk-spinner-rotate 1.4s linear infinite; + animation: uk-spinner-rotate 1.4s linear infinite; +} + +@-webkit-keyframes uk-spinner-rotate { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + } +} + +@keyframes uk-spinner-rotate { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + } +} + +/* + * Circle + */ +.uk-spinner > * > * { + stroke-dasharray: 88px; + stroke-dashoffset: 0; + -webkit-transform-origin: center; + transform-origin: center; + -webkit-animation: uk-spinner-dash 1.4s ease-in-out infinite; + animation: uk-spinner-dash 1.4s ease-in-out infinite; + stroke-width: 1; + stroke-linecap: round; +} + +@-webkit-keyframes uk-spinner-dash { + 0% { + stroke-dashoffset: 88px; + } + 50% { + stroke-dashoffset: 22px; + -webkit-transform: rotate(135deg); + transform: rotate(135deg); + } + 100% { + stroke-dashoffset: 88px; + -webkit-transform: rotate(450deg); + transform: rotate(450deg); + } +} + +@keyframes uk-spinner-dash { + 0% { + stroke-dashoffset: 88px; + } + 50% { + stroke-dashoffset: 22px; + -webkit-transform: rotate(135deg); + transform: rotate(135deg); + } + 100% { + stroke-dashoffset: 88px; + -webkit-transform: rotate(450deg); + transform: rotate(450deg); + } +} + +/* ======================================================================== + Component: Totop + ========================================================================== */ +/* + * Addopts `uk-icon` + */ +.uk-totop { + padding: 5px; + color: #999; +} + +/* Hover + Focus */ +.uk-totop:hover, +.uk-totop:focus { + color: #666; + outline: none; +} + +/* OnClick */ +.uk-totop:active { + color: #333; +} + +/* ======================================================================== + Component: Marker + ========================================================================== */ +/* + * Addopts `uk-icon` + */ +.uk-marker { + padding: 5px; + background: #222; + color: #fff; +} + +/* Hover + Focus */ +.uk-marker:hover, +.uk-marker:focus { + color: #fff; + outline: none; +} + +/* ======================================================================== + Component: Alert + ========================================================================== */ +.uk-alert { + position: relative; + margin-bottom: 20px; + padding: 15px 29px 15px 15px; + background: #f8f8f8; + color: #666; +} + +/* Add margin if adjacent element */ +* + .uk-alert { + margin-top: 20px; +} + +/* + * Remove margin from the last-child + */ +.uk-alert > :last-child { + margin-bottom: 0; +} + +/* Close + * Adopts `uk-close` + ========================================================================== */ +.uk-alert-close { + position: absolute; + top: 20px; + right: 15px; +} + +/* + * Remove margin from adjacent element + */ +.uk-alert-close:first-child + * { + margin-top: 0; +} + +/* + * Hover + Focus + */ +/* Style modifiers + ========================================================================== */ +/* + * Primary + */ +.uk-alert-primary { + background: #d8eafc; + color: #1e87f0; +} + +/* + * Success + */ +.uk-alert-success { + background: #edfbf6; + color: #32d296; +} + +/* + * Warning + */ +.uk-alert-warning { + background: #fef5ee; + color: #faa05a; +} + +/* + * Danger + */ +.uk-alert-danger { + background: #fef4f6; + color: #f0506e; +} + +/* ======================================================================== + Component: Badge + ========================================================================== */ +/* + * 1. Style + * 2. Center child vertically and horizontally + */ +.uk-badge { + -webkit-box-sizing: border-box; + box-sizing: border-box; + min-width: 22px; + height: 22px; + padding: 0 5px; + border-radius: 500px; + vertical-align: middle; + /* 1 */ + background: #1e87f0; + color: #fff; + font-size: 0.875rem; + /* 2 */ + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +/* + * Required for `a` + */ +.uk-badge:hover, +.uk-badge:focus { + color: #fff; + text-decoration: none; + outline: none; +} + +/* ======================================================================== + Component: Label + ========================================================================== */ +.uk-label { + display: inline-block; + padding: 0 10px; + background: #1e87f0; + line-height: 1.5; + font-size: 0.875rem; + color: #fff; + vertical-align: middle; + white-space: nowrap; +} + +/* Color modifiers + ========================================================================== */ +/* + * Success + */ +.uk-label-success { + background-color: #32d296; + color: #fff; +} + +/* + * Warning + */ +.uk-label-warning { + background-color: #faa05a; + color: #fff; +} + +/* + * Danger + */ +.uk-label-danger { + background-color: #f0506e; + color: #fff; +} + +/* ======================================================================== + Component: Overlay + ========================================================================== */ +.uk-overlay { + padding: 30px 30px; +} + +/* + * Remove margin from the last-child + */ +.uk-overlay > :last-child { + margin-bottom: 0; +} + +/* Icon + ========================================================================== */ +/* Style modifiers + ========================================================================== */ +/* + * Default + */ +.uk-overlay-default { + background: rgba(255, 255, 255, 0.8); +} + +/* + * Primary + */ +.uk-overlay-primary { + background: rgba(34, 34, 34, 0.8); +} + +/* ======================================================================== + Component: Article + ========================================================================== */ +/* + * Micro clearfix + */ +.uk-article::before, +.uk-article::after { + content: ""; + display: table; +} + +.uk-article::after { + clear: both; +} + +/* + * Remove margin from the last-child + */ +.uk-article > :last-child { + margin-bottom: 0; +} + +/* Adjacent sibling + ========================================================================== */ +.uk-article + .uk-article { + margin-top: 70px; +} + +/* Title + ========================================================================== */ +.uk-article-title { + font-size: 2.23125rem; + line-height: 1.2; +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-article-title { + font-size: 2.625rem; + } +} + +/* Meta + ========================================================================== */ +.uk-article-meta { + font-size: 0.875rem; + line-height: 1.4; + color: #999; +} + +/* ======================================================================== + Component: Comment + ========================================================================== */ +/* Sections + ========================================================================== */ +.uk-comment-body { + overflow-wrap: break-word; + word-wrap: break-word; +} + +.uk-comment-header { + margin-bottom: 20px; +} + +/* + * Micro clearfix + */ +.uk-comment-body::before, +.uk-comment-body::after, +.uk-comment-header::before, +.uk-comment-header::after { + content: ""; + display: table; +} + +.uk-comment-body::after, +.uk-comment-header::after { + clear: both; +} + +/* + * Remove margin from the last-child + */ +.uk-comment-body > :last-child, +.uk-comment-header > :last-child { + margin-bottom: 0; +} + +/* Title + ========================================================================== */ +.uk-comment-title { + font-size: 1.25rem; + line-height: 1.4; +} + +/* Meta + ========================================================================== */ +.uk-comment-meta { + font-size: 0.875rem; + line-height: 1.4; + color: #999; +} + +/* Avatar + ========================================================================== */ +/* List + ========================================================================== */ +.uk-comment-list { + padding: 0; + list-style: none; +} + +/* Adjacent siblings */ +.uk-comment-list > :nth-child(n+2) { + margin-top: 70px; +} + +/* + * Sublists + * Note: General sibling selector allows reply block between comment and sublist + */ +.uk-comment-list .uk-comment ~ ul { + margin: 70px 0 0 0; + padding-left: 30px; + list-style: none; +} + +/* Tablet and bigger */ +@media (min-width: 960px) { + .uk-comment-list .uk-comment ~ ul { + padding-left: 100px; + } +} + +/* Adjacent siblings */ +.uk-comment-list .uk-comment ~ ul > :nth-child(n+2) { + margin-top: 70px; +} + +/* Style modifier + ========================================================================== */ +/* ======================================================================== + Component: Search + ========================================================================== */ +/* + * 1. Container fits its content + * 2. Create position context + * 3. Prevent content overflow + * 4. Reset `form` + */ +.uk-search { + /* 1 */ + display: inline-block; + /* 2 */ + position: relative; + /* 3 */ + max-width: 100%; + /* 4 */ + margin: 0; +} + +/* Input + ========================================================================== */ +/* + * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X. + */ +.uk-search-input::-webkit-search-cancel-button, +.uk-search-input::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* + * Removes placeholder transparency in Firefox. + */ +.uk-search-input::-moz-placeholder { + opacity: 1; +} + +/* + * 1. Define consistent box sizing. + * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera. + * 3. Remove `border-radius` in iOS. + * 4. Change font properties to `inherit` in all browsers + * 5. Show the overflow in Edge. + * 6. Remove default style in iOS. + * 7. Vertical alignment + * 8. Take the full container width + * 9. Style + */ +.uk-search-input { + /* 1 */ + -webkit-box-sizing: border-box; + box-sizing: border-box; + /* 2 */ + margin: 0; + /* 3 */ + border-radius: 0; + /* 4 */ + font: inherit; + /* 5 */ + overflow: visible; + /* 6 */ + -webkit-appearance: none; + /* 7 */ + vertical-align: middle; + /* 8 */ + width: 100%; + /* 9 */ + border: none; + color: #666; +} + +.uk-search-input:focus { + outline: none; +} + +/* Placeholder */ +.uk-search-input:-ms-input-placeholder { + color: #999 !important; +} + +.uk-search-input::-webkit-input-placeholder { + color: #999; +} + +.uk-search-input::-ms-input-placeholder { + color: #999; +} + +.uk-search-input::placeholder { + color: #999; +} + +/* Icon (Adopts `uk-icon`) + ========================================================================== */ +/* + * Remove default focus style + */ +.uk-search-icon:focus { + outline: none; +} + +/* + * Position above input + * 1. Set position + * 2. Center icon vertically and horizontally + * 3. Style + */ +.uk-search .uk-search-icon { + /* 1 */ + position: absolute; + top: 0; + bottom: 0; + left: 0; + /* 2 */ + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + /* 3 */ + color: #999; +} + +/* + * Required for `a`. + */ +.uk-search .uk-search-icon:hover { + color: #999; +} + +/* + * Make `input` element clickable through icon, e.g. if it's a `span` + */ +.uk-search .uk-search-icon:not(a):not(button):not(input) { + pointer-events: none; +} + +/* + * Position modifier + */ +.uk-search .uk-search-icon-flip { + right: 0; + left: auto; +} + +/* Default modifier + ========================================================================== */ +.uk-search-default { + width: 180px; +} + +/* + * Input + */ +.uk-search-default .uk-search-input { + height: 40px; + padding-left: 6px; + padding-right: 6px; + background: transparent; +} + +/* Focus */ +.uk-search-default .uk-search-input:focus { + background-color: transparent; +} + +/* + * Icon + */ +.uk-search-default .uk-search-icon { + width: 40px; +} + +.uk-search-default .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { + padding-left: 40px; +} + +.uk-search-default .uk-search-icon-flip ~ .uk-search-input { + padding-right: 40px; +} + +/* Navbar modifier + ========================================================================== */ +.uk-search-navbar { + width: 400px; +} + +/* + * Input + */ +.uk-search-navbar .uk-search-input { + height: 40px; + background: transparent; + font-size: 1.5rem; +} + +/* + * Icon + */ +.uk-search-navbar .uk-search-icon { + width: 40px; +} + +.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { + padding-left: 40px; +} + +.uk-search-navbar .uk-search-icon-flip ~ .uk-search-input { + padding-right: 40px; +} + +/* Large modifier + ========================================================================== */ +.uk-search-large { + width: 500px; +} + +/* + * Input + */ +.uk-search-large .uk-search-input { + height: 80px; + background: transparent; + font-size: 2.625rem; +} + +/* + * Icon + */ +.uk-search-large .uk-search-icon { + width: 80px; +} + +.uk-search-large .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { + padding-left: 80px; +} + +.uk-search-large .uk-search-icon-flip ~ .uk-search-input { + padding-right: 80px; +} + +/* Toggle + ========================================================================== */ +.uk-search-toggle { + color: #999; +} + +/* Hover + Focus */ +.uk-search-toggle:hover, +.uk-search-toggle:focus { + color: #666; +} + +/* ======================================================================== + Component: Nav + ========================================================================== */ +/* + * Reset + * 1. Prepare lists + * 2. Prepare links + * 3. Remove default focus style + */ +/* 1 */ +.uk-nav, +.uk-nav ul { + margin: 0; + padding: 0; + list-style: none; +} + +/* 2 */ +.uk-nav li > a { + display: block; + text-decoration: none; +} + +/* 3 */ +.uk-nav li > a:focus { + outline: none; +} + +/* + * Items + * Must target `a` elements to exclude other elements (e.g. lists) + */ +.uk-nav > li > a { + padding: 5px 0; +} + +/* Sublists + ========================================================================== */ +/* + * Level 2 + * `ul` needed for higher specificity to override padding + */ +ul.uk-nav-sub { + padding: 5px 0 5px 15px; +} + +/* + * Level 3 and deeper + */ +.uk-nav-sub ul { + padding-left: 15px; +} + +/* + * Items + */ +.uk-nav-sub a { + padding: 2px 0; +} + +/* Parent icon modifier + ========================================================================== */ +.uk-nav-parent-icon > .uk-parent > a::after { + content: ""; + width: 1.5em; + height: 1.5em; + float: right; + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%221.1%22%20points%3D%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E"); + background-repeat: no-repeat; + background-position: 50% 50%; +} + +.uk-nav-parent-icon > .uk-parent.uk-open > a::after { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E"); +} + +/* Header + ========================================================================== */ +.uk-nav-header { + padding: 5px 0; + text-transform: uppercase; + font-size: 0.875rem; +} + +.uk-nav-header:not(:first-child) { + margin-top: 20px; +} + +/* Divider + ========================================================================== */ +.uk-nav-divider { + margin: 5px 0; +} + +/* Default modifier + ========================================================================== */ +/* + * Items + */ +.uk-nav-default > li > a { + color: #999; +} + +/* Hover + Focus */ +.uk-nav-default > li > a:hover, +.uk-nav-default > li > a:focus { + color: #666; +} + +/* Active */ +.uk-nav-default > li.uk-active > a { + color: #333; +} + +/* + * Header + */ +.uk-nav-default .uk-nav-header { + color: #333; +} + +/* + * Divider + */ +.uk-nav-default .uk-nav-divider { + border-top: 1px solid #e5e5e5; +} + +/* + * Sublists + */ +.uk-nav-default .uk-nav-sub a { + color: #999; +} + +.uk-nav-default .uk-nav-sub a:hover, +.uk-nav-default .uk-nav-sub a:focus { + color: #666; +} + +.uk-nav-default .uk-nav-sub li.uk-active > a { + color: #333; +} + +/* Primary modifier + ========================================================================== */ +/* + * Items + */ +.uk-nav-primary > li > a { + font-size: 1.5rem; + line-height: 1.5; + color: #999; +} + +/* Hover + Focus */ +.uk-nav-primary > li > a:hover, +.uk-nav-primary > li > a:focus { + color: #666; +} + +/* Active */ +.uk-nav-primary > li.uk-active > a { + color: #333; +} + +/* + * Header + */ +.uk-nav-primary .uk-nav-header { + color: #333; +} + +/* + * Divider + */ +.uk-nav-primary .uk-nav-divider { + border-top: 1px solid #e5e5e5; +} + +/* + * Sublists + */ +.uk-nav-primary .uk-nav-sub a { + color: #999; +} + +.uk-nav-primary .uk-nav-sub a:hover, +.uk-nav-primary .uk-nav-sub a:focus { + color: #666; +} + +.uk-nav-primary .uk-nav-sub li.uk-active > a { + color: #333; +} + +/* Alignment modifier + ========================================================================== */ +.uk-nav-center { + text-align: center; +} + +/* Sublists */ +.uk-nav-center .uk-nav-sub, +.uk-nav-center .uk-nav-sub ul { + padding-left: 0; +} + +/* Parent icon modifier */ +.uk-nav-center.uk-nav-parent-icon > .uk-parent > a::after { + position: absolute; +} + +/* ======================================================================== + Component: Navbar + ========================================================================== */ +/* + * 1. Create position context to center navbar group + */ +.uk-navbar { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + /* 1 */ + position: relative; +} + +/* Container + ========================================================================== */ +.uk-navbar-container:not(.uk-navbar-transparent) { + background: #f8f8f8; +} + +/* + * Remove pseudo elements created by micro clearfix as precaution (if Container component is used) + */ +.uk-navbar-container > ::before, +.uk-navbar-container > ::after { + display: none !important; +} + +/* Groups + ========================================================================== */ +/* + * 1. Align navs and items vertically if they have a different height + * 2. Note: IE 11 requires an extra `div` which affects the center selector + */ +.uk-navbar-left, +.uk-navbar-right, +.uk-navbar-center, +.uk-navbar-center-left > *, +.uk-navbar-center-right > * { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + /* 1 */ + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +/* + * Horizontal alignment + * 1. Create position context for centered navbar with sub groups (left/right) + * 2. Needed for dropdowns because a new position context is created + * `z-index` must be smaller than off-canvas + * 3. Fix text wrapping if the centered section is larger than 50% of the navbar + * 4. Align sub groups for centered navbar + */ +.uk-navbar-right { + margin-left: auto; +} + +.uk-navbar-center:only-child { + margin-left: auto; + margin-right: auto; + /* 1 */ + position: relative; +} + +.uk-navbar-center:not(:only-child) { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + /* 2 */ + z-index: 990; +} + +/* 3 */ +.uk-navbar-center:not(:only-child) .uk-navbar-nav > li > a, +.uk-navbar-center:not(:only-child) .uk-navbar-item, +.uk-navbar-center:not(:only-child) .uk-navbar-toggle { + white-space: nowrap; +} + +/* 4 */ +.uk-navbar-center-left, +.uk-navbar-center-right { + position: absolute; + top: 0; +} + +.uk-navbar-center-left { + right: 100%; +} + +.uk-navbar-center-right { + left: 100%; +} + +[class*='uk-navbar-center-'] .uk-navbar-nav > li > a, +[class*='uk-navbar-center-'] .uk-navbar-item, +[class*='uk-navbar-center-'] .uk-navbar-toggle { + white-space: nowrap; +} + +/* Nav + ========================================================================== */ +/* + * 1. Reset list + */ +.uk-navbar-nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + /* 1 */ + margin: 0; + padding: 0; + list-style: none; +} + +/* + * Allow items to wrap into the next line + * Only not `absolute` positioned groups + */ +.uk-navbar-left, +.uk-navbar-right, +.uk-navbar-center:only-child { + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +/* + * Items + * 1. Center content vertically and horizontally + * 2. Dimensions + * 3. Style + * 4. Required for `a` + */ +.uk-navbar-nav > li > a, +.uk-navbar-item, +.uk-navbar-toggle { + /* 1 */ + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + /* 2 */ + -webkit-box-sizing: border-box; + box-sizing: border-box; + min-height: 80px; + padding: 0 15px; + /* 3 */ + font-size: 0.875rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + text-decoration: none; +} + +/* + * Nav items + */ +.uk-navbar-nav > li > a { + color: #999; +} + +/* + * Hover + * Apply hover style also to focus state and if dropdown is opened + */ +.uk-navbar-nav > li:hover > a, +.uk-navbar-nav > li > a:focus, +.uk-navbar-nav > li > a.uk-open { + color: #666; + outline: none; +} + +/* OnClick */ +.uk-navbar-nav > li > a:active { + color: #333; +} + +/* Active */ +.uk-navbar-nav > li.uk-active > a { + color: #333; +} + +/* Item + ========================================================================== */ +.uk-navbar-item { + color: #666; +} + +/* Toggle + ========================================================================== */ +.uk-navbar-toggle { + color: #999; +} + +.uk-navbar-toggle:hover, +.uk-navbar-toggle:focus, +.uk-navbar-toggle.uk-open { + color: #666; + outline: none; + text-decoration: none; +} + +/* + * Icon + * Adopts `uk-icon` + */ +/* Hover + Focus */ +/* Subtitle + ========================================================================== */ +.uk-navbar-subtitle { + font-size: 0.875rem; +} + +/* Style modifiers + ========================================================================== */ +/* Dropdown + ========================================================================== */ +/* + * Adopts `uk-dropdown` + * 1. Hide by default + * 2. Set position + * 3. Set a default width + * 4. Style + */ +.uk-navbar-dropdown { + /* 1 */ + display: none; + /* 2 */ + position: absolute; + z-index: 1020; + /* 3 */ + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 200px; + /* 4 */ + padding: 25px; + background: #fff; + color: #666; +} + +/* Show */ +.uk-navbar-dropdown.uk-open { + display: block; +} + +/* + * Direction / Alignment modifiers + */ +/* Direction */ +[class*='uk-navbar-dropdown-top'] { + margin-top: -15px; +} + +[class*='uk-navbar-dropdown-bottom'] { + margin-top: 15px; +} + +[class*='uk-navbar-dropdown-left'] { + margin-left: -15px; +} + +[class*='uk-navbar-dropdown-right'] { + margin-left: 15px; +} + +/* + * Grid + * Adopts `uk-grid` + */ +/* Gutter Horizontal */ +.uk-navbar-dropdown-grid { + margin-left: -50px; +} + +.uk-navbar-dropdown-grid > * { + padding-left: 50px; +} + +/* Gutter Vertical */ +.uk-navbar-dropdown-grid > .uk-grid-margin { + margin-top: 50px; +} + +/* Stack */ +.uk-navbar-dropdown-stack .uk-navbar-dropdown-grid > * { + width: 100% !important; +} + +/* + * Width modifier + */ +.uk-navbar-dropdown-width-2:not(.uk-navbar-dropdown-stack) { + width: 400px; +} + +.uk-navbar-dropdown-width-3:not(.uk-navbar-dropdown-stack) { + width: 600px; +} + +.uk-navbar-dropdown-width-4:not(.uk-navbar-dropdown-stack) { + width: 800px; +} + +.uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) { + width: 1000px; +} + +/* + * Dropbar modifier + */ +.uk-navbar-dropdown-dropbar { + margin-top: 0; + margin-bottom: 0; +} + +/* Dropdown Nav + * Adopts `uk-nav` + ========================================================================== */ +/* + * Items + */ +.uk-navbar-dropdown-nav > li > a { + color: #999; +} + +/* Hover + Focus */ +.uk-navbar-dropdown-nav > li > a:hover, +.uk-navbar-dropdown-nav > li > a:focus { + color: #666; +} + +/* Active */ +.uk-navbar-dropdown-nav > li.uk-active > a { + color: #333; +} + +/* + * Header + */ +.uk-navbar-dropdown-nav .uk-nav-header { + color: #333; +} + +/* + * Divider + */ +.uk-navbar-dropdown-nav .uk-nav-divider { + border-top: 1px solid #e5e5e5; +} + +/* + * Sublists + */ +.uk-navbar-dropdown-nav .uk-nav-sub a { + color: #999; +} + +.uk-navbar-dropdown-nav .uk-nav-sub a:hover, +.uk-navbar-dropdown-nav .uk-nav-sub a:focus { + color: #666; +} + +.uk-navbar-dropdown-nav .uk-nav-sub li.uk-active > a { + color: #333; +} + +/* Dropbar + ========================================================================== */ +.uk-navbar-dropbar { + background: #fff; +} + +/* + * Slide modifier + */ +.uk-navbar-dropbar-slide { + position: absolute; + z-index: 980; + left: 0; + right: 0; +} + +/* ======================================================================== + Component: Subnav + ========================================================================== */ +/* + * 1. Allow items to wrap into the next line + * 2. Gutter + * 3. Reset list + */ +.uk-subnav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + /* 1 */ + -ms-flex-wrap: wrap; + flex-wrap: wrap; + /* 2 */ + margin-left: -20px; + /* 3 */ + padding: 0; + list-style: none; +} + +/* + * 1. Space is allocated solely based on content dimensions: 0 0 auto + * 2. Gutter + * 3. Create position context for dropdowns + */ +.uk-subnav > * { + /* 1 */ + -webkit-box-flex: 0; + -ms-flex: none; + flex: none; + /* 2 */ + padding-left: 20px; + /* 3 */ + position: relative; +} + +/* Items + ========================================================================== */ +/* + * Items must target `a` elements to exclude other elements (e.g. dropdowns) + * Using `:first-child` instead of `a` to support `span` elements for text + * 1. Prevent gap if child element is `inline-block`, e.g. an icon + * 2. Style + */ +.uk-subnav > * > :first-child { + /* 1 */ + display: block; + /* 2 */ + color: #999; +} + +/* Hover + Focus */ +.uk-subnav > * > a:hover, +.uk-subnav > * > a:focus { + color: #666; + text-decoration: none; + outline: none; +} + +/* Active */ +.uk-subnav > .uk-active > a { + color: #333; +} + +/* Divider modifier + ========================================================================== */ +/* + * 1. Align items and divider vertically + */ +.uk-subnav-divider > * { + /* 1 */ + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +/* + * Divider + * `nth-child` makes it also work without JS if it's only one row + */ +.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before { + content: ""; + height: 1.5em; + margin-left: 0px; + margin-right: 20px; + border-left: 1px solid #e5e5e5; +} + +/* Pill modifier + ========================================================================== */ +.uk-subnav-pill > * > :first-child { + padding: 5px 10px; + background: transparent; + color: #999; +} + +/* Hover + Focus */ +.uk-subnav-pill > * > a:hover, +.uk-subnav-pill > * > a:focus { + background-color: #f8f8f8; + color: #666; +} + +/* OnClick */ +.uk-subnav-pill > * > a:active { + background-color: #f8f8f8; + color: #666; +} + +/* Active */ +.uk-subnav-pill > .uk-active > a { + background-color: #1e87f0; + color: #fff; +} + +/* Disabled + * The same for all style modifiers + ========================================================================== */ +.uk-subnav > .uk-disabled > a { + color: #999; +} + +/* ======================================================================== + Component: Breadcrumb + ========================================================================== */ +/* + * 1. Allow items to wrap into the next line + * 2. Reset list + */ +.uk-breadcrumb { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + /* 1 */ + -ms-flex-wrap: wrap; + flex-wrap: wrap; + /* 2 */ + padding: 0; + list-style: none; +} + +/* + * Space is allocated solely based on content dimensions: 0 0 auto + */ +.uk-breadcrumb > * { + -webkit-box-flex: 0; + -ms-flex: none; + flex: none; +} + +/* Items + ========================================================================== */ +.uk-breadcrumb > * > * { + display: inline-block; + font-size: 0.875rem; + color: #999; +} + +/* Hover + Focus */ +.uk-breadcrumb > * > :hover, +.uk-breadcrumb > * > :focus { + color: #666; + text-decoration: none; +} + +/* Disabled */ +/* Active */ +.uk-breadcrumb > :last-child > * { + color: #666; +} + +/* + * Divider + * `nth-child` makes it also work without JS if it's only one row + */ +.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before { + content: "/"; + display: inline-block; + margin: 0 20px; + color: #999; +} + +/* ======================================================================== + Component: Pagination + ========================================================================== */ +/* + * 1. Allow items to wrap into the next line + * 2. Gutter + * 3. Reset list + */ +.uk-pagination { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + /* 1 */ + -ms-flex-wrap: wrap; + flex-wrap: wrap; + /* 2 */ + margin-left: -20px; + /* 3 */ + padding: 0; + list-style: none; +} + +/* + * 1. Space is allocated solely based on content dimensions: 0 0 auto + * 2. Gutter + * 3. Create position context for dropdowns + */ +.uk-pagination > * { + /* 1 */ + -webkit-box-flex: 0; + -ms-flex: none; + flex: none; + /* 2 */ + padding-left: 20px; + /* 3 */ + position: relative; +} + +/* Items + ========================================================================== */ +/* + * 1. Prevent gap if child element is `inline-block`, e.g. an icon + * 2. Style + */ +.uk-pagination > * > * { + /* 1 */ + display: block; + /* 2 */ + color: #999; +} + +/* Hover + Focus */ +.uk-pagination > * > :hover, +.uk-pagination > * > :focus { + color: #666; + text-decoration: none; +} + +/* Active */ +.uk-pagination > .uk-active > * { + color: #666; +} + +/* Disabled */ +.uk-pagination > .uk-disabled > * { + color: #999; +} + +/* ======================================================================== + Component: Tab + ========================================================================== */ +/* + * 1. Allow items to wrap into the next line + * 2. Gutter + * 3. Reset list + */ +.uk-tab { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + /* 1 */ + -ms-flex-wrap: wrap; + flex-wrap: wrap; + /* 2 */ + margin-left: -20px; + /* 3 */ + padding: 0; + list-style: none; +} + +/* + * 1. Space is allocated solely based on content dimensions: 0 0 auto + * 2. Gutter + * 3. Create position context for dropdowns + */ +.uk-tab > * { + /* 1 */ + -webkit-box-flex: 0; + -ms-flex: none; + flex: none; + /* 2 */ + padding-left: 20px; + /* 3 */ + position: relative; +} + +/* Items + ========================================================================== */ +/* + * Items must target `a` elements to exclude other elements (e.g. dropdowns) + * 1. Center text if a width is set + * 2. Style + */ +.uk-tab > * > a { + /* 1 */ + display: block; + text-align: center; + /* 2 */ + padding: 5px 10px; + color: #999; +} + +/* Hover + Focus */ +.uk-tab > * > a:hover, +.uk-tab > * > a:focus { + color: #666; + text-decoration: none; +} + +/* Active */ +.uk-tab > .uk-active > a { + color: #333; +} + +/* Disabled */ +.uk-tab > .uk-disabled > a { + color: #999; +} + +/* Position modifier + ========================================================================== */ +/* + * Bottom + */ +/* + * Left + Right + * 1. Reset Gutter + */ +.uk-tab-left, +.uk-tab-right { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + /* 1 */ + margin-left: 0; +} + +/* 1 */ +.uk-tab-left > *, +.uk-tab-right > * { + padding-left: 0; +} + +.uk-tab-left > * > a { + text-align: left; +} + +.uk-tab-right > * > a { + text-align: left; +} + +/* ======================================================================== + Component: Slidenav + ========================================================================== */ +/* + * Adopts `uk-icon` + */ +.uk-slidenav { + padding: 5px 10px; + color: rgba(102, 102, 102, 0.5); +} + +/* Hover + Focus */ +.uk-slidenav:hover, +.uk-slidenav:focus { + color: rgba(102, 102, 102, 0.9); + outline: none; +} + +/* OnClick */ +.uk-slidenav:active { + color: rgba(102, 102, 102, 0.5); +} + +/* Icon modifier + ========================================================================== */ +/* + * Previous + */ +/* + * Next + */ +/* Size modifier + ========================================================================== */ +.uk-slidenav-large { + padding: 10px 10px; +} + +/* Container + ========================================================================== */ +.uk-slidenav-container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +/* ======================================================================== + Component: Dotnav + ========================================================================== */ +/* + * 1. Allow items to wrap into the next line + * 2. Reset list + * 3. Gutter + */ +.uk-dotnav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + /* 1 */ + -ms-flex-wrap: wrap; + flex-wrap: wrap; + /* 2 */ + margin: 0; + padding: 0; + list-style: none; + /* 3 */ + margin-left: -12px; +} + +/* + * 1. Space is allocated solely based on content dimensions: 0 0 auto + * 2. Gutter + */ +.uk-dotnav > * { + /* 1 */ + -webkit-box-flex: 0; + -ms-flex: none; + flex: none; + /* 2 */ + padding-left: 12px; +} + +/* Items + ========================================================================== */ +/* + * Items + * 1. Hide text if present + */ +.uk-dotnav > * > * { + display: block; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 10px; + height: 10px; + border-radius: 50%; + background: transparent; + /* 1 */ + text-indent: 100%; + overflow: hidden; + white-space: nowrap; +} + +/* Hover + Focus */ +.uk-dotnav > * > :hover, +.uk-dotnav > * > :focus { + background-color: rgba(102, 102, 102, 0.6); + outline: none; +} + +/* OnClick */ +.uk-dotnav > * > :active { + background-color: rgba(102, 102, 102, 0.2); +} + +/* Active */ +.uk-dotnav > .uk-active > * { + background-color: rgba(102, 102, 102, 0.6); +} + +/* Modifier: 'uk-dotnav-vertical' + ========================================================================== */ +/* + * 1. Change direction + * 2. Gutter + */ +.uk-dotnav-vertical { + /* 1 */ + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + /* 2 */ + margin-left: 0; + margin-top: -12px; +} + +/* 2 */ +.uk-dotnav-vertical > * { + padding-left: 0; + padding-top: 12px; +} + +/* ======================================================================== + Component: Thumbnav + ========================================================================== */ +/* + * 1. Allow items to wrap into the next line + * 2. Reset list + * 3. Gutter + */ +.uk-thumbnav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + /* 1 */ + -ms-flex-wrap: wrap; + flex-wrap: wrap; + /* 2 */ + margin: 0; + padding: 0; + list-style: none; + /* 3 */ + margin-left: -15px; +} + +/* + * Space is allocated based on content dimensions, but shrinks: 0 1 auto + * 1. Gutter + */ +.uk-thumbnav > * { + /* 1 */ + padding-left: 15px; +} + +/* Items + ========================================================================== */ +/* + * Items + */ +.uk-thumbnav > * > * { + display: inline-block; +} + +/* Hover + Focus */ +.uk-thumbnav > * > :hover, +.uk-thumbnav > * > :focus { + outline: none; +} + +/* Active */ +/* Modifier: 'uk-thumbnav-vertical' + ========================================================================== */ +/* + * 1. Change direction + * 2. Gutter + */ +.uk-thumbnav-vertical { + /* 1 */ + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + /* 2 */ + margin-left: 0; + margin-top: -15px; +} + +/* 2 */ +.uk-thumbnav-vertical > * { + padding-left: 0; + padding-top: 15px; +} + +/* ======================================================================== + Component: Accordion + ========================================================================== */ +.uk-accordion { + padding: 0; + list-style: none; +} + +/* Item + ========================================================================== */ +.uk-accordion > :nth-child(n+2) { + margin-top: 20px; +} + +/* Title + ========================================================================== */ +.uk-accordion-title { + display: block; + font-size: 1.25rem; + line-height: 1.4; + color: #333; +} + +/* Hover + Focus */ +.uk-accordion-title:hover, +.uk-accordion-title:focus { + color: #666; + text-decoration: none; + outline: none; +} + +/* Content + ========================================================================== */ +.uk-accordion-content { + margin-top: 20px; +} + +/* + * Micro clearfix + */ +.uk-accordion-content::before, +.uk-accordion-content::after { + content: ""; + display: table; +} + +.uk-accordion-content::after { + clear: both; +} + +/* + * Remove margin from the last-child + */ +.uk-accordion-content > :last-child { + margin-bottom: 0; +} + +/* ======================================================================== + Component: Drop + ========================================================================== */ +/* + * 1. Hide by default + * 2. Set position + * 3. Set a default width + */ +.uk-drop { + /* 1 */ + display: none; + /* 2 */ + position: absolute; + z-index: 1020; + /* 3 */ + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 300px; +} + +/* Show */ +.uk-drop.uk-open { + display: block; +} + +/* Direction / Alignment modifiers + ========================================================================== */ +/* Direction */ +[class*='uk-drop-top'] { + margin-top: -20px; +} + +[class*='uk-drop-bottom'] { + margin-top: 20px; +} + +[class*='uk-drop-left'] { + margin-left: -20px; +} + +[class*='uk-drop-right'] { + margin-left: 20px; +} + +/* Grid modifiers + ========================================================================== */ +.uk-drop-stack .uk-drop-grid > * { + width: 100% !important; +} + +/* ======================================================================== + Component: Dropdown + ========================================================================== */ +/* + * 1. Hide by default + * 2. Set position + * 3. Set a default width + * 4. Style + */ +.uk-dropdown { + /* 1 */ + display: none; + /* 2 */ + position: absolute; + z-index: 1020; + /* 3 */ + -webkit-box-sizing: border-box; + box-sizing: border-box; + min-width: 200px; + /* 4 */ + padding: 25px; + background: #fff; + color: #666; +} + +/* Show */ +.uk-dropdown.uk-open { + display: block; +} + +/* Nav + * Adopts `uk-nav` + ========================================================================== */ +.uk-dropdown-nav { + white-space: nowrap; +} + +/* + * Items + */ +.uk-dropdown-nav > li > a { + color: #999; +} + +/* Hover + Focus + Active */ +.uk-dropdown-nav > li > a:hover, +.uk-dropdown-nav > li > a:focus, +.uk-dropdown-nav > li.uk-active > a { + color: #666; +} + +/* + * Header + */ +.uk-dropdown-nav .uk-nav-header { + color: #333; +} + +/* + * Divider + */ +.uk-dropdown-nav .uk-nav-divider { + border-top: 1px solid #e5e5e5; +} + +/* + * Sublists + */ +.uk-dropdown-nav .uk-nav-sub a { + color: #999; +} + +.uk-dropdown-nav .uk-nav-sub a:hover, +.uk-dropdown-nav .uk-nav-sub a:focus, +.uk-dropdown-nav .uk-nav-sub li.uk-active > a { + color: #666; +} + +/* Direction / Alignment modifiers + ========================================================================== */ +/* Direction */ +[class*='uk-dropdown-top'] { + margin-top: -10px; +} + +[class*='uk-dropdown-bottom'] { + margin-top: 10px; +} + +[class*='uk-dropdown-left'] { + margin-left: -10px; +} + +[class*='uk-dropdown-right'] { + margin-left: 10px; +} + +/* Grid modifiers + ========================================================================== */ +.uk-dropdown-stack .uk-dropdown-grid > * { + width: 100% !important; +} + +/* ======================================================================== + Component: Modal + ========================================================================== */ +/* + * 1. Hide by default + * 2. Set position + * 3. Allow scrolling for the modal dialog + * 4. Horizontal padding + * 5. Mask the background page + * 6. Fade-in transition + */ +.uk-modal { + /* 1 */ + display: none; + /* 2 */ + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1010; + /* 3 */ + overflow-y: auto; + -webkit-overflow-scrolling: touch; + /* 4 */ + padding: 15px 15px; + /* 5 */ + background: rgba(0, 0, 0, 0.6); + /* 6 */ + opacity: 0; + -webkit-transition: opacity 0.15s linear; + transition: opacity 0.15s linear; +} + +/* Phone landscape and bigger */ +@media (min-width: 640px) { + .uk-modal { + padding: 50px 30px; + } +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-modal { + padding-left: 40px; + padding-right: 40px; + } +} + +/* + * Open + */ +.uk-modal.uk-open { + opacity: 1; +} + +/* Page + ========================================================================== */ +/* + * Prevent scrollbars + */ +.uk-modal-page { + overflow: hidden; +} + +/* Dialog + ========================================================================== */ +/* + * 1. Create position context for spinner and close button + * 2. Dimensions + * 3. Fix `max-width: 100%` not working in combination with flex and responsive images in IE11 + * `!important` needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests + * 4. Style + * 5. Slide-in transition + */ +.uk-modal-dialog { + /* 1 */ + position: relative; + /* 2 */ + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0 auto; + width: 600px; + /* 3 */ + max-width: calc(100% - 0.01px) !important; + /* 4 */ + background: #fff; + /* 5 */ + opacity: 0; + -webkit-transform: translateY(-100px); + transform: translateY(-100px); + -webkit-transition: 0.3s linear; + transition: 0.3s linear; + -webkit-transition-property: opacity, -webkit-transform; + transition-property: opacity, -webkit-transform; + transition-property: opacity, transform; + transition-property: opacity, transform, -webkit-transform; +} + +/* + * Open + */ +.uk-open > .uk-modal-dialog { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); +} + +/* Size modifier + ========================================================================== */ +/* + * Container size + * Take the same size as the Container component + */ +.uk-modal-container .uk-modal-dialog { + width: 1200px; +} + +/* + * Full size + * 1. Remove padding and background from modal + * 2. Reset all default declarations from modal dialog + */ +/* 1 */ +.uk-modal-full { + padding: 0; + background: none; +} + +/* 2 */ +.uk-modal-full .uk-modal-dialog { + margin: 0; + width: 100%; + max-width: 100%; + -webkit-transform: translateY(0); + transform: translateY(0); +} + +/* Sections + ========================================================================== */ +.uk-modal-body { + padding: 30px 30px; +} + +.uk-modal-header { + padding: 15px 30px; + background: #fff; +} + +.uk-modal-footer { + padding: 15px 30px; + background: #fff; +} + +/* + * Micro clearfix + */ +.uk-modal-body::before, +.uk-modal-body::after, +.uk-modal-header::before, +.uk-modal-header::after, +.uk-modal-footer::before, +.uk-modal-footer::after { + content: ""; + display: table; +} + +.uk-modal-body::after, +.uk-modal-header::after, +.uk-modal-footer::after { + clear: both; +} + +/* + * Remove margin from the last-child + */ +.uk-modal-body > :last-child, +.uk-modal-header > :last-child, +.uk-modal-footer > :last-child { + margin-bottom: 0; +} + +/* Title + ========================================================================== */ +.uk-modal-title { + font-size: 2rem; + line-height: 1.3; +} + +/* Close + * Adopts `uk-close` + ========================================================================== */ +[class*='uk-modal-close-'] { + position: absolute; + z-index: 1010; + top: 10px; + right: 10px; + padding: 5px; +} + +/* + * Remove margin from adjacent element + */ +[class*='uk-modal-close-']:first-child + * { + margin-top: 0; +} + +/* + * Hover + */ +/* + * Default + */ +/* + * Outside + * 1. Prevent scrollbar on small devices + */ +.uk-modal-close-outside { + top: 0; + /* 1 */ + right: -5px; + -webkit-transform: translate(0, -100%); + transform: translate(0, -100%); + color: white; +} + +.uk-modal-close-outside:hover { + color: #fff; +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + /* 1 */ + .uk-modal-close-outside { + right: 0; + -webkit-transform: translate(100%, -100%); + transform: translate(100%, -100%); + } +} + +/* + * Full + */ +/* ======================================================================== + Component: Lightbox + ========================================================================== */ +/* + * 1. Hide by default + * 2. Set position + * 3. Allow scrolling for the modal dialog + * 4. Horizontal padding + * 5. Mask the background page + * 6. Fade-in transition + */ +.uk-lightbox { + /* 1 */ + display: none; + /* 2 */ + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1010; + /* 5 */ + background: #000; + /* 6 */ + opacity: 0; + -webkit-transition: opacity 0.15s linear; + transition: opacity 0.15s linear; +} + +/* + * Open + * 1. Center child + * 2. Fade-in + */ +.uk-lightbox.uk-open { + display: block; + /* 2 */ + opacity: 1; +} + +/* Page + ========================================================================== */ +/* + * Prevent scrollbars + */ +.uk-lightbox-page { + overflow: hidden; +} + +/* Item + ========================================================================== */ +/* + * 1. Center child within the viewport + * 2. Not visible by default + * 3. Color needed for spinner icon + * 4. Optimize animation + * 5. Responsiveness + * Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera + * Using `vh` and `vw` to make responsive image work in IE11 + * 6. Suppress outline on focus + */ +.uk-lightbox-items > * { + /* 1 */ + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + /* 2 */ + display: none; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + /* 3 */ + color: rgba(255, 255, 255, 0.7); + /* 4 */ + will-change: transform, opacity; +} + +/* 5 */ +.uk-lightbox-items > * > * { + max-width: 100vw; + max-height: 100vh; +} + +/* 6 */ +.uk-slideshow-items > :focus { + outline: none; +} + +.uk-lightbox-items > * > :not(iframe) { + width: auto; + height: auto; +} + +.uk-lightbox-items > .uk-active { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +/* Toolbar + ========================================================================== */ +.uk-lightbox-toolbar { + padding: 10px 10px; + background: rgba(0, 0, 0, 0.3); + color: rgba(255, 255, 255, 0.7); +} + +.uk-lightbox-toolbar > * { + color: rgba(255, 255, 255, 0.7); +} + +/* Toolbar Icon (Close) + ========================================================================== */ +.uk-lightbox-toolbar-icon { + padding: 5px; + color: rgba(255, 255, 255, 0.7); +} + +/* + * Hover + */ +.uk-lightbox-toolbar-icon:hover { + color: #fff; +} + +/* Button (Slidenav) + ========================================================================== */ +/* + * 1. Center icon vertically and horizontally + */ +.uk-lightbox-button { + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 50px; + height: 50px; + background: rgba(0, 0, 0, 0.3); + color: rgba(255, 255, 255, 0.7); + /* 1 */ + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +/* + * Hover + */ +.uk-lightbox-button:hover { + color: #fff; +} + +/* Caption + ========================================================================== */ +/* Iframe + ========================================================================== */ +.uk-lightbox-iframe { + width: 80%; + height: 80%; +} + +/* ======================================================================== + Component: Slideshow + ========================================================================== */ +/* + * 1. Prevent tab highlighting on iOS. + */ +.uk-slideshow { + /* 1 */ + -webkit-tap-highlight-color: transparent; +} + +/* Items + ========================================================================== */ +/* + * 1. Create position and stacking context + * 2. Reset list + * 3. Clip child elements + * 4. Prevent displaying the callout information on iOS. + */ +.uk-slideshow-items { + /* 1 */ + position: relative; + z-index: 0; + /* 2 */ + margin: 0; + padding: 0; + list-style: none; + /* 3 */ + overflow: hidden; + /* 4 */ + -webkit-touch-callout: none; +} + +/* Item + ========================================================================== */ +/* + * 1. Position items above each other + * 2. Take the full width + * 3. Clip child elements, e.g. for `uk-cover` + * 4. Optimize animation + * 5. Disable horizontal panning gestures in IE11 and Edge + * 6. Suppress outline on focus + */ +.uk-slideshow-items > * { + /* 1 */ + position: absolute; + top: 0; + left: 0; + /* 2 */ + right: 0; + bottom: 0; + /* 3 */ + overflow: hidden; + /* 4 */ + will-change: transform, opacity; + /* 5 */ + -ms-touch-action: pan-y; + touch-action: pan-y; +} + +/* 6 */ +.uk-slideshow-items > :focus { + outline: none; +} + +/* + * Hide not active items + */ +.uk-slideshow-items > :not(.uk-active) { + display: none; +} + +/* ======================================================================== + Component: Slider + ========================================================================== */ +/* + * 1. Prevent tab highlighting on iOS. + */ +.uk-slider { + /* 1 */ + -webkit-tap-highlight-color: transparent; +} + +/* Container + ========================================================================== */ +/* + * 1. Clip child elements + */ +.uk-slider-container { + /* 1 */ + overflow: hidden; +} + +/* Items + ========================================================================== */ +/* + * 1. Optimize animation + * 2. Create a containing block. In Safari it's neither created by `transform` nor `will-change`. + */ +.uk-slider-items { + /* 1 */ + will-change: transform; + /* 2 */ + position: relative; +} + +/* + * 1. Reset list style without interfering with grid + * 2. Prevent displaying the callout information on iOS. + */ +.uk-slider-items:not(.uk-grid) { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + /* 1 */ + margin: 0; + padding: 0; + list-style: none; + /* 2 */ + -webkit-touch-callout: none; +} + +.uk-slider-items.uk-grid { + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; +} + +/* Item + ========================================================================== */ +/* + * 1. Let items take content dimensions (0 0 auto) + * 2. Create position context + * 3. Disable horizontal panning gestures in IE11 and Edge + * 4. Suppress outline on focus + */ +.uk-slider-items > * { + /* 1 */ + -webkit-box-flex: 0; + -ms-flex: none; + flex: none; + /* 2 */ + position: relative; + /* 3 */ + -ms-touch-action: pan-y; + touch-action: pan-y; +} + +/* 4 */ +.uk-slider-items > :focus { + outline: none; +} + +/* ======================================================================== + Component: Sticky + ========================================================================== */ +/* + * 1. Resolve frame rate issues on devices with lower frame rates by forcing hardware acceleration + */ +.uk-sticky-fixed { + z-index: 980; + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0 !important; + /* 1 */ + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +/* + * Faster animations + */ +.uk-sticky[class*='uk-animation-'] { + -webkit-animation-duration: 0.2s; + animation-duration: 0.2s; +} + +.uk-sticky.uk-animation-reverse { + -webkit-animation-duration: 0.2s; + animation-duration: 0.2s; +} + +/* ======================================================================== + Component: Off-canvas + ========================================================================== */ +/* + * 1. Hide by default + * 2. Set position + */ +.uk-offcanvas { + /* 1 */ + display: none; + /* 2 */ + position: fixed; + top: 0; + bottom: 0; + left: 0; + z-index: 1000; +} + +/* + * Flip modifier + */ +.uk-offcanvas-flip .uk-offcanvas { + right: 0; + left: auto; +} + +/* Bar + ========================================================================== */ +/* + * 1. Set position + * 2. Size and style + * 3. Allow scrolling + */ +.uk-offcanvas-bar { + /* 1 */ + position: absolute; + top: 0; + bottom: 0; + left: -270px; + /* 2 */ + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 270px; + padding: 20px 20px; + background: #222; + /* 3 */ + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-offcanvas-bar { + left: -350px; + width: 350px; + padding: 40px 40px; + } +} + +/* Flip modifier */ +.uk-offcanvas-flip .uk-offcanvas-bar { + left: auto; + right: -270px; +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-offcanvas-flip .uk-offcanvas-bar { + right: -350px; + } +} + +/* + * Open + */ +.uk-open > .uk-offcanvas-bar { + left: 0; +} + +.uk-offcanvas-flip .uk-open > .uk-offcanvas-bar { + left: auto; + right: 0; +} + +/* + * Slide Animation (Used in slide and push mode) + */ +.uk-offcanvas-bar-animation { + -webkit-transition: left 0.3s ease-out; + transition: left 0.3s ease-out; +} + +.uk-offcanvas-flip .uk-offcanvas-bar-animation { + -webkit-transition-property: right; + transition-property: right; +} + +/* + * Reveal Animation + * 1. Set position + * 2. Clip the bar + * 3. Animation + * 4. Reset position + */ +.uk-offcanvas-reveal { + /* 1 */ + position: absolute; + top: 0; + bottom: 0; + left: 0; + /* 2 */ + width: 0; + overflow: hidden; + /* 3 */ + -webkit-transition: width 0.3s ease-out; + transition: width 0.3s ease-out; +} + +.uk-offcanvas-reveal .uk-offcanvas-bar { + /* 4 */ + left: 0; +} + +.uk-offcanvas-flip .uk-offcanvas-reveal .uk-offcanvas-bar { + /* 4 */ + left: auto; + right: 0; +} + +.uk-open > .uk-offcanvas-reveal { + width: 270px; +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-open > .uk-offcanvas-reveal { + width: 350px; + } +} + +/* + * Flip modifier + */ +.uk-offcanvas-flip .uk-offcanvas-reveal { + right: 0; + left: auto; +} + +/* Close + * Adopts `uk-close` + ========================================================================== */ +.uk-offcanvas-close { + position: absolute; + z-index: 1000; + top: 20px; + right: 20px; + padding: 5px; +} + +/* Overlay + ========================================================================== */ +/* + * Overlay the whole page. Needed for the `::before` + * 1. Using `100vw` so no modification is needed when off-canvas is flipped + * 2. Allow for closing with swipe gesture on devices with pointer events. + */ +.uk-offcanvas-overlay { + /* 1 */ + width: 100vw; + /* 2 */ + -ms-touch-action: none; + touch-action: none; +} + +/* + * 1. Mask the whole page + * 2. Fade-in transition + */ +.uk-offcanvas-overlay::before { + /* 1 */ + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.1); + /* 2 */ + opacity: 0; + -webkit-transition: opacity 0.15s linear; + transition: opacity 0.15s linear; +} + +.uk-offcanvas-overlay.uk-open::before { + opacity: 1; +} + +/* Prevent scrolling + ========================================================================== */ +/* + * Prevent horizontal scrollbar when the content is slide-out + * Has to be on the `html` element too to make it work on the `body` + */ +.uk-offcanvas-page, +.uk-offcanvas-container { + overflow-x: hidden; +} + +/* Container + ========================================================================== */ +/* + * Prepare slide-out animation (Used in reveal and push mode) + * Using `position: left` instead of `transform` because position `fixed` elements like sticky navbars + * lose their fixed state and behaves like `absolute` within a transformed container + * 1. Provide a fixed width and prevent shrinking + */ +.uk-offcanvas-container { + position: relative; + left: 0; + -webkit-transition: left 0.3s ease-out; + transition: left 0.3s ease-out; + /* 1 */ + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; +} + +/* + * Activate slide-out animation + */ +:not(.uk-offcanvas-flip).uk-offcanvas-container-animation { + left: 270px; +} + +.uk-offcanvas-flip.uk-offcanvas-container-animation { + left: -270px; +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + :not(.uk-offcanvas-flip).uk-offcanvas-container-animation { + left: 350px; + } + .uk-offcanvas-flip.uk-offcanvas-container-animation { + left: -350px; + } +} + +/* ======================================================================== + Component: Switcher + ========================================================================== */ +/* + * Reset list + */ +.uk-switcher { + margin: 0; + padding: 0; + list-style: none; +} + +/* Items + ========================================================================== */ +/* + * Hide not active items + */ +.uk-switcher > :not(.uk-active) { + display: none; +} + +/* + * Remove margin from the last-child + */ +.uk-switcher > * > :last-child { + margin-bottom: 0; +} + +/* ======================================================================== + Component: Leader + ========================================================================== */ +.uk-leader { + overflow: hidden; +} + +/* + * 1. Place element in text flow + * 2. Never break into a new line + * 3. Get a string back with as many repeating characters to fill the container + * 4. Prevent wrapping. Overflowing characters will be clipped by the container + */ +.uk-leader-fill::after { + /* 1 */ + display: inline-block; + margin-left: 15px; + /* 2 */ + width: 0; + /* 3 */ + content: attr(data-fill); + /* 4 */ + white-space: nowrap; +} + +/* + * Hide if media does not match + */ +.uk-leader-fill.uk-leader-hide::after { + display: none; +} + +/* + * Pass fill character to JS + */ +.uk-leader-fill-content::before { + content: "."; +} + +:root { + --uk-leader-fill-content: .; +} + +/* ======================================================================== + Component: Iconnav + ========================================================================== */ +/* + * 1. Allow items to wrap into the next line + * 2. Reset list + * 3. Gutter + */ +.uk-iconnav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + /* 1 */ + -ms-flex-wrap: wrap; + flex-wrap: wrap; + /* 2 */ + margin: 0; + padding: 0; + list-style: none; + /* 3 */ + margin-left: -10px; +} + +/* + * Space is allocated based on content dimensions, but shrinks: 0 1 auto + * 1. Gutter + */ +.uk-iconnav > * { + /* 1 */ + padding-left: 10px; +} + +/* Items + ========================================================================== */ +/* + * Items must target `a` elements to exclude other elements (e.g. dropdowns) + * 1. Prevent gap if child element is `inline-block`, e.g. an icon + * 2. Style + */ +.uk-iconnav > * > a { + /* 1 */ + display: block; + /* 2 */ + color: #999; +} + +/* Hover + Focus */ +.uk-iconnav > * > a:hover, +.uk-iconnav > * > a:focus { + color: #666; + outline: none; +} + +/* Active */ +.uk-iconnav > .uk-active > a { + color: #666; +} + +/* Modifier: 'uk-iconnav-vertical' + ========================================================================== */ +/* + * 1. Change direction + * 2. Gutter + */ +.uk-iconnav-vertical { + /* 1 */ + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + /* 2 */ + margin-left: 0; + margin-top: -10px; +} + +/* 2 */ +.uk-iconnav-vertical > * { + padding-left: 0; + padding-top: 10px; +} + +/* ======================================================================== + Component: Notification + ========================================================================== */ +/* + * 1. Set position + * 2. Dimensions + */ +.uk-notification { + /* 1 */ + position: fixed; + top: 10px; + left: 10px; + z-index: 1040; + /* 2 */ + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 350px; +} + +/* Position modifiers +========================================================================== */ +.uk-notification-top-right, +.uk-notification-bottom-right { + left: auto; + right: 10px; +} + +.uk-notification-top-center, +.uk-notification-bottom-center { + left: 50%; + margin-left: -175px; +} + +.uk-notification-bottom-left, +.uk-notification-bottom-right, +.uk-notification-bottom-center { + top: auto; + bottom: 10px; +} + +/* Responsiveness +========================================================================== */ +/* Phones portrait and smaller */ +@media (max-width: 639px) { + .uk-notification { + left: 10px; + right: 10px; + width: auto; + margin: 0; + } +} + +/* Message +========================================================================== */ +.uk-notification-message { + position: relative; + padding: 15px; + background: #f8f8f8; + color: #666; + font-size: 1.25rem; + line-height: 1.4; + cursor: pointer; +} + +* + .uk-notification-message { + margin-top: 10px; +} + +/* Close + * Adopts `uk-close` + ========================================================================== */ +.uk-notification-close { + display: none; + position: absolute; + top: 20px; + right: 15px; +} + +.uk-notification-message:hover .uk-notification-close { + display: block; +} + +/* Style modifiers + ========================================================================== */ +/* + * Primary + */ +.uk-notification-message-primary { + color: #1e87f0; +} + +/* + * Success + */ +.uk-notification-message-success { + color: #32d296; +} + +/* + * Warning + */ +.uk-notification-message-warning { + color: #faa05a; +} + +/* + * Danger + */ +.uk-notification-message-danger { + color: #f0506e; +} + +/* ======================================================================== + Component: Tooltip + ========================================================================== */ +/* + * 1. Hide by default + * 2. Position + * 3. Dimensions + * 4. Style + */ +.uk-tooltip { + /* 1 */ + display: none; + /* 2 */ + position: absolute; + z-index: 1030; + /* 3 */ + -webkit-box-sizing: border-box; + box-sizing: border-box; + max-width: 200px; + padding: 3px 6px; + /* 4 */ + background: #666; + border-radius: 2px; + color: #fff; + font-size: 12px; +} + +/* Show */ +.uk-tooltip.uk-active { + display: block; +} + +/* Direction / Alignment modifiers + ========================================================================== */ +/* Direction */ +[class*='uk-tooltip-top'] { + margin-top: -10px; +} + +[class*='uk-tooltip-bottom'] { + margin-top: 10px; +} + +[class*='uk-tooltip-left'] { + margin-left: -10px; +} + +[class*='uk-tooltip-right'] { + margin-left: 10px; +} + +/* ======================================================================== + Component: Placeholder + ========================================================================== */ +.uk-placeholder { + margin-bottom: 20px; + padding: 30px 30px; + background: transparent; +} + +/* Add margin if adjacent element */ +* + .uk-placeholder { + margin-top: 20px; +} + +/* + * Remove margin from the last-child + */ +.uk-placeholder > :last-child { + margin-bottom: 0; +} + +/* ======================================================================== + Component: Progress + ========================================================================== */ +/* + * 1. Add the correct vertical alignment in Chrome, Firefox, and Opera. + * 2. Remove default style + * 3. Behave like a block element + * 4. Remove borders in Firefox and Edge + * 5. Set background color for progress container in Firefox, IE11 and Edge + * 6. Style + */ +.uk-progress { + /* 1 */ + vertical-align: baseline; + /* 2 */ + -webkit-appearance: none; + -moz-appearance: none; + /* 3 */ + display: block; + width: 100%; + /* 4 */ + border: 0; + /* 5 */ + background-color: #f8f8f8; + /* 6 */ + margin-bottom: 20px; + height: 15px; +} + +/* Add margin if adjacent element */ +* + .uk-progress { + margin-top: 20px; +} + +/* + * Remove animated circles for indeterminate state in IE11 and Edge + */ +.uk-progress:indeterminate { + color: transparent; +} + +/* + * Progress container + * 2. Remove progress bar for indeterminate state in Firefox + */ +.uk-progress::-webkit-progress-bar { + background-color: #f8f8f8; +} + +/* 2 */ +.uk-progress:indeterminate::-moz-progress-bar { + width: 0; +} + +/* + * Progress bar + * 1. Remove right border in IE11 and Edge + */ +.uk-progress::-webkit-progress-value { + background-color: #1e87f0; + -webkit-transition: width 0.6s ease; + transition: width 0.6s ease; +} + +.uk-progress::-moz-progress-bar { + background-color: #1e87f0; +} + +.uk-progress::-ms-fill { + background-color: #1e87f0; + -webkit-transition: width 0.6s ease; + transition: width 0.6s ease; + /* 1 */ + border: 0; +} + +/* ======================================================================== + Component: Sortable + ========================================================================== */ +.uk-sortable { + position: relative; +} + +/* + * Deactivate pointer-events on SVGs in Safari + */ +.uk-sortable svg { + pointer-events: none; +} + +/* + * Remove margin from the last-child + */ +.uk-sortable > :last-child { + margin-bottom: 0; +} + +/* Drag + ========================================================================== */ +.uk-sortable-drag { + position: absolute !important; + z-index: 1050 !important; + pointer-events: none; +} + +/* Placeholder + ========================================================================== */ +.uk-sortable-placeholder { + opacity: 0; +} + +/* Empty modifier + ========================================================================== */ +.uk-sortable-empty { + min-height: 50px; +} + +/* Handle + ========================================================================== */ +/* Hover */ +.uk-sortable-handle:hover { + cursor: move; +} + +/* ======================================================================== + Component: Countdown + ========================================================================== */ +/* Item + ========================================================================== */ +/* + * 1. Center numbers and separators vertically + */ +.uk-countdown-number, +.uk-countdown-separator { + /* 1 */ + line-height: 70px; +} + +/* Number + ========================================================================== */ +.uk-countdown-number { + font-size: 2rem; +} + +/* Phone landscape and bigger */ +@media (min-width: 640px) { + .uk-countdown-number { + font-size: 4rem; + } +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-countdown-number { + font-size: 6rem; + } +} + +/* Separator + ========================================================================== */ +.uk-countdown-separator { + font-size: 1rem; +} + +/* Phone landscape and bigger */ +@media (min-width: 640px) { + .uk-countdown-separator { + font-size: 2rem; + } +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-countdown-separator { + font-size: 3rem; + } +} + +/* Label + ========================================================================== */ +/* ======================================================================== + Component: Animation + ========================================================================== */ +[class*='uk-animation-'] { + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +/* Animations + ========================================================================== */ +/* + * Fade + */ +.uk-animation-fade { + -webkit-animation-name: uk-fade; + animation-name: uk-fade; + -webkit-animation-duration: 0.8s; + animation-duration: 0.8s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; +} + +/* + * Scale + */ +.uk-animation-scale-up { + -webkit-animation-name: uk-fade-scale-02; + animation-name: uk-fade-scale-02; +} + +.uk-animation-scale-down { + -webkit-animation-name: uk-fade-scale-18; + animation-name: uk-fade-scale-18; +} + +/* + * Slide + */ +.uk-animation-slide-top { + -webkit-animation-name: uk-fade-top; + animation-name: uk-fade-top; +} + +.uk-animation-slide-bottom { + -webkit-animation-name: uk-fade-bottom; + animation-name: uk-fade-bottom; +} + +.uk-animation-slide-left { + -webkit-animation-name: uk-fade-left; + animation-name: uk-fade-left; +} + +.uk-animation-slide-right { + -webkit-animation-name: uk-fade-right; + animation-name: uk-fade-right; +} + +/* + * Slide Small + */ +.uk-animation-slide-top-small { + -webkit-animation-name: uk-fade-top-small; + animation-name: uk-fade-top-small; +} + +.uk-animation-slide-bottom-small { + -webkit-animation-name: uk-fade-bottom-small; + animation-name: uk-fade-bottom-small; +} + +.uk-animation-slide-left-small { + -webkit-animation-name: uk-fade-left-small; + animation-name: uk-fade-left-small; +} + +.uk-animation-slide-right-small { + -webkit-animation-name: uk-fade-right-small; + animation-name: uk-fade-right-small; +} + +/* + * Slide Medium + */ +.uk-animation-slide-top-medium { + -webkit-animation-name: uk-fade-top-medium; + animation-name: uk-fade-top-medium; +} + +.uk-animation-slide-bottom-medium { + -webkit-animation-name: uk-fade-bottom-medium; + animation-name: uk-fade-bottom-medium; +} + +.uk-animation-slide-left-medium { + -webkit-animation-name: uk-fade-left-medium; + animation-name: uk-fade-left-medium; +} + +.uk-animation-slide-right-medium { + -webkit-animation-name: uk-fade-right-medium; + animation-name: uk-fade-right-medium; +} + +/* + * Kenburns + */ +.uk-animation-kenburns { + -webkit-animation-name: uk-scale-kenburns; + animation-name: uk-scale-kenburns; + -webkit-animation-duration: 15s; + animation-duration: 15s; +} + +/* + * Shake + */ +.uk-animation-shake { + -webkit-animation-name: uk-shake; + animation-name: uk-shake; +} + +/* + * SVG Stroke + * The `--uk-animation-stroke` custom property contains the longest path length. + * Set it manually or use `uk-svg="stroke-animation: true"` to set it automatically. + * All strokes are animated by the same pace and doesn't end simultaneously. + * To end simultaneously, `pathLength="1"` could be used, but it's not working in Safari yet. + */ +.uk-animation-stroke { + -webkit-animation-name: uk-stroke; + animation-name: uk-stroke; + stroke-dasharray: var(--uk-animation-stroke); + -webkit-animation-duration: 2s; + animation-duration: 2s; +} + +/* Direction modifier + ========================================================================== */ +.uk-animation-reverse { + animation-direction: reverse; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} + +/* Duration modifier + ========================================================================== */ +.uk-animation-fast { + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; +} + +/* Toggle (Hover + Focus) +========================================================================== */ +/* + * The toggle is triggered on touch devices using `:focus` and tabindex + */ +.uk-animation-toggle:not(:hover):not(:focus) [class*='uk-animation-'] { + -webkit-animation-name: none; + animation-name: none; +} + +/* + * 1. Prevent tab highlighting on iOS. + */ +.uk-animation-toggle { + /* 1 */ + -webkit-tap-highlight-color: transparent; +} + +/* + * Remove outline for `tabindex` + */ +.uk-animation-toggle:focus { + outline: none; +} + +/* Keyframes used by animation classes + ========================================================================== */ +/* + * Fade + */ +@-webkit-keyframes uk-fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes uk-fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +/* + * Slide Top + */ +@-webkit-keyframes uk-fade-top { + 0% { + opacity: 0; + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes uk-fade-top { + 0% { + opacity: 0; + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +/* + * Slide Bottom + */ +@-webkit-keyframes uk-fade-bottom { + 0% { + opacity: 0; + -webkit-transform: translateY(100%); + transform: translateY(100%); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes uk-fade-bottom { + 0% { + opacity: 0; + -webkit-transform: translateY(100%); + transform: translateY(100%); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +/* + * Slide Left + */ +@-webkit-keyframes uk-fade-left { + 0% { + opacity: 0; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes uk-fade-left { + 0% { + opacity: 0; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +/* + * Slide Right + */ +@-webkit-keyframes uk-fade-right { + 0% { + opacity: 0; + -webkit-transform: translateX(100%); + transform: translateX(100%); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes uk-fade-right { + 0% { + opacity: 0; + -webkit-transform: translateX(100%); + transform: translateX(100%); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +/* + * Slide Top Small + */ +@-webkit-keyframes uk-fade-top-small { + 0% { + opacity: 0; + -webkit-transform: translateY(-10px); + transform: translateY(-10px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes uk-fade-top-small { + 0% { + opacity: 0; + -webkit-transform: translateY(-10px); + transform: translateY(-10px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +/* + * Slide Bottom Small + */ +@-webkit-keyframes uk-fade-bottom-small { + 0% { + opacity: 0; + -webkit-transform: translateY(10px); + transform: translateY(10px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes uk-fade-bottom-small { + 0% { + opacity: 0; + -webkit-transform: translateY(10px); + transform: translateY(10px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +/* + * Slide Left Small + */ +@-webkit-keyframes uk-fade-left-small { + 0% { + opacity: 0; + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes uk-fade-left-small { + 0% { + opacity: 0; + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +/* + * Slide Right Small + */ +@-webkit-keyframes uk-fade-right-small { + 0% { + opacity: 0; + -webkit-transform: translateX(10px); + transform: translateX(10px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes uk-fade-right-small { + 0% { + opacity: 0; + -webkit-transform: translateX(10px); + transform: translateX(10px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +/* + * Slide Top Medium + */ +@-webkit-keyframes uk-fade-top-medium { + 0% { + opacity: 0; + -webkit-transform: translateY(-50px); + transform: translateY(-50px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes uk-fade-top-medium { + 0% { + opacity: 0; + -webkit-transform: translateY(-50px); + transform: translateY(-50px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +/* + * Slide Bottom Medium + */ +@-webkit-keyframes uk-fade-bottom-medium { + 0% { + opacity: 0; + -webkit-transform: translateY(50px); + transform: translateY(50px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes uk-fade-bottom-medium { + 0% { + opacity: 0; + -webkit-transform: translateY(50px); + transform: translateY(50px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +/* + * Slide Left Medium + */ +@-webkit-keyframes uk-fade-left-medium { + 0% { + opacity: 0; + -webkit-transform: translateX(-50px); + transform: translateX(-50px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes uk-fade-left-medium { + 0% { + opacity: 0; + -webkit-transform: translateX(-50px); + transform: translateX(-50px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +/* + * Slide Right Medium + */ +@-webkit-keyframes uk-fade-right-medium { + 0% { + opacity: 0; + -webkit-transform: translateX(50px); + transform: translateX(50px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes uk-fade-right-medium { + 0% { + opacity: 0; + -webkit-transform: translateX(50px); + transform: translateX(50px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +/* + * Scale Up + */ +@-webkit-keyframes uk-fade-scale-02 { + 0% { + opacity: 0; + -webkit-transform: scale(0.2); + transform: scale(0.2); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} +@keyframes uk-fade-scale-02 { + 0% { + opacity: 0; + -webkit-transform: scale(0.2); + transform: scale(0.2); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +/* + * Scale Down + */ +@-webkit-keyframes uk-fade-scale-18 { + 0% { + opacity: 0; + -webkit-transform: scale(1.8); + transform: scale(1.8); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} +@keyframes uk-fade-scale-18 { + 0% { + opacity: 0; + -webkit-transform: scale(1.8); + transform: scale(1.8); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +/* + * Kenburns + */ +@-webkit-keyframes uk-scale-kenburns { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + -webkit-transform: scale(1.2); + transform: scale(1.2); + } +} +@keyframes uk-scale-kenburns { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + -webkit-transform: scale(1.2); + transform: scale(1.2); + } +} + +/* + * Shake + */ +@-webkit-keyframes uk-shake { + 0%, 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 10% { + -webkit-transform: translateX(-9px); + transform: translateX(-9px); + } + 20% { + -webkit-transform: translateX(8px); + transform: translateX(8px); + } + 30% { + -webkit-transform: translateX(-7px); + transform: translateX(-7px); + } + 40% { + -webkit-transform: translateX(6px); + transform: translateX(6px); + } + 50% { + -webkit-transform: translateX(-5px); + transform: translateX(-5px); + } + 60% { + -webkit-transform: translateX(4px); + transform: translateX(4px); + } + 70% { + -webkit-transform: translateX(-3px); + transform: translateX(-3px); + } + 80% { + -webkit-transform: translateX(2px); + transform: translateX(2px); + } + 90% { + -webkit-transform: translateX(-1px); + transform: translateX(-1px); + } +} +@keyframes uk-shake { + 0%, 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 10% { + -webkit-transform: translateX(-9px); + transform: translateX(-9px); + } + 20% { + -webkit-transform: translateX(8px); + transform: translateX(8px); + } + 30% { + -webkit-transform: translateX(-7px); + transform: translateX(-7px); + } + 40% { + -webkit-transform: translateX(6px); + transform: translateX(6px); + } + 50% { + -webkit-transform: translateX(-5px); + transform: translateX(-5px); + } + 60% { + -webkit-transform: translateX(4px); + transform: translateX(4px); + } + 70% { + -webkit-transform: translateX(-3px); + transform: translateX(-3px); + } + 80% { + -webkit-transform: translateX(2px); + transform: translateX(2px); + } + 90% { + -webkit-transform: translateX(-1px); + transform: translateX(-1px); + } +} + +/* + * Stroke + */ +@-webkit-keyframes uk-stroke { + 0% { + stroke-dashoffset: var(--uk-animation-stroke); + } + 100% { + stroke-dashoffset: 0; + } +} +@keyframes uk-stroke { + 0% { + stroke-dashoffset: var(--uk-animation-stroke); + } + 100% { + stroke-dashoffset: 0; + } +} + +/* ======================================================================== + Component: Width + ========================================================================== */ +/* Equal child widths + ========================================================================== */ +[class*='uk-child-width'] > * { + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; +} + +.uk-child-width-1-2 > * { + width: 50%; +} + +.uk-child-width-1-3 > * { + width: calc(100% * 1 / 3.001); +} + +.uk-child-width-1-4 > * { + width: 25%; +} + +.uk-child-width-1-5 > * { + width: 20%; +} + +.uk-child-width-1-6 > * { + width: calc(100% * 1 / 6.001); +} + +.uk-child-width-auto > * { + width: auto; +} + +/* + * 1. Reset the `min-width`, which is set to auto by default, because + * flex items won't shrink below their minimum intrinsic content size. + * Using `1px` instead of `0`, so items still wrap into the next line, + * if they have zero width and padding and the predecessor is 100% wide. + */ +.uk-child-width-expand > :not([class*='uk-width']) { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + /* 1 */ + min-width: 1px; +} + +/* Phone landscape and bigger */ +@media (min-width: 640px) { + .uk-child-width-1-1\@s > * { + width: 100%; + } + .uk-child-width-1-2\@s > * { + width: 50%; + } + .uk-child-width-1-3\@s > * { + width: calc(100% * 1 / 3.001); + } + .uk-child-width-1-4\@s > * { + width: 25%; + } + .uk-child-width-1-5\@s > * { + width: 20%; + } + .uk-child-width-1-6\@s > * { + width: calc(100% * 1 / 6.001); + } + .uk-child-width-auto\@s > * { + width: auto; + } + .uk-child-width-expand\@s > :not([class*='uk-width']) { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + min-width: 1px; + } +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-child-width-1-1\@m > * { + width: 100%; + } + .uk-child-width-1-2\@m > * { + width: 50%; + } + .uk-child-width-1-3\@m > * { + width: calc(100% * 1 / 3.001); + } + .uk-child-width-1-4\@m > * { + width: 25%; + } + .uk-child-width-1-5\@m > * { + width: 20%; + } + .uk-child-width-1-6\@m > * { + width: calc(100% * 1 / 6.001); + } + .uk-child-width-auto\@m > * { + width: auto; + } + .uk-child-width-expand\@m > :not([class*='uk-width']) { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + min-width: 1px; + } +} + +/* Desktop and bigger */ +@media (min-width: 1200px) { + .uk-child-width-1-1\@l > * { + width: 100%; + } + .uk-child-width-1-2\@l > * { + width: 50%; + } + .uk-child-width-1-3\@l > * { + width: calc(100% * 1 / 3.001); + } + .uk-child-width-1-4\@l > * { + width: 25%; + } + .uk-child-width-1-5\@l > * { + width: 20%; + } + .uk-child-width-1-6\@l > * { + width: calc(100% * 1 / 6.001); + } + .uk-child-width-auto\@l > * { + width: auto; + } + .uk-child-width-expand\@l > :not([class*='uk-width']) { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + min-width: 1px; + } +} + +/* Large screen and bigger */ +@media (min-width: 1600px) { + .uk-child-width-1-1\@xl > * { + width: 100%; + } + .uk-child-width-1-2\@xl > * { + width: 50%; + } + .uk-child-width-1-3\@xl > * { + width: calc(100% * 1 / 3.001); + } + .uk-child-width-1-4\@xl > * { + width: 25%; + } + .uk-child-width-1-5\@xl > * { + width: 20%; + } + .uk-child-width-1-6\@xl > * { + width: calc(100% * 1 / 6.001); + } + .uk-child-width-auto\@xl > * { + width: auto; + } + .uk-child-width-expand\@xl > :not([class*='uk-width']) { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + min-width: 1px; + } +} + +/* Single Widths + ========================================================================== */ +/* + * 1. `max-width` is needed for the pixel-based classes + */ +[class*='uk-width'] { + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + /* 1 */ + max-width: 100%; +} + +/* Halves */ +.uk-width-1-2 { + width: 50%; +} + +/* Thirds */ +.uk-width-1-3 { + width: calc(100% * 1 / 3.001); +} + +.uk-width-2-3 { + width: calc(100% * 2 / 3.001); +} + +/* Quarters */ +.uk-width-1-4 { + width: 25%; +} + +.uk-width-3-4 { + width: 75%; +} + +/* Fifths */ +.uk-width-1-5 { + width: 20%; +} + +.uk-width-2-5 { + width: 40%; +} + +.uk-width-3-5 { + width: 60%; +} + +.uk-width-4-5 { + width: 80%; +} + +/* Sixths */ +.uk-width-1-6 { + width: calc(100% * 1 / 6.001); +} + +.uk-width-5-6 { + width: calc(100% * 5 / 6.001); +} + +/* Pixel */ +.uk-width-small { + width: 150px; +} + +.uk-width-medium { + width: 300px; +} + +.uk-width-large { + width: 450px; +} + +.uk-width-xlarge { + width: 600px; +} + +.uk-width-xxlarge { + width: 750px; +} + +/* Auto */ +.uk-width-auto { + width: auto; +} + +/* Expand */ +.uk-width-expand { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + min-width: 1px; +} + +/* Phone landscape and bigger */ +@media (min-width: 640px) { + /* Whole */ + .uk-width-1-1\@s { + width: 100%; + } + /* Halves */ + .uk-width-1-2\@s { + width: 50%; + } + /* Thirds */ + .uk-width-1-3\@s { + width: calc(100% * 1 / 3.001); + } + .uk-width-2-3\@s { + width: calc(100% * 2 / 3.001); + } + /* Quarters */ + .uk-width-1-4\@s { + width: 25%; + } + .uk-width-3-4\@s { + width: 75%; + } + /* Fifths */ + .uk-width-1-5\@s { + width: 20%; + } + .uk-width-2-5\@s { + width: 40%; + } + .uk-width-3-5\@s { + width: 60%; + } + .uk-width-4-5\@s { + width: 80%; + } + /* Sixths */ + .uk-width-1-6\@s { + width: calc(100% * 1 / 6.001); + } + .uk-width-5-6\@s { + width: calc(100% * 5 / 6.001); + } + /* Pixel */ + .uk-width-small\@s { + width: 150px; + } + .uk-width-medium\@s { + width: 300px; + } + .uk-width-large\@s { + width: 450px; + } + .uk-width-xlarge\@s { + width: 600px; + } + .uk-width-xxlarge\@s { + width: 750px; + } + /* Auto */ + .uk-width-auto\@s { + width: auto; + } + /* Expand */ + .uk-width-expand\@s { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + min-width: 1px; + } +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + /* Whole */ + .uk-width-1-1\@m { + width: 100%; + } + /* Halves */ + .uk-width-1-2\@m { + width: 50%; + } + /* Thirds */ + .uk-width-1-3\@m { + width: calc(100% * 1 / 3.001); + } + .uk-width-2-3\@m { + width: calc(100% * 2 / 3.001); + } + /* Quarters */ + .uk-width-1-4\@m { + width: 25%; + } + .uk-width-3-4\@m { + width: 75%; + } + /* Fifths */ + .uk-width-1-5\@m { + width: 20%; + } + .uk-width-2-5\@m { + width: 40%; + } + .uk-width-3-5\@m { + width: 60%; + } + .uk-width-4-5\@m { + width: 80%; + } + /* Sixths */ + .uk-width-1-6\@m { + width: calc(100% * 1 / 6.001); + } + .uk-width-5-6\@m { + width: calc(100% * 5 / 6.001); + } + /* Pixel */ + .uk-width-small\@m { + width: 150px; + } + .uk-width-medium\@m { + width: 300px; + } + .uk-width-large\@m { + width: 450px; + } + .uk-width-xlarge\@m { + width: 600px; + } + .uk-width-xxlarge\@m { + width: 750px; + } + /* Auto */ + .uk-width-auto\@m { + width: auto; + } + /* Expand */ + .uk-width-expand\@m { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + min-width: 1px; + } +} + +/* Desktop and bigger */ +@media (min-width: 1200px) { + /* Whole */ + .uk-width-1-1\@l { + width: 100%; + } + /* Halves */ + .uk-width-1-2\@l { + width: 50%; + } + /* Thirds */ + .uk-width-1-3\@l { + width: calc(100% * 1 / 3.001); + } + .uk-width-2-3\@l { + width: calc(100% * 2 / 3.001); + } + /* Quarters */ + .uk-width-1-4\@l { + width: 25%; + } + .uk-width-3-4\@l { + width: 75%; + } + /* Fifths */ + .uk-width-1-5\@l { + width: 20%; + } + .uk-width-2-5\@l { + width: 40%; + } + .uk-width-3-5\@l { + width: 60%; + } + .uk-width-4-5\@l { + width: 80%; + } + /* Sixths */ + .uk-width-1-6\@l { + width: calc(100% * 1 / 6.001); + } + .uk-width-5-6\@l { + width: calc(100% * 5 / 6.001); + } + /* Pixel */ + .uk-width-small\@l { + width: 150px; + } + .uk-width-medium\@l { + width: 300px; + } + .uk-width-large\@l { + width: 450px; + } + .uk-width-xlarge\@l { + width: 600px; + } + .uk-width-xxlarge\@l { + width: 750px; + } + /* Auto */ + .uk-width-auto\@l { + width: auto; + } + /* Expand */ + .uk-width-expand\@l { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + min-width: 1px; + } +} + +/* Large screen and bigger */ +@media (min-width: 1600px) { + /* Whole */ + .uk-width-1-1\@xl { + width: 100%; + } + /* Halves */ + .uk-width-1-2\@xl { + width: 50%; + } + /* Thirds */ + .uk-width-1-3\@xl { + width: calc(100% * 1 / 3.001); + } + .uk-width-2-3\@xl { + width: calc(100% * 2 / 3.001); + } + /* Quarters */ + .uk-width-1-4\@xl { + width: 25%; + } + .uk-width-3-4\@xl { + width: 75%; + } + /* Fifths */ + .uk-width-1-5\@xl { + width: 20%; + } + .uk-width-2-5\@xl { + width: 40%; + } + .uk-width-3-5\@xl { + width: 60%; + } + .uk-width-4-5\@xl { + width: 80%; + } + /* Sixths */ + .uk-width-1-6\@xl { + width: calc(100% * 1 / 6.001); + } + .uk-width-5-6\@xl { + width: calc(100% * 5 / 6.001); + } + /* Pixel */ + .uk-width-small\@xl { + width: 150px; + } + .uk-width-medium\@xl { + width: 300px; + } + .uk-width-large\@xl { + width: 450px; + } + .uk-width-xlarge\@xl { + width: 600px; + } + .uk-width-xxlarge\@xl { + width: 750px; + } + /* Auto */ + .uk-width-auto\@xl { + width: auto; + } + /* Expand */ + .uk-width-expand\@xl { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + min-width: 1px; + } +} + +/* ======================================================================== + Component: Height + ========================================================================== */ +[class*='uk-height'] { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* + * Only works if parent element has a height set + */ +.uk-height-1-1 { + height: 100%; +} + +/* + * Useful to create image teasers + */ +.uk-height-viewport { + min-height: 100vh; +} + +/* + * Pixel + * Useful for `overflow: auto` + */ +.uk-height-small { + height: 150px; +} + +.uk-height-medium { + height: 300px; +} + +.uk-height-large { + height: 450px; +} + +.uk-height-max-small { + max-height: 150px; +} + +.uk-height-max-medium { + max-height: 300px; +} + +.uk-height-max-large { + max-height: 450px; +} + +/* ======================================================================== + Component: Text + ========================================================================== */ +/* Style modifiers + ========================================================================== */ +.uk-text-lead { + font-size: 1.5rem; + line-height: 1.5; + color: #333; +} + +.uk-text-meta { + font-size: 0.875rem; + line-height: 1.4; + color: #999; +} + +/* Size modifiers + ========================================================================== */ +.uk-text-small { + font-size: 0.875rem; + line-height: 1.5; +} + +.uk-text-large { + font-size: 1.5rem; + line-height: 1.5; +} + +/* Weight modifier + ========================================================================== */ +.uk-text-bold { + font-weight: bolder; +} + +/* Transform modifier + ========================================================================== */ +.uk-text-uppercase { + text-transform: uppercase !important; +} + +.uk-text-capitalize { + text-transform: capitalize !important; +} + +.uk-text-lowercase { + text-transform: lowercase !important; +} + +/* Color modifiers + ========================================================================== */ +.uk-text-muted { + color: #999 !important; +} + +.uk-text-emphasis { + color: #333 !important; +} + +.uk-text-primary { + color: #1e87f0 !important; +} + +.uk-text-secondary { + color: #222 !important; +} + +.uk-text-success { + color: #32d296 !important; +} + +.uk-text-warning { + color: #faa05a !important; +} + +.uk-text-danger { + color: #f0506e !important; +} + +/* Background modifier + ========================================================================== */ +/* + * 1. The background clips to the foreground text. Works in Chrome, Firefox, Safari, Edge and Opera + * Default color is set to transparent + * 2. Container fits the text + * 3. Fallback color for IE11 + */ +.uk-text-background { + /* 1 */ + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + /* 2 */ + display: inline-block; + /* 3 */ + color: #1e87f0 !important; +} + +@supports (-webkit-background-clip: text) { + .uk-text-background { + background-color: #1e87f0; + } +} + +/* Alignment modifiers + ========================================================================== */ +.uk-text-left { + text-align: left !important; +} + +.uk-text-right { + text-align: right !important; +} + +.uk-text-center { + text-align: center !important; +} + +.uk-text-justify { + text-align: justify !important; +} + +/* Phone landscape and bigger */ +@media (min-width: 640px) { + .uk-text-left\@s { + text-align: left !important; + } + .uk-text-right\@s { + text-align: right !important; + } + .uk-text-center\@s { + text-align: center !important; + } +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-text-left\@m { + text-align: left !important; + } + .uk-text-right\@m { + text-align: right !important; + } + .uk-text-center\@m { + text-align: center !important; + } +} + +/* Desktop and bigger */ +@media (min-width: 1200px) { + .uk-text-left\@l { + text-align: left !important; + } + .uk-text-right\@l { + text-align: right !important; + } + .uk-text-center\@l { + text-align: center !important; + } +} + +/* Large screen and bigger */ +@media (min-width: 1600px) { + .uk-text-left\@xl { + text-align: left !important; + } + .uk-text-right\@xl { + text-align: right !important; + } + .uk-text-center\@xl { + text-align: center !important; + } +} + +/* + * Vertical + */ +.uk-text-top { + vertical-align: top !important; +} + +.uk-text-middle { + vertical-align: middle !important; +} + +.uk-text-bottom { + vertical-align: bottom !important; +} + +.uk-text-baseline { + vertical-align: baseline !important; +} + +/* Wrap modifiers + ========================================================================== */ +/* + * Prevent text from wrapping onto multiple lines + */ +.uk-text-nowrap { + white-space: nowrap; +} + +/* + * 1. Make sure a max-width is set after which truncation can occur + * 2. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis + * 3. Fix for table cells + */ +.uk-text-truncate { + /* 1 */ + max-width: 100%; + /* 2 */ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* 2 */ +th.uk-text-truncate, +td.uk-text-truncate { + max-width: 0; +} + +/* + * 1. Wrap long words onto the next line and break them if they are too long to fit + * 2. Legacy `word-wrap` as fallback for `overflow-wrap` + * 3. Fix `overflow-wrap` which doesn't work with table cells in Chrome, Opera, IE11 and Edge + * Must use `break-all` to support IE11 and Edge + * Note: Not using `hyphens: auto;` because it hyphenates text even if not needed + */ +.uk-text-break { + /* 1 */ + overflow-wrap: break-word; + /* 2 */ + word-wrap: break-word; +} + +/* 3 */ +th.uk-text-break, +td.uk-text-break { + word-break: break-all; +} + +/* ======================================================================== + Component: Column + ========================================================================== */ +[class*='uk-column-'] { + -webkit-column-gap: 30px; + column-gap: 30px; +} + +/* Desktop and bigger */ +@media (min-width: 1200px) { + [class*='uk-column-'] { + -webkit-column-gap: 40px; + column-gap: 40px; + } +} + +/* + * Fix image 1px line wrapping into the next column in Chrome + */ +[class*='uk-column-'] img { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +/* Divider + ========================================================================== */ +/* + * 1. Double the column gap + */ +.uk-column-divider { + -webkit-column-rule: 1px solid #e5e5e5; + column-rule: 1px solid #e5e5e5; + /* 1 */ + -webkit-column-gap: 60px; + column-gap: 60px; +} + +/* Desktop and bigger */ +@media (min-width: 1200px) { + .uk-column-divider { + -webkit-column-gap: 80px; + column-gap: 80px; + } +} + +/* Width modifiers + ========================================================================== */ +.uk-column-1-2 { + -webkit-column-count: 2; + column-count: 2; +} + +.uk-column-1-3 { + -webkit-column-count: 3; + column-count: 3; +} + +.uk-column-1-4 { + -webkit-column-count: 4; + column-count: 4; +} + +.uk-column-1-5 { + -webkit-column-count: 5; + column-count: 5; +} + +.uk-column-1-6 { + -webkit-column-count: 6; + column-count: 6; +} + +/* Phone landscape and bigger */ +@media (min-width: 640px) { + .uk-column-1-2\@s { + -webkit-column-count: 2; + column-count: 2; + } + .uk-column-1-3\@s { + -webkit-column-count: 3; + column-count: 3; + } + .uk-column-1-4\@s { + -webkit-column-count: 4; + column-count: 4; + } + .uk-column-1-5\@s { + -webkit-column-count: 5; + column-count: 5; + } + .uk-column-1-6\@s { + -webkit-column-count: 6; + column-count: 6; + } +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-column-1-2\@m { + -webkit-column-count: 2; + column-count: 2; + } + .uk-column-1-3\@m { + -webkit-column-count: 3; + column-count: 3; + } + .uk-column-1-4\@m { + -webkit-column-count: 4; + column-count: 4; + } + .uk-column-1-5\@m { + -webkit-column-count: 5; + column-count: 5; + } + .uk-column-1-6\@m { + -webkit-column-count: 6; + column-count: 6; + } +} + +/* Desktop and bigger */ +@media (min-width: 1200px) { + .uk-column-1-2\@l { + -webkit-column-count: 2; + column-count: 2; + } + .uk-column-1-3\@l { + -webkit-column-count: 3; + column-count: 3; + } + .uk-column-1-4\@l { + -webkit-column-count: 4; + column-count: 4; + } + .uk-column-1-5\@l { + -webkit-column-count: 5; + column-count: 5; + } + .uk-column-1-6\@l { + -webkit-column-count: 6; + column-count: 6; + } +} + +/* Large screen and bigger */ +@media (min-width: 1600px) { + .uk-column-1-2\@xl { + -webkit-column-count: 2; + column-count: 2; + } + .uk-column-1-3\@xl { + -webkit-column-count: 3; + column-count: 3; + } + .uk-column-1-4\@xl { + -webkit-column-count: 4; + column-count: 4; + } + .uk-column-1-5\@xl { + -webkit-column-count: 5; + column-count: 5; + } + .uk-column-1-6\@xl { + -webkit-column-count: 6; + column-count: 6; + } +} + +/* Make element span across all columns + * Does not work in Firefox yet + ========================================================================== */ +.uk-column-span { + -webkit-column-span: all; + column-span: all; +} + +/* ======================================================================== + Component: Cover + ========================================================================== */ +/* + * Works with iframes and embedded content + * 1. Reset responsiveness for embedded content + * 2. Center object + * Note: Percent values on the `top` property only works if this element + * is absolute positioned or if the container has a height + */ +.uk-cover { + /* 1 */ + max-width: none; + /* 2 */ + position: absolute; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +iframe.uk-cover { + pointer-events: none; +} + +/* Container + ========================================================================== */ +/* + * 1. Parent container which clips resized object + * 2. Needed if the child is positioned absolute. See note above + */ +.uk-cover-container { + /* 1 */ + overflow: hidden; + /* 2 */ + position: relative; +} + +/* ======================================================================== + Component: Background + ========================================================================== */ +/* Color + ========================================================================== */ +.uk-background-default { + background-color: #fff; +} + +.uk-background-muted { + background-color: #f8f8f8; +} + +.uk-background-primary { + background-color: #1e87f0; +} + +.uk-background-secondary { + background-color: #222; +} + +/* Size + ========================================================================== */ +.uk-background-cover, +.uk-background-contain { + background-position: 50% 50%; + background-repeat: no-repeat; +} + +.uk-background-cover { + background-size: cover; +} + +.uk-background-contain { + background-size: contain; +} + +/* Position + ========================================================================== */ +.uk-background-top-left { + background-position: 0 0; +} + +.uk-background-top-center { + background-position: 50% 0; +} + +.uk-background-top-right { + background-position: 100% 0; +} + +.uk-background-center-left { + background-position: 0 50%; +} + +.uk-background-center-center { + background-position: 50% 50%; +} + +.uk-background-center-right { + background-position: 100% 50%; +} + +.uk-background-bottom-left { + background-position: 0 100%; +} + +.uk-background-bottom-center { + background-position: 50% 100%; +} + +.uk-background-bottom-right { + background-position: 100% 100%; +} + +/* Repeat + ========================================================================== */ +.uk-background-norepeat { + background-repeat: no-repeat; +} + +/* Attachment + ========================================================================== */ +/* + * 1. Fix bug introduced in Chrome 67: the background image is not visible if any element on the page uses `translate3d` + */ +.uk-background-fixed { + background-attachment: fixed; + /* 1 */ + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +/* + * Exclude touch devices because `fixed` doesn't work on iOS and Android + */ +@media (pointer: coarse) { + .uk-background-fixed { + background-attachment: scroll; + } +} + +/* Image + ========================================================================== */ +/* Phone portrait and smaller */ +@media (max-width: 639px) { + .uk-background-image\@s { + background-image: none !important; + } +} + +/* Phone landscape and smaller */ +@media (max-width: 959px) { + .uk-background-image\@m { + background-image: none !important; + } +} + +/* Tablet landscape and smaller */ +@media (max-width: 1199px) { + .uk-background-image\@l { + background-image: none !important; + } +} + +/* Desktop and smaller */ +@media (max-width: 1599px) { + .uk-background-image\@xl { + background-image: none !important; + } +} + +/* Blend modes + ========================================================================== */ +.uk-background-blend-multiply { + background-blend-mode: multiply; +} + +.uk-background-blend-screen { + background-blend-mode: screen; +} + +.uk-background-blend-overlay { + background-blend-mode: overlay; +} + +.uk-background-blend-darken { + background-blend-mode: darken; +} + +.uk-background-blend-lighten { + background-blend-mode: lighten; +} + +.uk-background-blend-color-dodge { + background-blend-mode: color-dodge; +} + +.uk-background-blend-color-burn { + background-blend-mode: color-burn; +} + +.uk-background-blend-hard-light { + background-blend-mode: hard-light; +} + +.uk-background-blend-soft-light { + background-blend-mode: soft-light; +} + +.uk-background-blend-difference { + background-blend-mode: difference; +} + +.uk-background-blend-exclusion { + background-blend-mode: exclusion; +} + +.uk-background-blend-hue { + background-blend-mode: hue; +} + +.uk-background-blend-saturation { + background-blend-mode: saturation; +} + +.uk-background-blend-color { + background-blend-mode: color; +} + +.uk-background-blend-luminosity { + background-blend-mode: luminosity; +} + +/* ======================================================================== + Component: Align + ========================================================================== */ +/* + * Default + */ +[class*='uk-align'] { + display: block; + margin-bottom: 30px; +} + +* + [class*='uk-align'] { + margin-top: 30px; +} + +/* + * Center + */ +.uk-align-center { + margin-left: auto; + margin-right: auto; +} + +/* + * Left/Right + */ +.uk-align-left { + margin-top: 0; + margin-right: 30px; + float: left; +} + +.uk-align-right { + margin-top: 0; + margin-left: 30px; + float: right; +} + +/* Phone landscape and bigger */ +@media (min-width: 640px) { + .uk-align-left\@s { + margin-top: 0; + margin-right: 30px; + float: left; + } + .uk-align-right\@s { + margin-top: 0; + margin-left: 30px; + float: right; + } +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-align-left\@m { + margin-top: 0; + margin-right: 30px; + float: left; + } + .uk-align-right\@m { + margin-top: 0; + margin-left: 30px; + float: right; + } +} + +/* Desktop and bigger */ +@media (min-width: 1200px) { + .uk-align-left\@l { + margin-top: 0; + float: left; + } + .uk-align-right\@l { + margin-top: 0; + float: right; + } + .uk-align-left, + .uk-align-left\@s, + .uk-align-left\@m, + .uk-align-left\@l { + margin-right: 40px; + } + .uk-align-right, + .uk-align-right\@s, + .uk-align-right\@m, + .uk-align-right\@l { + margin-left: 40px; + } +} + +/* Large screen and bigger */ +@media (min-width: 1600px) { + .uk-align-left\@xl { + margin-top: 0; + margin-right: 40px; + float: left; + } + .uk-align-right\@xl { + margin-top: 0; + margin-left: 40px; + float: right; + } +} + +/* ======================================================================== + Component: SVG + ========================================================================== */ +/* + * 1. Fill all SVG elements with the current text color if no `fill` attribute is set + * 2. Set the fill and stroke color of all SVG elements to the current text color + */ +/* 1 */ +.uk-svg, +.uk-svg:not(.uk-preserve) [fill*='#']:not(.uk-preserve) { + fill: currentcolor; +} + +.uk-svg:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) { + stroke: currentcolor; +} + +/* + * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835 + */ +.uk-svg { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); +} + +/* ======================================================================== + Component: Utility + ========================================================================== */ +/* Panel + ========================================================================== */ +.uk-panel { + position: relative; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* + * Micro clearfix + */ +.uk-panel::before, +.uk-panel::after { + content: ""; + display: table; +} + +.uk-panel::after { + clear: both; +} + +/* + * Remove margin from the last-child + */ +.uk-panel > :last-child { + margin-bottom: 0; +} + +/* + * Scrollable + */ +.uk-panel-scrollable { + height: 170px; + padding: 10px; + border: 1px solid #e5e5e5; + overflow: auto; + -webkit-overflow-scrolling: touch; + resize: both; +} + +/* Clearfix + ========================================================================== */ +/* + * 1. `table-cell` is used with `::before` because `table` creates a 1px gap when it becomes a flex item, only in Webkit + * 2. `table` is used again with `::after` because `clear` only works with block elements. + * Note: `display: block` with `overflow: hidden` is currently not working in the latest Safari + */ +/* 1 */ +.uk-clearfix::before { + content: ""; + display: table-cell; +} + +/* 2 */ +.uk-clearfix::after { + content: ""; + display: table; + clear: both; +} + +/* Float + ========================================================================== */ +/* + * 1. Prevent content overflow + */ +.uk-float-left { + float: left; +} + +.uk-float-right { + float: right; +} + +/* 1 */ +[class*='uk-float-'] { + max-width: 100%; +} + +/* Overfow + ========================================================================== */ +.uk-overflow-hidden { + overflow: hidden; +} + +/* + * Enable scrollbars if content is clipped + * Note: Firefox ignores `padding-bottom` for the scrollable overflow https://bugzilla.mozilla.org/show_bug.cgi?id=748518 + */ +.uk-overflow-auto { + overflow: auto; + -webkit-overflow-scrolling: touch; +} + +.uk-overflow-auto > :last-child { + margin-bottom: 0; +} + +/* Resize + ========================================================================== */ +.uk-resize { + resize: both; +} + +.uk-resize-vertical { + resize: vertical; +} + +/* Display + ========================================================================== */ +.uk-display-block { + display: block !important; +} + +.uk-display-inline { + display: inline !important; +} + +.uk-display-inline-block { + display: inline-block !important; +} + +/* Inline + ========================================================================== */ +/* + * 1. Container fits its content + * 2. Create position context + * 3. Prevent content overflow + * 4. Behave like most inline-block elements + * 5. Force hardware acceleration without creating a new stacking context + * to fix 1px glitch when combined with overlays and transitions in Webkit + * 6. Clip child elements + */ +[class*='uk-inline'] { + /* 1 */ + display: inline-block; + /* 2 */ + position: relative; + /* 3 */ + max-width: 100%; + /* 4 */ + vertical-align: middle; + /* 5 */ + -webkit-backface-visibility: hidden; +} + +.uk-inline-clip { + /* 6 */ + overflow: hidden; +} + +/* Responsive objects + ========================================================================== */ +/* + * Preserve original dimensions + * Because `img, `video`, `canvas` and `audio` are already responsive by default, see Base component + */ +.uk-preserve-width, +.uk-preserve-width canvas, +.uk-preserve-width img, +.uk-preserve-width svg, +.uk-preserve-width video { + max-width: none; +} + +/* + * Responsiveness + * Corrects `max-width` and `max-height` behavior if padding and border are used + */ +.uk-responsive-width, +.uk-responsive-height { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* + * 1. Set a maximum width. `important` needed to override `uk-preserve-width img` + * 2. Auto scale the height. Only needed if `height` attribute is present + */ +.uk-responsive-width { + /* 1 */ + max-width: 100% !important; + /* 2 */ + height: auto; +} + +/* + * 1. Set a maximum height. Only works if the parent element has a fixed height + * 2. Auto scale the width. Only needed if `width` attribute is present + * 3. Reset max-width, which `img, `video`, `canvas` and `audio` already have by default + */ +.uk-responsive-height { + /* 1 */ + max-height: 100%; + /* 2 */ + width: auto; + /* 3 */ + max-width: none; +} + +/* Border + ========================================================================== */ +.uk-border-circle { + border-radius: 50%; +} + +.uk-border-pill { + border-radius: 500px; +} + +.uk-border-rounded { + border-radius: 5px; +} + +/* + * Fix `overflow: hidden` to be ignored with border-radius and CSS transforms in Webkit + */ +.uk-inline-clip[class*='uk-border-'] { + -webkit-transform: translateZ(0); +} + +/* Box-shadow + ========================================================================== */ +.uk-box-shadow-small { + -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); +} + +.uk-box-shadow-medium { + -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); +} + +.uk-box-shadow-large { + -webkit-box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16); + box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16); +} + +.uk-box-shadow-xlarge { + -webkit-box-shadow: 0 28px 50px rgba(0, 0, 0, 0.16); + box-shadow: 0 28px 50px rgba(0, 0, 0, 0.16); +} + +/* + * Hover + */ +[class*='uk-box-shadow-hover'] { + -webkit-transition: -webkit-box-shadow 0.1s ease-in-out; + transition: -webkit-box-shadow 0.1s ease-in-out; + transition: box-shadow 0.1s ease-in-out; + transition: box-shadow 0.1s ease-in-out, -webkit-box-shadow 0.1s ease-in-out; +} + +.uk-box-shadow-hover-small:hover { + -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); +} + +.uk-box-shadow-hover-medium:hover { + -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); +} + +.uk-box-shadow-hover-large:hover { + -webkit-box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16); + box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16); +} + +.uk-box-shadow-hover-xlarge:hover { + -webkit-box-shadow: 0 28px 50px rgba(0, 0, 0, 0.16); + box-shadow: 0 28px 50px rgba(0, 0, 0, 0.16); +} + +/* Box-shadow bottom + ========================================================================== */ +/* + * 1. Set position. + * 2. Set style + * 3. Blur doesn't work on pseudo elements with negative `z-index` in Edge. + * Solved by using `before` and add position context to child elements. + */ +@supports ((-webkit-filter: blur(0)) or (filter: blur(0))) { + .uk-box-shadow-bottom { + display: inline-block; + position: relative; + max-width: 100%; + vertical-align: middle; + } + .uk-box-shadow-bottom::before { + content: ''; + /* 1 */ + position: absolute; + bottom: -30px; + left: 0; + right: 0; + /* 2 */ + height: 30px; + border-radius: 100%; + background: #444; + -webkit-filter: blur(20px); + filter: blur(20px); + } + /* 3 */ + .uk-box-shadow-bottom > * { + position: relative; + } +} + +/* Drop cap + ========================================================================== */ +/* + * 1. Firefox doesn't apply `::first-letter` if the first letter is inside child elements + * https://bugzilla.mozilla.org/show_bug.cgi?id=214004 + * 2. In Firefox, a floating `::first-letter` doesn't have a line box and there for no `line-height` + * https://bugzilla.mozilla.org/show_bug.cgi?id=317933 + * 3. Caused by 1.: Edge creates two nested `::first-letter` containers, one for each selector + * This doubles the `font-size` exponential when using the `em` unit. + */ +.uk-dropcap::first-letter, +.uk-dropcap > p:first-of-type::first-letter { + display: block; + margin-right: 10px; + float: left; + font-size: 4.5em; + line-height: 1; +} + +/* 2 */ +@-moz-document url-prefix() { + .uk-dropcap::first-letter, + .uk-dropcap > p:first-of-type::first-letter { + margin-top: 1.1%; + } +} + +/* 3 */ +@supports (-ms-ime-align: auto) { + .uk-dropcap > p:first-of-type::first-letter { + font-size: 1em; + } +} + +/* Logo + ========================================================================== */ +/* + * 1. Required for `a` + */ +.uk-logo { + font-size: 1.5rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + color: #666; + /* 1 */ + text-decoration: none; +} + +/* Hover + Focus */ +.uk-logo:hover, +.uk-logo:focus { + color: #666; + outline: none; + /* 1 */ + text-decoration: none; +} + +.uk-logo-inverse { + display: none; +} + +/* Disabled State + ========================================================================== */ +.uk-disabled { + pointer-events: none; +} + +/* Drag State + ========================================================================== */ +/* + * 1. Needed if moving over elements with have their own cursor on hover, e.g. links or buttons + * 2. Fix dragging over iframes + */ +.uk-drag, +.uk-drag * { + cursor: move; +} + +/* 2 */ +.uk-drag iframe { + pointer-events: none; +} + +/* Dragover State + ========================================================================== */ +/* + * Create a box-shadow when dragging a file over the upload area + */ +.uk-dragover { + -webkit-box-shadow: 0 0 20px rgba(100, 100, 100, 0.3); + box-shadow: 0 0 20px rgba(100, 100, 100, 0.3); +} + +/* Blend modes + ========================================================================== */ +.uk-blend-multiply { + mix-blend-mode: multiply; +} + +.uk-blend-screen { + mix-blend-mode: screen; +} + +.uk-blend-overlay { + mix-blend-mode: overlay; +} + +.uk-blend-darken { + mix-blend-mode: darken; +} + +.uk-blend-lighten { + mix-blend-mode: lighten; +} + +.uk-blend-color-dodge { + mix-blend-mode: color-dodge; +} + +.uk-blend-color-burn { + mix-blend-mode: color-burn; +} + +.uk-blend-hard-light { + mix-blend-mode: hard-light; +} + +.uk-blend-soft-light { + mix-blend-mode: soft-light; +} + +.uk-blend-difference { + mix-blend-mode: difference; +} + +.uk-blend-exclusion { + mix-blend-mode: exclusion; +} + +.uk-blend-hue { + mix-blend-mode: hue; +} + +.uk-blend-saturation { + mix-blend-mode: saturation; +} + +.uk-blend-color { + mix-blend-mode: color; +} + +.uk-blend-luminosity { + mix-blend-mode: luminosity; +} + +/* Transform +========================================================================== */ +.uk-transform-center { + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +/* Transform Origin +========================================================================== */ +.uk-transform-origin-top-left { + -webkit-transform-origin: 0 0; + transform-origin: 0 0; +} + +.uk-transform-origin-top-center { + -webkit-transform-origin: 50% 0; + transform-origin: 50% 0; +} + +.uk-transform-origin-top-right { + -webkit-transform-origin: 100% 0; + transform-origin: 100% 0; +} + +.uk-transform-origin-center-left { + -webkit-transform-origin: 0 50%; + transform-origin: 0 50%; +} + +.uk-transform-origin-center-right { + -webkit-transform-origin: 100% 50%; + transform-origin: 100% 50%; +} + +.uk-transform-origin-bottom-left { + -webkit-transform-origin: 0 100%; + transform-origin: 0 100%; +} + +.uk-transform-origin-bottom-center { + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} + +.uk-transform-origin-bottom-right { + -webkit-transform-origin: 100% 100%; + transform-origin: 100% 100%; +} + +/* ======================================================================== + Component: Flex + ========================================================================== */ +.uk-flex { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.uk-flex-inline { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; +} + +/* + * Remove pseudo elements created by micro clearfix as precaution + */ +.uk-flex::before, +.uk-flex::after, +.uk-flex-inline::before, +.uk-flex-inline::after { + display: none; +} + +/* Alignment + ========================================================================== */ +/* + * Align items along the main axis of the current line of the flex container + * Row: Horizontal + */ +.uk-flex-left { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.uk-flex-center { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +.uk-flex-right { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} + +.uk-flex-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.uk-flex-around { + -ms-flex-pack: distribute; + justify-content: space-around; +} + +/* Phone landscape and bigger */ +@media (min-width: 640px) { + .uk-flex-left\@s { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + } + .uk-flex-center\@s { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } + .uk-flex-right\@s { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + } + .uk-flex-between\@s { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } + .uk-flex-around\@s { + -ms-flex-pack: distribute; + justify-content: space-around; + } +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-flex-left\@m { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + } + .uk-flex-center\@m { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } + .uk-flex-right\@m { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + } + .uk-flex-between\@m { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } + .uk-flex-around\@m { + -ms-flex-pack: distribute; + justify-content: space-around; + } +} + +/* Desktop and bigger */ +@media (min-width: 1200px) { + .uk-flex-left\@l { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + } + .uk-flex-center\@l { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } + .uk-flex-right\@l { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + } + .uk-flex-between\@l { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } + .uk-flex-around\@l { + -ms-flex-pack: distribute; + justify-content: space-around; + } +} + +/* Large screen and bigger */ +@media (min-width: 1600px) { + .uk-flex-left\@xl { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + } + .uk-flex-center\@xl { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } + .uk-flex-right\@xl { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + } + .uk-flex-between\@xl { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } + .uk-flex-around\@xl { + -ms-flex-pack: distribute; + justify-content: space-around; + } +} + +/* + * Align items in the cross axis of the current line of the flex container + * Row: Vertical + */ +.uk-flex-stretch { + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; +} + +.uk-flex-top { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; +} + +.uk-flex-middle { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.uk-flex-bottom { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; +} + +/* Direction + ========================================================================== */ +.uk-flex-row { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; +} + +.uk-flex-row-reverse { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; +} + +.uk-flex-column { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.uk-flex-column-reverse { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; +} + +/* Wrap + ========================================================================== */ +.uk-flex-nowrap { + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; +} + +.uk-flex-wrap { + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.uk-flex-wrap-reverse { + -ms-flex-wrap: wrap-reverse; + flex-wrap: wrap-reverse; +} + +/* + * Aligns items within the flex container when there is extra space in the cross-axis + * Only works if there is more than one line of flex items + */ +.uk-flex-wrap-stretch { + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +.uk-flex-wrap-top { + -ms-flex-line-pack: start; + align-content: flex-start; +} + +.uk-flex-wrap-middle { + -ms-flex-line-pack: center; + align-content: center; +} + +.uk-flex-wrap-bottom { + -ms-flex-line-pack: end; + align-content: flex-end; +} + +.uk-flex-wrap-between { + -ms-flex-line-pack: justify; + align-content: space-between; +} + +.uk-flex-wrap-around { + -ms-flex-line-pack: distribute; + align-content: space-around; +} + +/* Item ordering + ========================================================================== */ +/* + * Default is 0 + */ +.uk-flex-first { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; +} + +.uk-flex-last { + -webkit-box-ordinal-group: 100; + -ms-flex-order: 99; + order: 99; +} + +/* Phone landscape and bigger */ +@media (min-width: 640px) { + .uk-flex-first\@s { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; + } + .uk-flex-last\@s { + -webkit-box-ordinal-group: 100; + -ms-flex-order: 99; + order: 99; + } +} + +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-flex-first\@m { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; + } + .uk-flex-last\@m { + -webkit-box-ordinal-group: 100; + -ms-flex-order: 99; + order: 99; + } +} + +/* Desktop and bigger */ +@media (min-width: 1200px) { + .uk-flex-first\@l { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; + } + .uk-flex-last\@l { + -webkit-box-ordinal-group: 100; + -ms-flex-order: 99; + order: 99; + } +} + +/* Large screen and bigger */ +@media (min-width: 1600px) { + .uk-flex-first\@xl { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; + } + .uk-flex-last\@xl { + -webkit-box-ordinal-group: 100; + -ms-flex-order: 99; + order: 99; + } +} + +/* Item dimensions + ========================================================================== */ +/* + * Initial: 0 1 auto + * Content dimensions, but shrinks + */ +/* + * No Flex: 0 0 auto + * Content dimensions + */ +.uk-flex-none { + -webkit-box-flex: 0; + -ms-flex: none; + flex: none; +} + +/* + * Relative Flex: 1 1 auto + * Space is allocated considering content + */ +.uk-flex-auto { + -webkit-box-flex: 1; + -ms-flex: auto; + flex: auto; +} + +/* + * Absolute Flex: 1 1 0% + * Space is allocated solely based on flex + */ +.uk-flex-1 { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +/* ======================================================================== + Component: Margin + ========================================================================== */ +/* + * Default + */ +.uk-margin { + margin-bottom: 20px; +} + +* + .uk-margin { + margin-top: 20px !important; +} + +.uk-margin-top { + margin-top: 20px !important; +} + +.uk-margin-bottom { + margin-bottom: 20px !important; +} + +.uk-margin-left { + margin-left: 20px !important; +} + +.uk-margin-right { + margin-right: 20px !important; +} + +/* Small + ========================================================================== */ +.uk-margin-small { + margin-bottom: 10px; +} + +* + .uk-margin-small { + margin-top: 10px !important; +} + +.uk-margin-small-top { + margin-top: 10px !important; +} + +.uk-margin-small-bottom { + margin-bottom: 10px !important; +} + +.uk-margin-small-left { + margin-left: 10px !important; +} + +.uk-margin-small-right { + margin-right: 10px !important; +} + +/* Medium + ========================================================================== */ +.uk-margin-medium { + margin-bottom: 40px; +} + +* + .uk-margin-medium { + margin-top: 40px !important; +} + +.uk-margin-medium-top { + margin-top: 40px !important; +} + +.uk-margin-medium-bottom { + margin-bottom: 40px !important; +} + +.uk-margin-medium-left { + margin-left: 40px !important; +} + +.uk-margin-medium-right { + margin-right: 40px !important; +} + +/* Large + ========================================================================== */ +.uk-margin-large { + margin-bottom: 40px; +} + +* + .uk-margin-large { + margin-top: 40px !important; +} + +.uk-margin-large-top { + margin-top: 40px !important; +} + +.uk-margin-large-bottom { + margin-bottom: 40px !important; +} + +.uk-margin-large-left { + margin-left: 40px !important; +} + +.uk-margin-large-right { + margin-right: 40px !important; +} + +/* Desktop and bigger */ +@media (min-width: 1200px) { + .uk-margin-large { + margin-bottom: 70px; + } + * + .uk-margin-large { + margin-top: 70px !important; + } + .uk-margin-large-top { + margin-top: 70px !important; + } + .uk-margin-large-bottom { + margin-bottom: 70px !important; + } + .uk-margin-large-left { + margin-left: 70px !important; + } + .uk-margin-large-right { + margin-right: 70px !important; + } +} + +/* XLarge + ========================================================================== */ +.uk-margin-xlarge { + margin-bottom: 70px; +} + +* + .uk-margin-xlarge { + margin-top: 70px !important; +} + +.uk-margin-xlarge-top { + margin-top: 70px !important; +} + +.uk-margin-xlarge-bottom { + margin-bottom: 70px !important; +} + +.uk-margin-xlarge-left { + margin-left: 70px !important; +} + +.uk-margin-xlarge-right { + margin-right: 70px !important; +} + +/* Desktop and bigger */ +@media (min-width: 1200px) { + .uk-margin-xlarge { + margin-bottom: 140px; + } + * + .uk-margin-xlarge { + margin-top: 140px !important; + } + .uk-margin-xlarge-top { + margin-top: 140px !important; + } + .uk-margin-xlarge-bottom { + margin-bottom: 140px !important; + } + .uk-margin-xlarge-left { + margin-left: 140px !important; + } + .uk-margin-xlarge-right { + margin-right: 140px !important; + } +} + +/* Remove + ========================================================================== */ +.uk-margin-remove { + margin: 0 !important; +} + +.uk-margin-remove-top { + margin-top: 0 !important; +} + +.uk-margin-remove-bottom { + margin-bottom: 0 !important; +} + +.uk-margin-remove-left { + margin-left: 0 !important; +} + +.uk-margin-remove-right { + margin-right: 0 !important; +} + +.uk-margin-remove-vertical { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.uk-margin-remove-adjacent + *, +.uk-margin-remove-first-child > :first-child { + margin-top: 0 !important; +} + +/* Auto + ========================================================================== */ +.uk-margin-auto { + margin-left: auto !important; + margin-right: auto !important; +} + +.uk-margin-auto-top { + margin-top: auto !important; +} + +.uk-margin-auto-bottom { + margin-bottom: auto !important; +} + +.uk-margin-auto-left { + margin-left: auto !important; +} + +.uk-margin-auto-right { + margin-right: auto !important; +} + +.uk-margin-auto-vertical { + margin-top: auto !important; + margin-bottom: auto !important; +} + +/* ======================================================================== + Component: Padding + ========================================================================== */ +.uk-padding { + padding: 30px; +} + +/* Desktop and bigger */ +@media (min-width: 1200px) { + .uk-padding { + padding: 40px; + } +} + +/* Small + ========================================================================== */ +.uk-padding-small { + padding: 15px; +} + +/* Large + ========================================================================== */ +.uk-padding-large { + padding: 30px; +} + +/* Desktop and bigger */ +@media (min-width: 1200px) { + .uk-padding-large { + padding: 70px; + } +} + +/* Remove + ========================================================================== */ +.uk-padding-remove { + padding: 0 !important; +} + +.uk-padding-remove-top { + padding-top: 0 !important; +} + +.uk-padding-remove-bottom { + padding-bottom: 0 !important; +} + +.uk-padding-remove-left { + padding-left: 0 !important; +} + +.uk-padding-remove-right { + padding-right: 0 !important; +} + +.uk-padding-remove-vertical { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.uk-padding-remove-horizontal { + padding-left: 0 !important; + padding-right: 0 !important; +} + +/* ======================================================================== + Component: Position + ========================================================================== */ +/* Directions + ========================================================================== */ +[class*='uk-position-top'], +[class*='uk-position-bottom'], +[class*='uk-position-left'], +[class*='uk-position-right'], +[class*='uk-position-center'] { + position: absolute !important; +} + +/* Edges + ========================================================================== */ +/* Don't use `width: 100%` because it is wrong if the parent has padding. */ +.uk-position-top { + top: 0; + left: 0; + right: 0; +} + +.uk-position-bottom { + bottom: 0; + left: 0; + right: 0; +} + +.uk-position-left { + top: 0; + bottom: 0; + left: 0; +} + +.uk-position-right { + top: 0; + bottom: 0; + right: 0; +} + +/* Corners + ========================================================================== */ +.uk-position-top-left { + top: 0; + left: 0; +} + +.uk-position-top-right { + top: 0; + right: 0; +} + +.uk-position-bottom-left { + bottom: 0; + left: 0; +} + +.uk-position-bottom-right { + bottom: 0; + right: 0; +} + +/* + * Center + * 1. Fix text wrapping if content is larger than 50% of the container. + */ +.uk-position-center { + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + /* 1 */ + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + max-width: 100%; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* Vertical */ +[class*='uk-position-center-left'], +[class*='uk-position-center-right'] { + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); +} + +.uk-position-center-left { + left: 0; +} + +.uk-position-center-right { + right: 0; +} + +.uk-position-center-left-out { + right: 100%; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; +} + +.uk-position-center-right-out { + left: 100%; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; +} + +/* Horizontal */ +.uk-position-top-center, +.uk-position-bottom-center { + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + /* 1 */ + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + max-width: 100%; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.uk-position-top-center { + top: 0; +} + +.uk-position-bottom-center { + bottom: 0; +} + +/* Cover + ========================================================================== */ +.uk-position-cover { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +/* Utility + ========================================================================== */ +.uk-position-relative { + position: relative !important; +} + +.uk-position-absolute { + position: absolute !important; +} + +.uk-position-fixed { + position: fixed !important; +} + +.uk-position-z-index { + z-index: 1; +} + +/* Margin modifier + ========================================================================== */ +/* + * Small + */ +.uk-position-small { + max-width: calc(100% - (15px * 2)); + margin: 15px; +} + +.uk-position-small.uk-position-center { + -webkit-transform: translate(-50%, -50%) translate(-15px, -15px); + transform: translate(-50%, -50%) translate(-15px, -15px); +} + +.uk-position-small[class*='uk-position-center-left'], +.uk-position-small[class*='uk-position-center-right'] { + -webkit-transform: translateY(-50%) translateY(-15px); + transform: translateY(-50%) translateY(-15px); +} + +.uk-position-small.uk-position-top-center, +.uk-position-small.uk-position-bottom-center { + -webkit-transform: translateX(-50%) translateX(-15px); + transform: translateX(-50%) translateX(-15px); +} + +/* + * Medium + */ +.uk-position-medium { + max-width: calc(100% - (30px * 2)); + margin: 30px; +} + +.uk-position-medium.uk-position-center { + -webkit-transform: translate(-50%, -50%) translate(-30px, -30px); + transform: translate(-50%, -50%) translate(-30px, -30px); +} + +.uk-position-medium[class*='uk-position-center-left'], +.uk-position-medium[class*='uk-position-center-right'] { + -webkit-transform: translateY(-50%) translateY(-30px); + transform: translateY(-50%) translateY(-30px); +} + +.uk-position-medium.uk-position-top-center, +.uk-position-medium.uk-position-bottom-center { + -webkit-transform: translateX(-50%) translateX(-30px); + transform: translateX(-50%) translateX(-30px); +} + +/* + * Large + */ +.uk-position-large { + max-width: calc(100% - (30px * 2)); + margin: 30px; +} + +.uk-position-large.uk-position-center { + -webkit-transform: translate(-50%, -50%) translate(-30px, -30px); + transform: translate(-50%, -50%) translate(-30px, -30px); +} + +.uk-position-large[class*='uk-position-center-left'], +.uk-position-large[class*='uk-position-center-right'] { + -webkit-transform: translateY(-50%) translateY(-30px); + transform: translateY(-50%) translateY(-30px); +} + +.uk-position-large.uk-position-top-center, +.uk-position-large.uk-position-bottom-center { + -webkit-transform: translateX(-50%) translateX(-30px); + transform: translateX(-50%) translateX(-30px); +} + +/* Desktop and bigger */ +@media (min-width: 1200px) { + .uk-position-large { + max-width: calc(100% - (50px * 2)); + margin: 50px; + } + .uk-position-large.uk-position-center { + -webkit-transform: translate(-50%, -50%) translate(-50px, -50px); + transform: translate(-50%, -50%) translate(-50px, -50px); + } + .uk-position-large[class*='uk-position-center-left'], + .uk-position-large[class*='uk-position-center-right'] { + -webkit-transform: translateY(-50%) translateY(-50px); + transform: translateY(-50%) translateY(-50px); + } + .uk-position-large.uk-position-top-center, + .uk-position-large.uk-position-bottom-center { + -webkit-transform: translateX(-50%) translateX(-50px); + transform: translateX(-50%) translateX(-50px); + } +} + +/* ======================================================================== + Component: Transition + ========================================================================== */ +/* Toggle (Hover + Focus) + ========================================================================== */ +/* + * 1. Prevent tab highlighting on iOS. + */ +.uk-transition-toggle { + /* 1 */ + -webkit-tap-highlight-color: transparent; +} + +/* + * Remove outline for `tabindex` + */ +.uk-transition-toggle:focus { + outline: none; +} + +/* Transitions + ========================================================================== */ +/* + * The toggle is triggered on touch devices by two methods: + * 1. Using `:focus` and tabindex + * 2. Using `:hover` and a `touchstart` event listener registered on the document + * (Doesn't work on Surface touch devices) + * + * Note: Transitions don't work with `uk-postion-center-*` classes because they also use `transform`, + * therefore it's recommended to use an extra `div` for the transition. + */ +.uk-transition-fade, +[class*='uk-transition-scale'], +[class*='uk-transition-slide'] { + -webkit-transition: 0.3s ease-out; + transition: 0.3s ease-out; + -webkit-transition-property: opacity, -webkit-transform, -webkit-filter; + transition-property: opacity, -webkit-transform, -webkit-filter; + transition-property: opacity, transform, filter; + transition-property: opacity, transform, filter, -webkit-transform, -webkit-filter; + opacity: 0; +} + +/* + * Fade + */ +.uk-transition-toggle:hover .uk-transition-fade, +.uk-transition-toggle:focus .uk-transition-fade, +.uk-transition-active.uk-active .uk-transition-fade { + opacity: 1; +} + +/* + * Scale + */ +.uk-transition-scale-up { + -webkit-transform: scale(1, 1); + transform: scale(1, 1); +} + +.uk-transition-scale-down { + -webkit-transform: scale(1.1, 1.1); + transform: scale(1.1, 1.1); +} + +/* Show */ +.uk-transition-toggle:hover .uk-transition-scale-up, +.uk-transition-toggle:focus .uk-transition-scale-up, +.uk-transition-active.uk-active .uk-transition-scale-up { + opacity: 1; + -webkit-transform: scale(1.1, 1.1); + transform: scale(1.1, 1.1); +} + +.uk-transition-toggle:hover .uk-transition-scale-down, +.uk-transition-toggle:focus .uk-transition-scale-down, +.uk-transition-active.uk-active .uk-transition-scale-down { + opacity: 1; + -webkit-transform: scale(1, 1); + transform: scale(1, 1); +} + +/* + * Slide + */ +.uk-transition-slide-top { + -webkit-transform: translateY(-100%); + transform: translateY(-100%); +} + +.uk-transition-slide-bottom { + -webkit-transform: translateY(100%); + transform: translateY(100%); } -dfn { - font-style: italic; +.uk-transition-slide-left { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); } -h1 { - font-size: 2.44em; - margin: 0.67em 0; - line-height: 1.4; +.uk-transition-slide-right { + -webkit-transform: translateX(100%); + transform: translateX(100%); } -h2 { - font-size: 1.95em; - line-height: 1.4; +.uk-transition-slide-top-small { + -webkit-transform: translateY(-10px); + transform: translateY(-10px); } -h3 { - font-size: 1.56em; - line-height: 1.4; +.uk-transition-slide-bottom-small { + -webkit-transform: translateY(10px); + transform: translateY(10px); } -h4 { - font-size: 1.25em; - line-height: 1.5; +.uk-transition-slide-left-small { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); } -h5 { - font-size: 1em; +.uk-transition-slide-right-small { + -webkit-transform: translateX(10px); + transform: translateX(10px); } -h6 { - font-size: 0.8em; +.uk-transition-slide-top-medium { + -webkit-transform: translateY(-50px); + transform: translateY(-50px); } -mark { - background: #ff0; - color: #000; +.uk-transition-slide-bottom-medium { + -webkit-transform: translateY(50px); + transform: translateY(50px); } -small { - font-size: 80%; +.uk-transition-slide-left-medium { + -webkit-transform: translateX(-50px); + transform: translateX(-50px); } -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; +.uk-transition-slide-right-medium { + -webkit-transform: translateX(50px); + transform: translateX(50px); } -sup { - top: -0.5em; +/* Show */ +.uk-transition-toggle:hover [class*='uk-transition-slide'], +.uk-transition-toggle:focus [class*='uk-transition-slide'], +.uk-transition-active.uk-active [class*='uk-transition-slide'] { + opacity: 1; + -webkit-transform: translate(0, 0); + transform: translate(0, 0); } -sub { - bottom: -0.25em; +/* Opacity modifier + ========================================================================== */ +.uk-transition-opaque { + opacity: 1; } -img { - border: 0; +/* Duration modifiers + ========================================================================== */ +.uk-transition-slow { + -webkit-transition-duration: 0.7s; + transition-duration: 0.7s; } -svg:not(:root) { - overflow: hidden; +/* ======================================================================== + Component: Visibility + ========================================================================== */ +/* + * Hidden + * `hidden` attribute also set here to make it stronger + */ +[hidden], +.uk-hidden { + display: none !important; } -figure { - margin: 1em 40px; +/* Phone landscape and bigger */ +@media (min-width: 640px) { + .uk-hidden\@s { + display: none !important; + } } -hr { - -webkit-box-sizing: content-box; - box-sizing: content-box; - height: 0; +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .uk-hidden\@m { + display: none !important; + } } -pre { - overflow: auto; +/* Desktop and bigger */ +@media (min-width: 1200px) { + .uk-hidden\@l { + display: none !important; + } } -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; +/* Large screen and bigger */ +@media (min-width: 1600px) { + .uk-hidden\@xl { + display: none !important; + } } -button, -input, -optgroup, -select, -textarea { - color: inherit; - font: inherit; - margin: 0; +/* + * Visible + */ +/* Phone portrait and smaller */ +@media (max-width: 639px) { + .uk-visible\@s { + display: none !important; + } } -button { - overflow: visible; +/* Phone landscape and smaller */ +@media (max-width: 959px) { + .uk-visible\@m { + display: none !important; + } } -button, -select { - text-transform: none; +/* Tablet landscape and smaller */ +@media (max-width: 1199px) { + .uk-visible\@l { + display: none !important; + } } -button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; - cursor: pointer; +/* Desktop and smaller */ +@media (max-width: 1599px) { + .uk-visible\@xl { + display: none !important; + } } -button[disabled], -html input[disabled] { - cursor: default; +/* Visibility + ========================================================================== */ +.uk-invisible { + visibility: hidden !important; } -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; +/* Toggle (Hover + Focus) + ========================================================================== */ +/* + * Hidden + * 1. The toggle is triggered on touch devices using `:focus` and tabindex + * 2. The target stays visible if any element within receives focus through keyboard + * Doesn't work in Edge, yet. + * 3. Can't use `display: none` nor `visibility: hidden` because both are not focusable. + * + */ +/* 1 + 2 */ +.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) { + /* 3 */ + position: absolute !important; + width: 0 !important; + height: 0 !important; + padding: 0 !important; + margin: 0 !important; + overflow: hidden !important; } -input { - line-height: normal; +/* + * Invisible + */ +/* 1 + 2 */ +.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { + /* 3 */ + opacity: 0 !important; } -input[type="checkbox"], -input[type="radio"] { - -webkit-box-sizing: border-box; - box-sizing: border-box; - padding: 0; +/* + * 1. Prevent tab highlighting on iOS. + */ +.uk-visible-toggle { + /* 1 */ + -webkit-tap-highlight-color: transparent; } -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; +/* + * Remove outline for `tabindex` + */ +.uk-visible-toggle:focus { + outline: none; } -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; +/* Touch + ========================================================================== */ +/* + * Hide if primary pointing device has limited accuracy, e.g. a touch screen. + * Works on mobile browsers: Safari, Chrome and Android browser + */ +@media (pointer: coarse) { + .uk-hidden-touch { + display: none !important; + } } -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; +/* + * Hide if primary pointing device is accurate, e.g. mouse. + * 1. Fallback for IE11 and Firefox, because `pointer` is not supported + * 2. Reset if supported + */ +/* 1 */ +.uk-hidden-notouch { + display: none !important; +} + +@media (pointer: coarse) { + .uk-hidden-notouch { + display: block !important; + } } -legend { - border: 0; - padding: 0; +/* ======================================================================== + Component: Inverse + ========================================================================== */ +/* + * Implemented class depends on the general theme color + * `uk-light` is for light colors on dark backgrounds + * `uk-dark` is or dark colors on light backgrounds + */ +.uk-light, .uk-section-primary:not(.uk-preserve-color), .uk-section-secondary:not(.uk-preserve-color), .uk-tile-primary:not(.uk-preserve-color), .uk-tile-secondary:not(.uk-preserve-color), .uk-card-primary.uk-card-body, .uk-card-primary > :not([class*='uk-card-media']), .uk-card-secondary.uk-card-body, .uk-card-secondary > :not([class*='uk-card-media']), .uk-overlay-primary, .uk-offcanvas-bar { + color: #fff; +} + +.uk-light a, .uk-section-primary:not(.uk-preserve-color) a, .uk-section-secondary:not(.uk-preserve-color) a, .uk-tile-primary:not(.uk-preserve-color) a, .uk-tile-secondary:not(.uk-preserve-color) a, .uk-card-primary.uk-card-body a, .uk-card-primary > :not([class*='uk-card-media']) a, .uk-card-secondary.uk-card-body a, .uk-card-secondary > :not([class*='uk-card-media']) a, .uk-overlay-primary a, .uk-offcanvas-bar a, +.uk-light .uk-link, +.uk-section-primary:not(.uk-preserve-color) .uk-link, +.uk-section-secondary:not(.uk-preserve-color) .uk-link, +.uk-tile-primary:not(.uk-preserve-color) .uk-link, +.uk-tile-secondary:not(.uk-preserve-color) .uk-link, +.uk-card-primary.uk-card-body .uk-link, +.uk-card-primary > :not([class*='uk-card-media']) .uk-link, +.uk-card-secondary.uk-card-body .uk-link, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-link, +.uk-overlay-primary .uk-link, +.uk-offcanvas-bar .uk-link { + color: #ccc; +} + +.uk-light a:hover, .uk-section-primary:not(.uk-preserve-color) a:hover, .uk-section-secondary:not(.uk-preserve-color) a:hover, .uk-tile-primary:not(.uk-preserve-color) a:hover, .uk-tile-secondary:not(.uk-preserve-color) a:hover, .uk-card-primary.uk-card-body a:hover, .uk-card-primary > :not([class*='uk-card-media']) a:hover, .uk-card-secondary.uk-card-body a:hover, .uk-card-secondary > :not([class*='uk-card-media']) a:hover, .uk-overlay-primary a:hover, .uk-offcanvas-bar a:hover, +.uk-light .uk-link:hover, +.uk-section-primary:not(.uk-preserve-color) .uk-link:hover, +.uk-section-secondary:not(.uk-preserve-color) .uk-link:hover, +.uk-tile-primary:not(.uk-preserve-color) .uk-link:hover, +.uk-tile-secondary:not(.uk-preserve-color) .uk-link:hover, +.uk-card-primary.uk-card-body .uk-link:hover, +.uk-card-primary > :not([class*='uk-card-media']) .uk-link:hover, +.uk-card-secondary.uk-card-body .uk-link:hover, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-link:hover, +.uk-overlay-primary .uk-link:hover, +.uk-offcanvas-bar .uk-link:hover { + color: #ccc; +} + +.uk-light :not(pre) > code, .uk-section-primary:not(.uk-preserve-color) :not(pre) > code, .uk-section-secondary:not(.uk-preserve-color) :not(pre) > code, .uk-tile-primary:not(.uk-preserve-color) :not(pre) > code, .uk-tile-secondary:not(.uk-preserve-color) :not(pre) > code, .uk-card-primary.uk-card-body :not(pre) > code, .uk-card-primary > :not([class*='uk-card-media']) :not(pre) > code, .uk-card-secondary.uk-card-body :not(pre) > code, .uk-card-secondary > :not([class*='uk-card-media']) :not(pre) > code, .uk-overlay-primary :not(pre) > code, .uk-offcanvas-bar :not(pre) > code, +.uk-light :not(pre) > kbd, +.uk-section-primary:not(.uk-preserve-color) :not(pre) > kbd, +.uk-section-secondary:not(.uk-preserve-color) :not(pre) > kbd, +.uk-tile-primary:not(.uk-preserve-color) :not(pre) > kbd, +.uk-tile-secondary:not(.uk-preserve-color) :not(pre) > kbd, +.uk-card-primary.uk-card-body :not(pre) > kbd, +.uk-card-primary > :not([class*='uk-card-media']) :not(pre) > kbd, +.uk-card-secondary.uk-card-body :not(pre) > kbd, +.uk-card-secondary > :not([class*='uk-card-media']) :not(pre) > kbd, +.uk-overlay-primary :not(pre) > kbd, +.uk-offcanvas-bar :not(pre) > kbd, +.uk-light :not(pre) > samp, +.uk-section-primary:not(.uk-preserve-color) :not(pre) > samp, +.uk-section-secondary:not(.uk-preserve-color) :not(pre) > samp, +.uk-tile-primary:not(.uk-preserve-color) :not(pre) > samp, +.uk-tile-secondary:not(.uk-preserve-color) :not(pre) > samp, +.uk-card-primary.uk-card-body :not(pre) > samp, +.uk-card-primary > :not([class*='uk-card-media']) :not(pre) > samp, +.uk-card-secondary.uk-card-body :not(pre) > samp, +.uk-card-secondary > :not([class*='uk-card-media']) :not(pre) > samp, +.uk-overlay-primary :not(pre) > samp, +.uk-offcanvas-bar :not(pre) > samp { + color: #fff; +} + +.uk-light em, .uk-section-primary:not(.uk-preserve-color) em, .uk-section-secondary:not(.uk-preserve-color) em, .uk-tile-primary:not(.uk-preserve-color) em, .uk-tile-secondary:not(.uk-preserve-color) em, .uk-card-primary.uk-card-body em, .uk-card-primary > :not([class*='uk-card-media']) em, .uk-card-secondary.uk-card-body em, .uk-card-secondary > :not([class*='uk-card-media']) em, .uk-overlay-primary em, .uk-offcanvas-bar em { + color: #ccc; +} + +.uk-light h1, .uk-section-primary:not(.uk-preserve-color) h1, .uk-section-secondary:not(.uk-preserve-color) h1, .uk-tile-primary:not(.uk-preserve-color) h1, .uk-tile-secondary:not(.uk-preserve-color) h1, .uk-card-primary.uk-card-body h1, .uk-card-primary > :not([class*='uk-card-media']) h1, .uk-card-secondary.uk-card-body h1, .uk-card-secondary > :not([class*='uk-card-media']) h1, .uk-overlay-primary h1, .uk-offcanvas-bar h1, .uk-light .uk-h1, .uk-section-primary:not(.uk-preserve-color) .uk-h1, .uk-section-secondary:not(.uk-preserve-color) .uk-h1, .uk-tile-primary:not(.uk-preserve-color) .uk-h1, .uk-tile-secondary:not(.uk-preserve-color) .uk-h1, .uk-card-primary.uk-card-body .uk-h1, .uk-card-primary > :not([class*='uk-card-media']) .uk-h1, .uk-card-secondary.uk-card-body .uk-h1, .uk-card-secondary > :not([class*='uk-card-media']) .uk-h1, .uk-overlay-primary .uk-h1, .uk-offcanvas-bar .uk-h1, +.uk-light h2, +.uk-section-primary:not(.uk-preserve-color) h2, +.uk-section-secondary:not(.uk-preserve-color) h2, +.uk-tile-primary:not(.uk-preserve-color) h2, +.uk-tile-secondary:not(.uk-preserve-color) h2, +.uk-card-primary.uk-card-body h2, +.uk-card-primary > :not([class*='uk-card-media']) h2, +.uk-card-secondary.uk-card-body h2, +.uk-card-secondary > :not([class*='uk-card-media']) h2, +.uk-overlay-primary h2, +.uk-offcanvas-bar h2, .uk-light .uk-h2, .uk-section-primary:not(.uk-preserve-color) .uk-h2, .uk-section-secondary:not(.uk-preserve-color) .uk-h2, .uk-tile-primary:not(.uk-preserve-color) .uk-h2, .uk-tile-secondary:not(.uk-preserve-color) .uk-h2, .uk-card-primary.uk-card-body .uk-h2, .uk-card-primary > :not([class*='uk-card-media']) .uk-h2, .uk-card-secondary.uk-card-body .uk-h2, .uk-card-secondary > :not([class*='uk-card-media']) .uk-h2, .uk-overlay-primary .uk-h2, .uk-offcanvas-bar .uk-h2, +.uk-light h3, +.uk-section-primary:not(.uk-preserve-color) h3, +.uk-section-secondary:not(.uk-preserve-color) h3, +.uk-tile-primary:not(.uk-preserve-color) h3, +.uk-tile-secondary:not(.uk-preserve-color) h3, +.uk-card-primary.uk-card-body h3, +.uk-card-primary > :not([class*='uk-card-media']) h3, +.uk-card-secondary.uk-card-body h3, +.uk-card-secondary > :not([class*='uk-card-media']) h3, +.uk-overlay-primary h3, +.uk-offcanvas-bar h3, .uk-light .uk-h3, .uk-section-primary:not(.uk-preserve-color) .uk-h3, .uk-section-secondary:not(.uk-preserve-color) .uk-h3, .uk-tile-primary:not(.uk-preserve-color) .uk-h3, .uk-tile-secondary:not(.uk-preserve-color) .uk-h3, .uk-card-primary.uk-card-body .uk-h3, .uk-card-primary > :not([class*='uk-card-media']) .uk-h3, .uk-card-secondary.uk-card-body .uk-h3, .uk-card-secondary > :not([class*='uk-card-media']) .uk-h3, .uk-overlay-primary .uk-h3, .uk-offcanvas-bar .uk-h3, +.uk-light h4, +.uk-section-primary:not(.uk-preserve-color) h4, +.uk-section-secondary:not(.uk-preserve-color) h4, +.uk-tile-primary:not(.uk-preserve-color) h4, +.uk-tile-secondary:not(.uk-preserve-color) h4, +.uk-card-primary.uk-card-body h4, +.uk-card-primary > :not([class*='uk-card-media']) h4, +.uk-card-secondary.uk-card-body h4, +.uk-card-secondary > :not([class*='uk-card-media']) h4, +.uk-overlay-primary h4, +.uk-offcanvas-bar h4, .uk-light .uk-h4, .uk-section-primary:not(.uk-preserve-color) .uk-h4, .uk-section-secondary:not(.uk-preserve-color) .uk-h4, .uk-tile-primary:not(.uk-preserve-color) .uk-h4, .uk-tile-secondary:not(.uk-preserve-color) .uk-h4, .uk-card-primary.uk-card-body .uk-h4, .uk-card-primary > :not([class*='uk-card-media']) .uk-h4, .uk-card-secondary.uk-card-body .uk-h4, .uk-card-secondary > :not([class*='uk-card-media']) .uk-h4, .uk-overlay-primary .uk-h4, .uk-offcanvas-bar .uk-h4, +.uk-light h5, +.uk-section-primary:not(.uk-preserve-color) h5, +.uk-section-secondary:not(.uk-preserve-color) h5, +.uk-tile-primary:not(.uk-preserve-color) h5, +.uk-tile-secondary:not(.uk-preserve-color) h5, +.uk-card-primary.uk-card-body h5, +.uk-card-primary > :not([class*='uk-card-media']) h5, +.uk-card-secondary.uk-card-body h5, +.uk-card-secondary > :not([class*='uk-card-media']) h5, +.uk-overlay-primary h5, +.uk-offcanvas-bar h5, .uk-light .uk-h5, .uk-section-primary:not(.uk-preserve-color) .uk-h5, .uk-section-secondary:not(.uk-preserve-color) .uk-h5, .uk-tile-primary:not(.uk-preserve-color) .uk-h5, .uk-tile-secondary:not(.uk-preserve-color) .uk-h5, .uk-card-primary.uk-card-body .uk-h5, .uk-card-primary > :not([class*='uk-card-media']) .uk-h5, .uk-card-secondary.uk-card-body .uk-h5, .uk-card-secondary > :not([class*='uk-card-media']) .uk-h5, .uk-overlay-primary .uk-h5, .uk-offcanvas-bar .uk-h5, +.uk-light h6, +.uk-section-primary:not(.uk-preserve-color) h6, +.uk-section-secondary:not(.uk-preserve-color) h6, +.uk-tile-primary:not(.uk-preserve-color) h6, +.uk-tile-secondary:not(.uk-preserve-color) h6, +.uk-card-primary.uk-card-body h6, +.uk-card-primary > :not([class*='uk-card-media']) h6, +.uk-card-secondary.uk-card-body h6, +.uk-card-secondary > :not([class*='uk-card-media']) h6, +.uk-overlay-primary h6, +.uk-offcanvas-bar h6, .uk-light .uk-h6, .uk-section-primary:not(.uk-preserve-color) .uk-h6, .uk-section-secondary:not(.uk-preserve-color) .uk-h6, .uk-tile-primary:not(.uk-preserve-color) .uk-h6, .uk-tile-secondary:not(.uk-preserve-color) .uk-h6, .uk-card-primary.uk-card-body .uk-h6, .uk-card-primary > :not([class*='uk-card-media']) .uk-h6, .uk-card-secondary.uk-card-body .uk-h6, .uk-card-secondary > :not([class*='uk-card-media']) .uk-h6, .uk-overlay-primary .uk-h6, .uk-offcanvas-bar .uk-h6, +.uk-light .uk-heading-small, +.uk-section-primary:not(.uk-preserve-color) .uk-heading-small, +.uk-section-secondary:not(.uk-preserve-color) .uk-heading-small, +.uk-tile-primary:not(.uk-preserve-color) .uk-heading-small, +.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-small, +.uk-card-primary.uk-card-body .uk-heading-small, +.uk-card-primary > :not([class*='uk-card-media']) .uk-heading-small, +.uk-card-secondary.uk-card-body .uk-heading-small, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-heading-small, +.uk-overlay-primary .uk-heading-small, +.uk-offcanvas-bar .uk-heading-small, +.uk-light .uk-heading-medium, +.uk-section-primary:not(.uk-preserve-color) .uk-heading-medium, +.uk-section-secondary:not(.uk-preserve-color) .uk-heading-medium, +.uk-tile-primary:not(.uk-preserve-color) .uk-heading-medium, +.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-medium, +.uk-card-primary.uk-card-body .uk-heading-medium, +.uk-card-primary > :not([class*='uk-card-media']) .uk-heading-medium, +.uk-card-secondary.uk-card-body .uk-heading-medium, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-heading-medium, +.uk-overlay-primary .uk-heading-medium, +.uk-offcanvas-bar .uk-heading-medium, +.uk-light .uk-heading-large, +.uk-section-primary:not(.uk-preserve-color) .uk-heading-large, +.uk-section-secondary:not(.uk-preserve-color) .uk-heading-large, +.uk-tile-primary:not(.uk-preserve-color) .uk-heading-large, +.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-large, +.uk-card-primary.uk-card-body .uk-heading-large, +.uk-card-primary > :not([class*='uk-card-media']) .uk-heading-large, +.uk-card-secondary.uk-card-body .uk-heading-large, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-heading-large, +.uk-overlay-primary .uk-heading-large, +.uk-offcanvas-bar .uk-heading-large, +.uk-light .uk-heading-xlarge, +.uk-section-primary:not(.uk-preserve-color) .uk-heading-xlarge, +.uk-section-secondary:not(.uk-preserve-color) .uk-heading-xlarge, +.uk-tile-primary:not(.uk-preserve-color) .uk-heading-xlarge, +.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-xlarge, +.uk-card-primary.uk-card-body .uk-heading-xlarge, +.uk-card-primary > :not([class*='uk-card-media']) .uk-heading-xlarge, +.uk-card-secondary.uk-card-body .uk-heading-xlarge, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-heading-xlarge, +.uk-overlay-primary .uk-heading-xlarge, +.uk-offcanvas-bar .uk-heading-xlarge, +.uk-light .uk-heading-2xlarge, +.uk-section-primary:not(.uk-preserve-color) .uk-heading-2xlarge, +.uk-section-secondary:not(.uk-preserve-color) .uk-heading-2xlarge, +.uk-tile-primary:not(.uk-preserve-color) .uk-heading-2xlarge, +.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-2xlarge, +.uk-card-primary.uk-card-body .uk-heading-2xlarge, +.uk-card-primary > :not([class*='uk-card-media']) .uk-heading-2xlarge, +.uk-card-secondary.uk-card-body .uk-heading-2xlarge, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-heading-2xlarge, +.uk-overlay-primary .uk-heading-2xlarge, +.uk-offcanvas-bar .uk-heading-2xlarge { + color: #ccc; +} + +.uk-light hr, .uk-section-primary:not(.uk-preserve-color) hr, .uk-section-secondary:not(.uk-preserve-color) hr, .uk-tile-primary:not(.uk-preserve-color) hr, .uk-tile-secondary:not(.uk-preserve-color) hr, .uk-card-primary.uk-card-body hr, .uk-card-primary > :not([class*='uk-card-media']) hr, .uk-card-secondary.uk-card-body hr, .uk-card-secondary > :not([class*='uk-card-media']) hr, .uk-overlay-primary hr, .uk-offcanvas-bar hr, .uk-light .uk-hr, .uk-section-primary:not(.uk-preserve-color) .uk-hr, .uk-section-secondary:not(.uk-preserve-color) .uk-hr, .uk-tile-primary:not(.uk-preserve-color) .uk-hr, .uk-tile-secondary:not(.uk-preserve-color) .uk-hr, .uk-card-primary.uk-card-body .uk-hr, .uk-card-primary > :not([class*='uk-card-media']) .uk-hr, .uk-card-secondary.uk-card-body .uk-hr, .uk-card-secondary > :not([class*='uk-card-media']) .uk-hr, .uk-overlay-primary .uk-hr, .uk-offcanvas-bar .uk-hr { + border-top-color: rgba(255, 255, 255, 0.2); +} + +.uk-light a.uk-link-muted, .uk-section-primary:not(.uk-preserve-color) a.uk-link-muted, .uk-section-secondary:not(.uk-preserve-color) a.uk-link-muted, .uk-tile-primary:not(.uk-preserve-color) a.uk-link-muted, .uk-tile-secondary:not(.uk-preserve-color) a.uk-link-muted, .uk-card-primary.uk-card-body a.uk-link-muted, .uk-card-primary > :not([class*='uk-card-media']) a.uk-link-muted, .uk-card-secondary.uk-card-body a.uk-link-muted, .uk-card-secondary > :not([class*='uk-card-media']) a.uk-link-muted, .uk-overlay-primary a.uk-link-muted, .uk-offcanvas-bar a.uk-link-muted, +.uk-light .uk-link-muted a, +.uk-section-primary:not(.uk-preserve-color) .uk-link-muted a, +.uk-section-secondary:not(.uk-preserve-color) .uk-link-muted a, +.uk-tile-primary:not(.uk-preserve-color) .uk-link-muted a, +.uk-tile-secondary:not(.uk-preserve-color) .uk-link-muted a, +.uk-card-primary.uk-card-body .uk-link-muted a, +.uk-card-primary > :not([class*='uk-card-media']) .uk-link-muted a, +.uk-card-secondary.uk-card-body .uk-link-muted a, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-link-muted a, +.uk-overlay-primary .uk-link-muted a, +.uk-offcanvas-bar .uk-link-muted a { + color: rgba(255, 255, 255, 0.5); +} + +.uk-light a.uk-link-muted:hover, .uk-section-primary:not(.uk-preserve-color) a.uk-link-muted:hover, .uk-section-secondary:not(.uk-preserve-color) a.uk-link-muted:hover, .uk-tile-primary:not(.uk-preserve-color) a.uk-link-muted:hover, .uk-tile-secondary:not(.uk-preserve-color) a.uk-link-muted:hover, .uk-card-primary.uk-card-body a.uk-link-muted:hover, .uk-card-primary > :not([class*='uk-card-media']) a.uk-link-muted:hover, .uk-card-secondary.uk-card-body a.uk-link-muted:hover, .uk-card-secondary > :not([class*='uk-card-media']) a.uk-link-muted:hover, .uk-overlay-primary a.uk-link-muted:hover, .uk-offcanvas-bar a.uk-link-muted:hover, +.uk-light .uk-link-muted a:hover, +.uk-section-primary:not(.uk-preserve-color) .uk-link-muted a:hover, +.uk-section-secondary:not(.uk-preserve-color) .uk-link-muted a:hover, +.uk-tile-primary:not(.uk-preserve-color) .uk-link-muted a:hover, +.uk-tile-secondary:not(.uk-preserve-color) .uk-link-muted a:hover, +.uk-card-primary.uk-card-body .uk-link-muted a:hover, +.uk-card-primary > :not([class*='uk-card-media']) .uk-link-muted a:hover, +.uk-card-secondary.uk-card-body .uk-link-muted a:hover, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-link-muted a:hover, +.uk-overlay-primary .uk-link-muted a:hover, +.uk-offcanvas-bar .uk-link-muted a:hover { + color: #fff; +} + +.uk-light a.uk-link-text:hover, .uk-section-primary:not(.uk-preserve-color) a.uk-link-text:hover, .uk-section-secondary:not(.uk-preserve-color) a.uk-link-text:hover, .uk-tile-primary:not(.uk-preserve-color) a.uk-link-text:hover, .uk-tile-secondary:not(.uk-preserve-color) a.uk-link-text:hover, .uk-card-primary.uk-card-body a.uk-link-text:hover, .uk-card-primary > :not([class*='uk-card-media']) a.uk-link-text:hover, .uk-card-secondary.uk-card-body a.uk-link-text:hover, .uk-card-secondary > :not([class*='uk-card-media']) a.uk-link-text:hover, .uk-overlay-primary a.uk-link-text:hover, .uk-offcanvas-bar a.uk-link-text:hover, +.uk-light .uk-link-text a:hover, +.uk-section-primary:not(.uk-preserve-color) .uk-link-text a:hover, +.uk-section-secondary:not(.uk-preserve-color) .uk-link-text a:hover, +.uk-tile-primary:not(.uk-preserve-color) .uk-link-text a:hover, +.uk-tile-secondary:not(.uk-preserve-color) .uk-link-text a:hover, +.uk-card-primary.uk-card-body .uk-link-text a:hover, +.uk-card-primary > :not([class*='uk-card-media']) .uk-link-text a:hover, +.uk-card-secondary.uk-card-body .uk-link-text a:hover, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-link-text a:hover, +.uk-overlay-primary .uk-link-text a:hover, +.uk-offcanvas-bar .uk-link-text a:hover { + color: rgba(255, 255, 255, 0.5); +} + +.uk-light a.uk-link-heading:hover, .uk-section-primary:not(.uk-preserve-color) a.uk-link-heading:hover, .uk-section-secondary:not(.uk-preserve-color) a.uk-link-heading:hover, .uk-tile-primary:not(.uk-preserve-color) a.uk-link-heading:hover, .uk-tile-secondary:not(.uk-preserve-color) a.uk-link-heading:hover, .uk-card-primary.uk-card-body a.uk-link-heading:hover, .uk-card-primary > :not([class*='uk-card-media']) a.uk-link-heading:hover, .uk-card-secondary.uk-card-body a.uk-link-heading:hover, .uk-card-secondary > :not([class*='uk-card-media']) a.uk-link-heading:hover, .uk-overlay-primary a.uk-link-heading:hover, .uk-offcanvas-bar a.uk-link-heading:hover, +.uk-light .uk-link-heading a:hover, +.uk-section-primary:not(.uk-preserve-color) .uk-link-heading a:hover, +.uk-section-secondary:not(.uk-preserve-color) .uk-link-heading a:hover, +.uk-tile-primary:not(.uk-preserve-color) .uk-link-heading a:hover, +.uk-tile-secondary:not(.uk-preserve-color) .uk-link-heading a:hover, +.uk-card-primary.uk-card-body .uk-link-heading a:hover, +.uk-card-primary > :not([class*='uk-card-media']) .uk-link-heading a:hover, +.uk-card-secondary.uk-card-body .uk-link-heading a:hover, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-link-heading a:hover, +.uk-overlay-primary .uk-link-heading a:hover, +.uk-offcanvas-bar .uk-link-heading a:hover { + color: #fff; +} + +.uk-light .uk-heading-divider, .uk-section-primary:not(.uk-preserve-color) .uk-heading-divider, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-divider, .uk-tile-primary:not(.uk-preserve-color) .uk-heading-divider, .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-divider, .uk-card-primary.uk-card-body .uk-heading-divider, .uk-card-primary > :not([class*='uk-card-media']) .uk-heading-divider, .uk-card-secondary.uk-card-body .uk-heading-divider, .uk-card-secondary > :not([class*='uk-card-media']) .uk-heading-divider, .uk-overlay-primary .uk-heading-divider, .uk-offcanvas-bar .uk-heading-divider { + border-bottom-color: rgba(255, 255, 255, 0.2); +} + +.uk-light .uk-heading-bullet::before, .uk-section-primary:not(.uk-preserve-color) .uk-heading-bullet::before, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-bullet::before, .uk-tile-primary:not(.uk-preserve-color) .uk-heading-bullet::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-bullet::before, .uk-card-primary.uk-card-body .uk-heading-bullet::before, .uk-card-primary > :not([class*='uk-card-media']) .uk-heading-bullet::before, .uk-card-secondary.uk-card-body .uk-heading-bullet::before, .uk-card-secondary > :not([class*='uk-card-media']) .uk-heading-bullet::before, .uk-overlay-primary .uk-heading-bullet::before, .uk-offcanvas-bar .uk-heading-bullet::before { + border-left-color: rgba(255, 255, 255, 0.2); +} + +.uk-light .uk-heading-line > ::before, .uk-section-primary:not(.uk-preserve-color) .uk-heading-line > ::before, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-line > ::before, .uk-tile-primary:not(.uk-preserve-color) .uk-heading-line > ::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-line > ::before, .uk-card-primary.uk-card-body .uk-heading-line > ::before, .uk-card-primary > :not([class*='uk-card-media']) .uk-heading-line > ::before, .uk-card-secondary.uk-card-body .uk-heading-line > ::before, .uk-card-secondary > :not([class*='uk-card-media']) .uk-heading-line > ::before, .uk-overlay-primary .uk-heading-line > ::before, .uk-offcanvas-bar .uk-heading-line > ::before, +.uk-light .uk-heading-line > ::after, +.uk-section-primary:not(.uk-preserve-color) .uk-heading-line > ::after, +.uk-section-secondary:not(.uk-preserve-color) .uk-heading-line > ::after, +.uk-tile-primary:not(.uk-preserve-color) .uk-heading-line > ::after, +.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-line > ::after, +.uk-card-primary.uk-card-body .uk-heading-line > ::after, +.uk-card-primary > :not([class*='uk-card-media']) .uk-heading-line > ::after, +.uk-card-secondary.uk-card-body .uk-heading-line > ::after, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-heading-line > ::after, +.uk-overlay-primary .uk-heading-line > ::after, +.uk-offcanvas-bar .uk-heading-line > ::after { + border-bottom-color: rgba(255, 255, 255, 0.2); +} + +.uk-light .uk-divider-icon, .uk-section-primary:not(.uk-preserve-color) .uk-divider-icon, .uk-section-secondary:not(.uk-preserve-color) .uk-divider-icon, .uk-tile-primary:not(.uk-preserve-color) .uk-divider-icon, .uk-tile-secondary:not(.uk-preserve-color) .uk-divider-icon, .uk-card-primary.uk-card-body .uk-divider-icon, .uk-card-primary > :not([class*='uk-card-media']) .uk-divider-icon, .uk-card-secondary.uk-card-body .uk-divider-icon, .uk-card-secondary > :not([class*='uk-card-media']) .uk-divider-icon, .uk-overlay-primary .uk-divider-icon, .uk-offcanvas-bar .uk-divider-icon { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22rgba(255, 255, 255, 0.2)%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); +} + +.uk-light .uk-divider-icon::before, .uk-section-primary:not(.uk-preserve-color) .uk-divider-icon::before, .uk-section-secondary:not(.uk-preserve-color) .uk-divider-icon::before, .uk-tile-primary:not(.uk-preserve-color) .uk-divider-icon::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-divider-icon::before, .uk-card-primary.uk-card-body .uk-divider-icon::before, .uk-card-primary > :not([class*='uk-card-media']) .uk-divider-icon::before, .uk-card-secondary.uk-card-body .uk-divider-icon::before, .uk-card-secondary > :not([class*='uk-card-media']) .uk-divider-icon::before, .uk-overlay-primary .uk-divider-icon::before, .uk-offcanvas-bar .uk-divider-icon::before, +.uk-light .uk-divider-icon::after, +.uk-section-primary:not(.uk-preserve-color) .uk-divider-icon::after, +.uk-section-secondary:not(.uk-preserve-color) .uk-divider-icon::after, +.uk-tile-primary:not(.uk-preserve-color) .uk-divider-icon::after, +.uk-tile-secondary:not(.uk-preserve-color) .uk-divider-icon::after, +.uk-card-primary.uk-card-body .uk-divider-icon::after, +.uk-card-primary > :not([class*='uk-card-media']) .uk-divider-icon::after, +.uk-card-secondary.uk-card-body .uk-divider-icon::after, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-divider-icon::after, +.uk-overlay-primary .uk-divider-icon::after, +.uk-offcanvas-bar .uk-divider-icon::after { + border-bottom-color: rgba(255, 255, 255, 0.2); +} + +.uk-light .uk-divider-small::after, .uk-section-primary:not(.uk-preserve-color) .uk-divider-small::after, .uk-section-secondary:not(.uk-preserve-color) .uk-divider-small::after, .uk-tile-primary:not(.uk-preserve-color) .uk-divider-small::after, .uk-tile-secondary:not(.uk-preserve-color) .uk-divider-small::after, .uk-card-primary.uk-card-body .uk-divider-small::after, .uk-card-primary > :not([class*='uk-card-media']) .uk-divider-small::after, .uk-card-secondary.uk-card-body .uk-divider-small::after, .uk-card-secondary > :not([class*='uk-card-media']) .uk-divider-small::after, .uk-overlay-primary .uk-divider-small::after, .uk-offcanvas-bar .uk-divider-small::after { + border-top-color: rgba(255, 255, 255, 0.2); +} + +.uk-light .uk-divider-vertical::after, .uk-section-primary:not(.uk-preserve-color) .uk-divider-vertical::after, .uk-section-secondary:not(.uk-preserve-color) .uk-divider-vertical::after, .uk-tile-primary:not(.uk-preserve-color) .uk-divider-vertical::after, .uk-tile-secondary:not(.uk-preserve-color) .uk-divider-vertical::after, .uk-card-primary.uk-card-body .uk-divider-vertical::after, .uk-card-primary > :not([class*='uk-card-media']) .uk-divider-vertical::after, .uk-card-secondary.uk-card-body .uk-divider-vertical::after, .uk-card-secondary > :not([class*='uk-card-media']) .uk-divider-vertical::after, .uk-overlay-primary .uk-divider-vertical::after, .uk-offcanvas-bar .uk-divider-vertical::after { + border-left-color: rgba(255, 255, 255, 0.2); +} + +.uk-light .uk-list-divider > li:nth-child(n+2), .uk-section-primary:not(.uk-preserve-color) .uk-list-divider > li:nth-child(n+2), .uk-section-secondary:not(.uk-preserve-color) .uk-list-divider > li:nth-child(n+2), .uk-tile-primary:not(.uk-preserve-color) .uk-list-divider > li:nth-child(n+2), .uk-tile-secondary:not(.uk-preserve-color) .uk-list-divider > li:nth-child(n+2), .uk-card-primary.uk-card-body .uk-list-divider > li:nth-child(n+2), .uk-card-primary > :not([class*='uk-card-media']) .uk-list-divider > li:nth-child(n+2), .uk-card-secondary.uk-card-body .uk-list-divider > li:nth-child(n+2), .uk-card-secondary > :not([class*='uk-card-media']) .uk-list-divider > li:nth-child(n+2), .uk-overlay-primary .uk-list-divider > li:nth-child(n+2), .uk-offcanvas-bar .uk-list-divider > li:nth-child(n+2) { + border-top-color: rgba(255, 255, 255, 0.2); +} + +.uk-light .uk-list-striped > li:nth-of-type(odd), .uk-section-primary:not(.uk-preserve-color) .uk-list-striped > li:nth-of-type(odd), .uk-section-secondary:not(.uk-preserve-color) .uk-list-striped > li:nth-of-type(odd), .uk-tile-primary:not(.uk-preserve-color) .uk-list-striped > li:nth-of-type(odd), .uk-tile-secondary:not(.uk-preserve-color) .uk-list-striped > li:nth-of-type(odd), .uk-card-primary.uk-card-body .uk-list-striped > li:nth-of-type(odd), .uk-card-primary > :not([class*='uk-card-media']) .uk-list-striped > li:nth-of-type(odd), .uk-card-secondary.uk-card-body .uk-list-striped > li:nth-of-type(odd), .uk-card-secondary > :not([class*='uk-card-media']) .uk-list-striped > li:nth-of-type(odd), .uk-overlay-primary .uk-list-striped > li:nth-of-type(odd), .uk-offcanvas-bar .uk-list-striped > li:nth-of-type(odd) { + background-color: rgba(255, 255, 255, 0.1); +} + +.uk-light .uk-list-bullet > li::before, .uk-section-primary:not(.uk-preserve-color) .uk-list-bullet > li::before, .uk-section-secondary:not(.uk-preserve-color) .uk-list-bullet > li::before, .uk-tile-primary:not(.uk-preserve-color) .uk-list-bullet > li::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-list-bullet > li::before, .uk-card-primary.uk-card-body .uk-list-bullet > li::before, .uk-card-primary > :not([class*='uk-card-media']) .uk-list-bullet > li::before, .uk-card-secondary.uk-card-body .uk-list-bullet > li::before, .uk-card-secondary > :not([class*='uk-card-media']) .uk-list-bullet > li::before, .uk-overlay-primary .uk-list-bullet > li::before, .uk-offcanvas-bar .uk-list-bullet > li::before { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23fff%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E"); +} + +.uk-light .uk-icon-link, .uk-section-primary:not(.uk-preserve-color) .uk-icon-link, .uk-section-secondary:not(.uk-preserve-color) .uk-icon-link, .uk-tile-primary:not(.uk-preserve-color) .uk-icon-link, .uk-tile-secondary:not(.uk-preserve-color) .uk-icon-link, .uk-card-primary.uk-card-body .uk-icon-link, .uk-card-primary > :not([class*='uk-card-media']) .uk-icon-link, .uk-card-secondary.uk-card-body .uk-icon-link, .uk-card-secondary > :not([class*='uk-card-media']) .uk-icon-link, .uk-overlay-primary .uk-icon-link, .uk-offcanvas-bar .uk-icon-link { + color: rgba(255, 255, 255, 0.5); +} + +.uk-light .uk-icon-link:hover, .uk-section-primary:not(.uk-preserve-color) .uk-icon-link:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-icon-link:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-icon-link:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-icon-link:hover, .uk-card-primary.uk-card-body .uk-icon-link:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-icon-link:hover, .uk-card-secondary.uk-card-body .uk-icon-link:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-icon-link:hover, .uk-overlay-primary .uk-icon-link:hover, .uk-offcanvas-bar .uk-icon-link:hover, +.uk-light .uk-icon-link:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-icon-link:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-icon-link:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-icon-link:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-icon-link:focus, +.uk-card-primary.uk-card-body .uk-icon-link:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-icon-link:focus, +.uk-card-secondary.uk-card-body .uk-icon-link:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-icon-link:focus, +.uk-overlay-primary .uk-icon-link:focus, +.uk-offcanvas-bar .uk-icon-link:focus { + color: #fff; +} + +.uk-light .uk-icon-link:active, .uk-section-primary:not(.uk-preserve-color) .uk-icon-link:active, .uk-section-secondary:not(.uk-preserve-color) .uk-icon-link:active, .uk-tile-primary:not(.uk-preserve-color) .uk-icon-link:active, .uk-tile-secondary:not(.uk-preserve-color) .uk-icon-link:active, .uk-card-primary.uk-card-body .uk-icon-link:active, .uk-card-primary > :not([class*='uk-card-media']) .uk-icon-link:active, .uk-card-secondary.uk-card-body .uk-icon-link:active, .uk-card-secondary > :not([class*='uk-card-media']) .uk-icon-link:active, .uk-overlay-primary .uk-icon-link:active, .uk-offcanvas-bar .uk-icon-link:active, +.uk-light .uk-active > .uk-icon-link, +.uk-section-primary:not(.uk-preserve-color) .uk-active > .uk-icon-link, +.uk-section-secondary:not(.uk-preserve-color) .uk-active > .uk-icon-link, +.uk-tile-primary:not(.uk-preserve-color) .uk-active > .uk-icon-link, +.uk-tile-secondary:not(.uk-preserve-color) .uk-active > .uk-icon-link, +.uk-card-primary.uk-card-body .uk-active > .uk-icon-link, +.uk-card-primary > :not([class*='uk-card-media']) .uk-active > .uk-icon-link, +.uk-card-secondary.uk-card-body .uk-active > .uk-icon-link, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-active > .uk-icon-link, +.uk-overlay-primary .uk-active > .uk-icon-link, +.uk-offcanvas-bar .uk-active > .uk-icon-link { + color: #fff; +} + +.uk-light .uk-icon-button, .uk-section-primary:not(.uk-preserve-color) .uk-icon-button, .uk-section-secondary:not(.uk-preserve-color) .uk-icon-button, .uk-tile-primary:not(.uk-preserve-color) .uk-icon-button, .uk-tile-secondary:not(.uk-preserve-color) .uk-icon-button, .uk-card-primary.uk-card-body .uk-icon-button, .uk-card-primary > :not([class*='uk-card-media']) .uk-icon-button, .uk-card-secondary.uk-card-body .uk-icon-button, .uk-card-secondary > :not([class*='uk-card-media']) .uk-icon-button, .uk-overlay-primary .uk-icon-button, .uk-offcanvas-bar .uk-icon-button { + background-color: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.5); +} + +.uk-light .uk-icon-button:hover, .uk-section-primary:not(.uk-preserve-color) .uk-icon-button:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-icon-button:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-icon-button:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-icon-button:hover, .uk-card-primary.uk-card-body .uk-icon-button:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-icon-button:hover, .uk-card-secondary.uk-card-body .uk-icon-button:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-icon-button:hover, .uk-overlay-primary .uk-icon-button:hover, .uk-offcanvas-bar .uk-icon-button:hover, +.uk-light .uk-icon-button:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-icon-button:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-icon-button:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-icon-button:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-icon-button:focus, +.uk-card-primary.uk-card-body .uk-icon-button:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-icon-button:focus, +.uk-card-secondary.uk-card-body .uk-icon-button:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-icon-button:focus, +.uk-overlay-primary .uk-icon-button:focus, +.uk-offcanvas-bar .uk-icon-button:focus { + background-color: rgba(242, 242, 242, 0.1); + color: #fff; } -textarea { - overflow: auto; +.uk-light .uk-icon-button:active, .uk-section-primary:not(.uk-preserve-color) .uk-icon-button:active, .uk-section-secondary:not(.uk-preserve-color) .uk-icon-button:active, .uk-tile-primary:not(.uk-preserve-color) .uk-icon-button:active, .uk-tile-secondary:not(.uk-preserve-color) .uk-icon-button:active, .uk-card-primary.uk-card-body .uk-icon-button:active, .uk-card-primary > :not([class*='uk-card-media']) .uk-icon-button:active, .uk-card-secondary.uk-card-body .uk-icon-button:active, .uk-card-secondary > :not([class*='uk-card-media']) .uk-icon-button:active, .uk-overlay-primary .uk-icon-button:active, .uk-offcanvas-bar .uk-icon-button:active { + background-color: rgba(230, 230, 230, 0.1); + color: #fff; } -optgroup { - font-weight: bold; +.uk-light .uk-input, .uk-section-primary:not(.uk-preserve-color) .uk-input, .uk-section-secondary:not(.uk-preserve-color) .uk-input, .uk-tile-primary:not(.uk-preserve-color) .uk-input, .uk-tile-secondary:not(.uk-preserve-color) .uk-input, .uk-card-primary.uk-card-body .uk-input, .uk-card-primary > :not([class*='uk-card-media']) .uk-input, .uk-card-secondary.uk-card-body .uk-input, .uk-card-secondary > :not([class*='uk-card-media']) .uk-input, .uk-overlay-primary .uk-input, .uk-offcanvas-bar .uk-input, +.uk-light .uk-select, +.uk-section-primary:not(.uk-preserve-color) .uk-select, +.uk-section-secondary:not(.uk-preserve-color) .uk-select, +.uk-tile-primary:not(.uk-preserve-color) .uk-select, +.uk-tile-secondary:not(.uk-preserve-color) .uk-select, +.uk-card-primary.uk-card-body .uk-select, +.uk-card-primary > :not([class*='uk-card-media']) .uk-select, +.uk-card-secondary.uk-card-body .uk-select, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-select, +.uk-overlay-primary .uk-select, +.uk-offcanvas-bar .uk-select, +.uk-light .uk-textarea, +.uk-section-primary:not(.uk-preserve-color) .uk-textarea, +.uk-section-secondary:not(.uk-preserve-color) .uk-textarea, +.uk-tile-primary:not(.uk-preserve-color) .uk-textarea, +.uk-tile-secondary:not(.uk-preserve-color) .uk-textarea, +.uk-card-primary.uk-card-body .uk-textarea, +.uk-card-primary > :not([class*='uk-card-media']) .uk-textarea, +.uk-card-secondary.uk-card-body .uk-textarea, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-textarea, +.uk-overlay-primary .uk-textarea, +.uk-offcanvas-bar .uk-textarea { + background-color: rgba(255, 255, 255, 0.1); + color: #fff; + background-clip: padding-box; +} + +.uk-light .uk-input:focus, .uk-section-primary:not(.uk-preserve-color) .uk-input:focus, .uk-section-secondary:not(.uk-preserve-color) .uk-input:focus, .uk-tile-primary:not(.uk-preserve-color) .uk-input:focus, .uk-tile-secondary:not(.uk-preserve-color) .uk-input:focus, .uk-card-primary.uk-card-body .uk-input:focus, .uk-card-primary > :not([class*='uk-card-media']) .uk-input:focus, .uk-card-secondary.uk-card-body .uk-input:focus, .uk-card-secondary > :not([class*='uk-card-media']) .uk-input:focus, .uk-overlay-primary .uk-input:focus, .uk-offcanvas-bar .uk-input:focus, +.uk-light .uk-select:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-select:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-select:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-select:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-select:focus, +.uk-card-primary.uk-card-body .uk-select:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-select:focus, +.uk-card-secondary.uk-card-body .uk-select:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-select:focus, +.uk-overlay-primary .uk-select:focus, +.uk-offcanvas-bar .uk-select:focus, +.uk-light .uk-textarea:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-textarea:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-textarea:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-textarea:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-textarea:focus, +.uk-card-primary.uk-card-body .uk-textarea:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-textarea:focus, +.uk-card-secondary.uk-card-body .uk-textarea:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-textarea:focus, +.uk-overlay-primary .uk-textarea:focus, +.uk-offcanvas-bar .uk-textarea:focus { + background-color: rgba(255, 255, 255, 0.1); + color: #fff; +} + +.uk-light .uk-input::-ms-input-placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-input::-ms-input-placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-input::-ms-input-placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-input::-ms-input-placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-input::-ms-input-placeholder, .uk-card-primary.uk-card-body .uk-input::-ms-input-placeholder, .uk-card-primary > :not([class*='uk-card-media']) .uk-input::-ms-input-placeholder, .uk-card-secondary.uk-card-body .uk-input::-ms-input-placeholder, .uk-card-secondary > :not([class*='uk-card-media']) .uk-input::-ms-input-placeholder, .uk-overlay-primary .uk-input::-ms-input-placeholder, .uk-offcanvas-bar .uk-input::-ms-input-placeholder { + color: rgba(255, 255, 255, 0.5) !important; +} + +.uk-light .uk-input::-webkit-input-placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-input::-webkit-input-placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-input::-webkit-input-placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-input::-webkit-input-placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-input::-webkit-input-placeholder, .uk-card-primary.uk-card-body .uk-input::-webkit-input-placeholder, .uk-card-primary > :not([class*='uk-card-media']) .uk-input::-webkit-input-placeholder, .uk-card-secondary.uk-card-body .uk-input::-webkit-input-placeholder, .uk-card-secondary > :not([class*='uk-card-media']) .uk-input::-webkit-input-placeholder, .uk-overlay-primary .uk-input::-webkit-input-placeholder, .uk-offcanvas-bar .uk-input::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.5); +} + +.uk-light .uk-input:-ms-input-placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-input:-ms-input-placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-input:-ms-input-placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-input:-ms-input-placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-input:-ms-input-placeholder, .uk-card-primary.uk-card-body .uk-input:-ms-input-placeholder, .uk-card-primary > :not([class*='uk-card-media']) .uk-input:-ms-input-placeholder, .uk-card-secondary.uk-card-body .uk-input:-ms-input-placeholder, .uk-card-secondary > :not([class*='uk-card-media']) .uk-input:-ms-input-placeholder, .uk-overlay-primary .uk-input:-ms-input-placeholder, .uk-offcanvas-bar .uk-input:-ms-input-placeholder { + color: rgba(255, 255, 255, 0.5); +} + +.uk-light .uk-input::placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-input::placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-input::placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-input::placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-input::placeholder, .uk-card-primary.uk-card-body .uk-input::placeholder, .uk-card-primary > :not([class*='uk-card-media']) .uk-input::placeholder, .uk-card-secondary.uk-card-body .uk-input::placeholder, .uk-card-secondary > :not([class*='uk-card-media']) .uk-input::placeholder, .uk-overlay-primary .uk-input::placeholder, .uk-offcanvas-bar .uk-input::placeholder { + color: rgba(255, 255, 255, 0.5); +} + +.uk-light .uk-textarea::-ms-input-placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-textarea::-ms-input-placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-textarea::-ms-input-placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-textarea::-ms-input-placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-textarea::-ms-input-placeholder, .uk-card-primary.uk-card-body .uk-textarea::-ms-input-placeholder, .uk-card-primary > :not([class*='uk-card-media']) .uk-textarea::-ms-input-placeholder, .uk-card-secondary.uk-card-body .uk-textarea::-ms-input-placeholder, .uk-card-secondary > :not([class*='uk-card-media']) .uk-textarea::-ms-input-placeholder, .uk-overlay-primary .uk-textarea::-ms-input-placeholder, .uk-offcanvas-bar .uk-textarea::-ms-input-placeholder { + color: rgba(255, 255, 255, 0.5) !important; +} + +.uk-light .uk-textarea::-webkit-input-placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-textarea::-webkit-input-placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-textarea::-webkit-input-placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-textarea::-webkit-input-placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-textarea::-webkit-input-placeholder, .uk-card-primary.uk-card-body .uk-textarea::-webkit-input-placeholder, .uk-card-primary > :not([class*='uk-card-media']) .uk-textarea::-webkit-input-placeholder, .uk-card-secondary.uk-card-body .uk-textarea::-webkit-input-placeholder, .uk-card-secondary > :not([class*='uk-card-media']) .uk-textarea::-webkit-input-placeholder, .uk-overlay-primary .uk-textarea::-webkit-input-placeholder, .uk-offcanvas-bar .uk-textarea::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.5); +} + +.uk-light .uk-textarea:-ms-input-placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-textarea:-ms-input-placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-textarea:-ms-input-placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-textarea:-ms-input-placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-textarea:-ms-input-placeholder, .uk-card-primary.uk-card-body .uk-textarea:-ms-input-placeholder, .uk-card-primary > :not([class*='uk-card-media']) .uk-textarea:-ms-input-placeholder, .uk-card-secondary.uk-card-body .uk-textarea:-ms-input-placeholder, .uk-card-secondary > :not([class*='uk-card-media']) .uk-textarea:-ms-input-placeholder, .uk-overlay-primary .uk-textarea:-ms-input-placeholder, .uk-offcanvas-bar .uk-textarea:-ms-input-placeholder { + color: rgba(255, 255, 255, 0.5); +} + +.uk-light .uk-textarea::placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-textarea::placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-textarea::placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-textarea::placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-textarea::placeholder, .uk-card-primary.uk-card-body .uk-textarea::placeholder, .uk-card-primary > :not([class*='uk-card-media']) .uk-textarea::placeholder, .uk-card-secondary.uk-card-body .uk-textarea::placeholder, .uk-card-secondary > :not([class*='uk-card-media']) .uk-textarea::placeholder, .uk-overlay-primary .uk-textarea::placeholder, .uk-offcanvas-bar .uk-textarea::placeholder { + color: rgba(255, 255, 255, 0.5); +} + +.uk-light .uk-select:not([multiple]):not([size]), .uk-section-primary:not(.uk-preserve-color) .uk-select:not([multiple]):not([size]), .uk-section-secondary:not(.uk-preserve-color) .uk-select:not([multiple]):not([size]), .uk-tile-primary:not(.uk-preserve-color) .uk-select:not([multiple]):not([size]), .uk-tile-secondary:not(.uk-preserve-color) .uk-select:not([multiple]):not([size]), .uk-card-primary.uk-card-body .uk-select:not([multiple]):not([size]), .uk-card-primary > :not([class*='uk-card-media']) .uk-select:not([multiple]):not([size]), .uk-card-secondary.uk-card-body .uk-select:not([multiple]):not([size]), .uk-card-secondary > :not([class*='uk-card-media']) .uk-select:not([multiple]):not([size]), .uk-overlay-primary .uk-select:not([multiple]):not([size]), .uk-offcanvas-bar .uk-select:not([multiple]):not([size]) { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); +} + +.uk-light .uk-radio, .uk-section-primary:not(.uk-preserve-color) .uk-radio, .uk-section-secondary:not(.uk-preserve-color) .uk-radio, .uk-tile-primary:not(.uk-preserve-color) .uk-radio, .uk-tile-secondary:not(.uk-preserve-color) .uk-radio, .uk-card-primary.uk-card-body .uk-radio, .uk-card-primary > :not([class*='uk-card-media']) .uk-radio, .uk-card-secondary.uk-card-body .uk-radio, .uk-card-secondary > :not([class*='uk-card-media']) .uk-radio, .uk-overlay-primary .uk-radio, .uk-offcanvas-bar .uk-radio, +.uk-light .uk-checkbox, +.uk-section-primary:not(.uk-preserve-color) .uk-checkbox, +.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox, +.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox, +.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox, +.uk-card-primary.uk-card-body .uk-checkbox, +.uk-card-primary > :not([class*='uk-card-media']) .uk-checkbox, +.uk-card-secondary.uk-card-body .uk-checkbox, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-checkbox, +.uk-overlay-primary .uk-checkbox, +.uk-offcanvas-bar .uk-checkbox { + background-color: rgba(242, 242, 242, 0.1); +} + +.uk-light .uk-radio:checked, .uk-section-primary:not(.uk-preserve-color) .uk-radio:checked, .uk-section-secondary:not(.uk-preserve-color) .uk-radio:checked, .uk-tile-primary:not(.uk-preserve-color) .uk-radio:checked, .uk-tile-secondary:not(.uk-preserve-color) .uk-radio:checked, .uk-card-primary.uk-card-body .uk-radio:checked, .uk-card-primary > :not([class*='uk-card-media']) .uk-radio:checked, .uk-card-secondary.uk-card-body .uk-radio:checked, .uk-card-secondary > :not([class*='uk-card-media']) .uk-radio:checked, .uk-overlay-primary .uk-radio:checked, .uk-offcanvas-bar .uk-radio:checked, +.uk-light .uk-checkbox:checked, +.uk-section-primary:not(.uk-preserve-color) .uk-checkbox:checked, +.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:checked, +.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:checked, +.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:checked, +.uk-card-primary.uk-card-body .uk-checkbox:checked, +.uk-card-primary > :not([class*='uk-card-media']) .uk-checkbox:checked, +.uk-card-secondary.uk-card-body .uk-checkbox:checked, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-checkbox:checked, +.uk-overlay-primary .uk-checkbox:checked, +.uk-offcanvas-bar .uk-checkbox:checked, +.uk-light .uk-checkbox:indeterminate, +.uk-section-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate, +.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate, +.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate, +.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate, +.uk-card-primary.uk-card-body .uk-checkbox:indeterminate, +.uk-card-primary > :not([class*='uk-card-media']) .uk-checkbox:indeterminate, +.uk-card-secondary.uk-card-body .uk-checkbox:indeterminate, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-checkbox:indeterminate, +.uk-overlay-primary .uk-checkbox:indeterminate, +.uk-offcanvas-bar .uk-checkbox:indeterminate { + background-color: #fff; +} + +.uk-light .uk-radio:checked:focus, .uk-section-primary:not(.uk-preserve-color) .uk-radio:checked:focus, .uk-section-secondary:not(.uk-preserve-color) .uk-radio:checked:focus, .uk-tile-primary:not(.uk-preserve-color) .uk-radio:checked:focus, .uk-tile-secondary:not(.uk-preserve-color) .uk-radio:checked:focus, .uk-card-primary.uk-card-body .uk-radio:checked:focus, .uk-card-primary > :not([class*='uk-card-media']) .uk-radio:checked:focus, .uk-card-secondary.uk-card-body .uk-radio:checked:focus, .uk-card-secondary > :not([class*='uk-card-media']) .uk-radio:checked:focus, .uk-overlay-primary .uk-radio:checked:focus, .uk-offcanvas-bar .uk-radio:checked:focus, +.uk-light .uk-checkbox:checked:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-checkbox:checked:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:checked:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:checked:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:checked:focus, +.uk-card-primary.uk-card-body .uk-checkbox:checked:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-checkbox:checked:focus, +.uk-card-secondary.uk-card-body .uk-checkbox:checked:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-checkbox:checked:focus, +.uk-overlay-primary .uk-checkbox:checked:focus, +.uk-offcanvas-bar .uk-checkbox:checked:focus, +.uk-light .uk-checkbox:indeterminate:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate:focus, +.uk-card-primary.uk-card-body .uk-checkbox:indeterminate:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-checkbox:indeterminate:focus, +.uk-card-secondary.uk-card-body .uk-checkbox:indeterminate:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-checkbox:indeterminate:focus, +.uk-overlay-primary .uk-checkbox:indeterminate:focus, +.uk-offcanvas-bar .uk-checkbox:indeterminate:focus { + background-color: #e6e6e6; } -table { - border-collapse: collapse; - border-spacing: 0; +.uk-light .uk-radio:checked, .uk-section-primary:not(.uk-preserve-color) .uk-radio:checked, .uk-section-secondary:not(.uk-preserve-color) .uk-radio:checked, .uk-tile-primary:not(.uk-preserve-color) .uk-radio:checked, .uk-tile-secondary:not(.uk-preserve-color) .uk-radio:checked, .uk-card-primary.uk-card-body .uk-radio:checked, .uk-card-primary > :not([class*='uk-card-media']) .uk-radio:checked, .uk-card-secondary.uk-card-body .uk-radio:checked, .uk-card-secondary > :not([class*='uk-card-media']) .uk-radio:checked, .uk-overlay-primary .uk-radio:checked, .uk-offcanvas-bar .uk-radio:checked { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23666%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E"); +} + + +.uk-light .uk-checkbox:checked, +.uk-section-primary:not(.uk-preserve-color) .uk-checkbox:checked, +.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:checked, +.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:checked, +.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:checked, +.uk-card-primary.uk-card-body .uk-checkbox:checked, +.uk-card-primary > :not([class*='uk-card-media']) .uk-checkbox:checked, +.uk-card-secondary.uk-card-body .uk-checkbox:checked, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-checkbox:checked, +.uk-overlay-primary .uk-checkbox:checked, +.uk-offcanvas-bar .uk-checkbox:checked { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); +} + + +.uk-light .uk-checkbox:indeterminate, +.uk-section-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate, +.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate, +.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate, +.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate, +.uk-card-primary.uk-card-body .uk-checkbox:indeterminate, +.uk-card-primary > :not([class*='uk-card-media']) .uk-checkbox:indeterminate, +.uk-card-secondary.uk-card-body .uk-checkbox:indeterminate, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-checkbox:indeterminate, +.uk-overlay-primary .uk-checkbox:indeterminate, +.uk-offcanvas-bar .uk-checkbox:indeterminate { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E"); +} + +.uk-light .uk-form-icon, .uk-section-primary:not(.uk-preserve-color) .uk-form-icon, .uk-section-secondary:not(.uk-preserve-color) .uk-form-icon, .uk-tile-primary:not(.uk-preserve-color) .uk-form-icon, .uk-tile-secondary:not(.uk-preserve-color) .uk-form-icon, .uk-card-primary.uk-card-body .uk-form-icon, .uk-card-primary > :not([class*='uk-card-media']) .uk-form-icon, .uk-card-secondary.uk-card-body .uk-form-icon, .uk-card-secondary > :not([class*='uk-card-media']) .uk-form-icon, .uk-overlay-primary .uk-form-icon, .uk-offcanvas-bar .uk-form-icon { + color: rgba(255, 255, 255, 0.5); +} + +.uk-light .uk-form-icon:hover, .uk-section-primary:not(.uk-preserve-color) .uk-form-icon:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-form-icon:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-form-icon:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-form-icon:hover, .uk-card-primary.uk-card-body .uk-form-icon:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-form-icon:hover, .uk-card-secondary.uk-card-body .uk-form-icon:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-form-icon:hover, .uk-overlay-primary .uk-form-icon:hover, .uk-offcanvas-bar .uk-form-icon:hover { + color: #fff; +} + +.uk-light .uk-button-default, .uk-section-primary:not(.uk-preserve-color) .uk-button-default, .uk-section-secondary:not(.uk-preserve-color) .uk-button-default, .uk-tile-primary:not(.uk-preserve-color) .uk-button-default, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-default, .uk-card-primary.uk-card-body .uk-button-default, .uk-card-primary > :not([class*='uk-card-media']) .uk-button-default, .uk-card-secondary.uk-card-body .uk-button-default, .uk-card-secondary > :not([class*='uk-card-media']) .uk-button-default, .uk-overlay-primary .uk-button-default, .uk-offcanvas-bar .uk-button-default { + background-color: transparent; + color: #ccc; +} + +.uk-light .uk-button-default:hover, .uk-section-primary:not(.uk-preserve-color) .uk-button-default:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-button-default:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-button-default:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-default:hover, .uk-card-primary.uk-card-body .uk-button-default:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-button-default:hover, .uk-card-secondary.uk-card-body .uk-button-default:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-button-default:hover, .uk-overlay-primary .uk-button-default:hover, .uk-offcanvas-bar .uk-button-default:hover, +.uk-light .uk-button-default:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-button-default:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-button-default:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-button-default:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-button-default:focus, +.uk-card-primary.uk-card-body .uk-button-default:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-button-default:focus, +.uk-card-secondary.uk-card-body .uk-button-default:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-button-default:focus, +.uk-overlay-primary .uk-button-default:focus, +.uk-offcanvas-bar .uk-button-default:focus { + background-color: transparent; + color: #ccc; +} + +.uk-light .uk-button-default:active, .uk-section-primary:not(.uk-preserve-color) .uk-button-default:active, .uk-section-secondary:not(.uk-preserve-color) .uk-button-default:active, .uk-tile-primary:not(.uk-preserve-color) .uk-button-default:active, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-default:active, .uk-card-primary.uk-card-body .uk-button-default:active, .uk-card-primary > :not([class*='uk-card-media']) .uk-button-default:active, .uk-card-secondary.uk-card-body .uk-button-default:active, .uk-card-secondary > :not([class*='uk-card-media']) .uk-button-default:active, .uk-overlay-primary .uk-button-default:active, .uk-offcanvas-bar .uk-button-default:active, +.uk-light .uk-button-default.uk-active, +.uk-section-primary:not(.uk-preserve-color) .uk-button-default.uk-active, +.uk-section-secondary:not(.uk-preserve-color) .uk-button-default.uk-active, +.uk-tile-primary:not(.uk-preserve-color) .uk-button-default.uk-active, +.uk-tile-secondary:not(.uk-preserve-color) .uk-button-default.uk-active, +.uk-card-primary.uk-card-body .uk-button-default.uk-active, +.uk-card-primary > :not([class*='uk-card-media']) .uk-button-default.uk-active, +.uk-card-secondary.uk-card-body .uk-button-default.uk-active, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-button-default.uk-active, +.uk-overlay-primary .uk-button-default.uk-active, +.uk-offcanvas-bar .uk-button-default.uk-active { + background-color: transparent; + color: #ccc; } -td, -th { - padding: 0; +.uk-light .uk-button-primary, .uk-section-primary:not(.uk-preserve-color) .uk-button-primary, .uk-section-secondary:not(.uk-preserve-color) .uk-button-primary, .uk-tile-primary:not(.uk-preserve-color) .uk-button-primary, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary, .uk-card-primary.uk-card-body .uk-button-primary, .uk-card-primary > :not([class*='uk-card-media']) .uk-button-primary, .uk-card-secondary.uk-card-body .uk-button-primary, .uk-card-secondary > :not([class*='uk-card-media']) .uk-button-primary, .uk-overlay-primary .uk-button-primary, .uk-offcanvas-bar .uk-button-primary { + background-color: #fff; + color: #666; } -/*-------------------------------------------------------------- -# Typography ---------------------------------------------------------------*/ -body, -button, -input, -select, -optgroup, -textarea { - color: #444; - font-family: "Noto Serif", serif; - font-size: 16px; - font-size: 1rem; - line-height: 1.8; +.uk-light .uk-button-primary:hover, .uk-section-primary:not(.uk-preserve-color) .uk-button-primary:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-button-primary:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-button-primary:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary:hover, .uk-card-primary.uk-card-body .uk-button-primary:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-button-primary:hover, .uk-card-secondary.uk-card-body .uk-button-primary:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-button-primary:hover, .uk-overlay-primary .uk-button-primary:hover, .uk-offcanvas-bar .uk-button-primary:hover, +.uk-light .uk-button-primary:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-button-primary:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-button-primary:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary:focus, +.uk-card-primary.uk-card-body .uk-button-primary:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-button-primary:focus, +.uk-card-secondary.uk-card-body .uk-button-primary:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-button-primary:focus, +.uk-overlay-primary .uk-button-primary:focus, +.uk-offcanvas-bar .uk-button-primary:focus { + background-color: #f2f2f2; + color: #666; } -h1, h2, h3, h4, h5, h6 { - color: #32373c; - clear: both; +.uk-light .uk-button-primary:active, .uk-section-primary:not(.uk-preserve-color) .uk-button-primary:active, .uk-section-secondary:not(.uk-preserve-color) .uk-button-primary:active, .uk-tile-primary:not(.uk-preserve-color) .uk-button-primary:active, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary:active, .uk-card-primary.uk-card-body .uk-button-primary:active, .uk-card-primary > :not([class*='uk-card-media']) .uk-button-primary:active, .uk-card-secondary.uk-card-body .uk-button-primary:active, .uk-card-secondary > :not([class*='uk-card-media']) .uk-button-primary:active, .uk-overlay-primary .uk-button-primary:active, .uk-offcanvas-bar .uk-button-primary:active, +.uk-light .uk-button-primary.uk-active, +.uk-section-primary:not(.uk-preserve-color) .uk-button-primary.uk-active, +.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary.uk-active, +.uk-tile-primary:not(.uk-preserve-color) .uk-button-primary.uk-active, +.uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary.uk-active, +.uk-card-primary.uk-card-body .uk-button-primary.uk-active, +.uk-card-primary > :not([class*='uk-card-media']) .uk-button-primary.uk-active, +.uk-card-secondary.uk-card-body .uk-button-primary.uk-active, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-button-primary.uk-active, +.uk-overlay-primary .uk-button-primary.uk-active, +.uk-offcanvas-bar .uk-button-primary.uk-active { + background-color: #e6e6e6; + color: #666; } -.entry-header h1.entry-title { - font-size: 2.44em; - line-height: 1.4; - margin: 1em 0; +.uk-light .uk-button-secondary, .uk-section-primary:not(.uk-preserve-color) .uk-button-secondary, .uk-section-secondary:not(.uk-preserve-color) .uk-button-secondary, .uk-tile-primary:not(.uk-preserve-color) .uk-button-secondary, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-secondary, .uk-card-primary.uk-card-body .uk-button-secondary, .uk-card-primary > :not([class*='uk-card-media']) .uk-button-secondary, .uk-card-secondary.uk-card-body .uk-button-secondary, .uk-card-secondary > :not([class*='uk-card-media']) .uk-button-secondary, .uk-overlay-primary .uk-button-secondary, .uk-offcanvas-bar .uk-button-secondary { + background-color: #fff; + color: #666; } -dfn, cite, em, i { - font-style: italic; +.uk-light .uk-button-secondary:hover, .uk-section-primary:not(.uk-preserve-color) .uk-button-secondary:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-button-secondary:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-button-secondary:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-secondary:hover, .uk-card-primary.uk-card-body .uk-button-secondary:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-button-secondary:hover, .uk-card-secondary.uk-card-body .uk-button-secondary:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-button-secondary:hover, .uk-overlay-primary .uk-button-secondary:hover, .uk-offcanvas-bar .uk-button-secondary:hover, +.uk-light .uk-button-secondary:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-button-secondary:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-button-secondary:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-button-secondary:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-button-secondary:focus, +.uk-card-primary.uk-card-body .uk-button-secondary:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-button-secondary:focus, +.uk-card-secondary.uk-card-body .uk-button-secondary:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-button-secondary:focus, +.uk-overlay-primary .uk-button-secondary:focus, +.uk-offcanvas-bar .uk-button-secondary:focus { + background-color: #f2f2f2; + color: #666; } -blockquote { - margin: 0 1.5em; +.uk-light .uk-button-secondary:active, .uk-section-primary:not(.uk-preserve-color) .uk-button-secondary:active, .uk-section-secondary:not(.uk-preserve-color) .uk-button-secondary:active, .uk-tile-primary:not(.uk-preserve-color) .uk-button-secondary:active, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-secondary:active, .uk-card-primary.uk-card-body .uk-button-secondary:active, .uk-card-primary > :not([class*='uk-card-media']) .uk-button-secondary:active, .uk-card-secondary.uk-card-body .uk-button-secondary:active, .uk-card-secondary > :not([class*='uk-card-media']) .uk-button-secondary:active, .uk-overlay-primary .uk-button-secondary:active, .uk-offcanvas-bar .uk-button-secondary:active, +.uk-light .uk-button-secondary.uk-active, +.uk-section-primary:not(.uk-preserve-color) .uk-button-secondary.uk-active, +.uk-section-secondary:not(.uk-preserve-color) .uk-button-secondary.uk-active, +.uk-tile-primary:not(.uk-preserve-color) .uk-button-secondary.uk-active, +.uk-tile-secondary:not(.uk-preserve-color) .uk-button-secondary.uk-active, +.uk-card-primary.uk-card-body .uk-button-secondary.uk-active, +.uk-card-primary > :not([class*='uk-card-media']) .uk-button-secondary.uk-active, +.uk-card-secondary.uk-card-body .uk-button-secondary.uk-active, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-button-secondary.uk-active, +.uk-overlay-primary .uk-button-secondary.uk-active, +.uk-offcanvas-bar .uk-button-secondary.uk-active { + background-color: #e6e6e6; + color: #666; } -address { - margin: 0 0 1.5em; +.uk-light .uk-button-text, .uk-section-primary:not(.uk-preserve-color) .uk-button-text, .uk-section-secondary:not(.uk-preserve-color) .uk-button-text, .uk-tile-primary:not(.uk-preserve-color) .uk-button-text, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-text, .uk-card-primary.uk-card-body .uk-button-text, .uk-card-primary > :not([class*='uk-card-media']) .uk-button-text, .uk-card-secondary.uk-card-body .uk-button-text, .uk-card-secondary > :not([class*='uk-card-media']) .uk-button-text, .uk-overlay-primary .uk-button-text, .uk-offcanvas-bar .uk-button-text { + color: #ccc; } -pre { - background: #eee; - font-family: "Courier 10 Pitch", Courier, monospace; - font-size: 15px; - font-size: 0.9375rem; - line-height: 1.6; - margin-bottom: 1.6em; - max-width: 100%; - overflow: auto; - padding: 1.6em; +.uk-light .uk-button-text:hover, .uk-section-primary:not(.uk-preserve-color) .uk-button-text:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-button-text:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-button-text:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-text:hover, .uk-card-primary.uk-card-body .uk-button-text:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-button-text:hover, .uk-card-secondary.uk-card-body .uk-button-text:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-button-text:hover, .uk-overlay-primary .uk-button-text:hover, .uk-offcanvas-bar .uk-button-text:hover, +.uk-light .uk-button-text:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-button-text:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-button-text:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-button-text:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-button-text:focus, +.uk-card-primary.uk-card-body .uk-button-text:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-button-text:focus, +.uk-card-secondary.uk-card-body .uk-button-text:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-button-text:focus, +.uk-overlay-primary .uk-button-text:focus, +.uk-offcanvas-bar .uk-button-text:focus { + color: #ccc; } -code, kbd, tt, var { - font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; - font-size: 15px; - font-size: 0.9375rem; +.uk-light .uk-button-text:disabled, .uk-section-primary:not(.uk-preserve-color) .uk-button-text:disabled, .uk-section-secondary:not(.uk-preserve-color) .uk-button-text:disabled, .uk-tile-primary:not(.uk-preserve-color) .uk-button-text:disabled, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-text:disabled, .uk-card-primary.uk-card-body .uk-button-text:disabled, .uk-card-primary > :not([class*='uk-card-media']) .uk-button-text:disabled, .uk-card-secondary.uk-card-body .uk-button-text:disabled, .uk-card-secondary > :not([class*='uk-card-media']) .uk-button-text:disabled, .uk-overlay-primary .uk-button-text:disabled, .uk-offcanvas-bar .uk-button-text:disabled { + color: rgba(255, 255, 255, 0.5); } -abbr, acronym { - border-bottom: 1px dotted #666; - cursor: help; +.uk-light .uk-button-link, .uk-section-primary:not(.uk-preserve-color) .uk-button-link, .uk-section-secondary:not(.uk-preserve-color) .uk-button-link, .uk-tile-primary:not(.uk-preserve-color) .uk-button-link, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-link, .uk-card-primary.uk-card-body .uk-button-link, .uk-card-primary > :not([class*='uk-card-media']) .uk-button-link, .uk-card-secondary.uk-card-body .uk-button-link, .uk-card-secondary > :not([class*='uk-card-media']) .uk-button-link, .uk-overlay-primary .uk-button-link, .uk-offcanvas-bar .uk-button-link { + color: rgba(255, 255, 255, 0.5); } -mark, ins { - background: #fff9c0; - text-decoration: none; +.uk-light .uk-button-link:hover, .uk-section-primary:not(.uk-preserve-color) .uk-button-link:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-button-link:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-button-link:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-link:hover, .uk-card-primary.uk-card-body .uk-button-link:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-button-link:hover, .uk-card-secondary.uk-card-body .uk-button-link:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-button-link:hover, .uk-overlay-primary .uk-button-link:hover, .uk-offcanvas-bar .uk-button-link:hover, +.uk-light .uk-button-link:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-button-link:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-button-link:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-button-link:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-button-link:focus, +.uk-card-primary.uk-card-body .uk-button-link:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-button-link:focus, +.uk-card-secondary.uk-card-body .uk-button-link:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-button-link:focus, +.uk-overlay-primary .uk-button-link:focus, +.uk-offcanvas-bar .uk-button-link:focus { + color: #fff; } -big { - font-size: 125%; +.uk-light .uk-grid-divider > :not(.uk-first-column)::before, .uk-section-primary:not(.uk-preserve-color) .uk-grid-divider > :not(.uk-first-column)::before, .uk-section-secondary:not(.uk-preserve-color) .uk-grid-divider > :not(.uk-first-column)::before, .uk-tile-primary:not(.uk-preserve-color) .uk-grid-divider > :not(.uk-first-column)::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-grid-divider > :not(.uk-first-column)::before, .uk-card-primary.uk-card-body .uk-grid-divider > :not(.uk-first-column)::before, .uk-card-primary > :not([class*='uk-card-media']) .uk-grid-divider > :not(.uk-first-column)::before, .uk-card-secondary.uk-card-body .uk-grid-divider > :not(.uk-first-column)::before, .uk-card-secondary > :not([class*='uk-card-media']) .uk-grid-divider > :not(.uk-first-column)::before, .uk-overlay-primary .uk-grid-divider > :not(.uk-first-column)::before, .uk-offcanvas-bar .uk-grid-divider > :not(.uk-first-column)::before { + border-left-color: rgba(255, 255, 255, 0.2); } -.archive .site-header { - margin-bottom: 3.5em; +.uk-light .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, .uk-section-primary:not(.uk-preserve-color) .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, .uk-section-secondary:not(.uk-preserve-color) .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, .uk-tile-primary:not(.uk-preserve-color) .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, .uk-card-primary.uk-card-body .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, .uk-card-primary > :not([class*='uk-card-media']) .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, .uk-card-secondary.uk-card-body .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, .uk-card-secondary > :not([class*='uk-card-media']) .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, .uk-overlay-primary .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before, .uk-offcanvas-bar .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before { + border-top-color: rgba(255, 255, 255, 0.2); } -.site-title { - margin: .4375em 0 0; - font-size: 38px; - font-weight: bold; - line-height: 1.2; - color: #333332; +.uk-light .uk-close, .uk-section-primary:not(.uk-preserve-color) .uk-close, .uk-section-secondary:not(.uk-preserve-color) .uk-close, .uk-tile-primary:not(.uk-preserve-color) .uk-close, .uk-tile-secondary:not(.uk-preserve-color) .uk-close, .uk-card-primary.uk-card-body .uk-close, .uk-card-primary > :not([class*='uk-card-media']) .uk-close, .uk-card-secondary.uk-card-body .uk-close, .uk-card-secondary > :not([class*='uk-card-media']) .uk-close, .uk-overlay-primary .uk-close, .uk-offcanvas-bar .uk-close { + color: rgba(255, 255, 255, 0.5); } -.site-title a { - text-decoration: none; - color: inherit; +.uk-light .uk-close:hover, .uk-section-primary:not(.uk-preserve-color) .uk-close:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-close:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-close:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-close:hover, .uk-card-primary.uk-card-body .uk-close:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-close:hover, .uk-card-secondary.uk-card-body .uk-close:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-close:hover, .uk-overlay-primary .uk-close:hover, .uk-offcanvas-bar .uk-close:hover, +.uk-light .uk-close:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-close:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-close:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-close:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-close:focus, +.uk-card-primary.uk-card-body .uk-close:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-close:focus, +.uk-card-secondary.uk-card-body .uk-close:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-close:focus, +.uk-overlay-primary .uk-close:focus, +.uk-offcanvas-bar .uk-close:focus { + color: #fff; } -.site-branding { - margin-bottom: 1.75em; +.uk-light .uk-totop, .uk-section-primary:not(.uk-preserve-color) .uk-totop, .uk-section-secondary:not(.uk-preserve-color) .uk-totop, .uk-tile-primary:not(.uk-preserve-color) .uk-totop, .uk-tile-secondary:not(.uk-preserve-color) .uk-totop, .uk-card-primary.uk-card-body .uk-totop, .uk-card-primary > :not([class*='uk-card-media']) .uk-totop, .uk-card-secondary.uk-card-body .uk-totop, .uk-card-secondary > :not([class*='uk-card-media']) .uk-totop, .uk-overlay-primary .uk-totop, .uk-offcanvas-bar .uk-totop { + color: rgba(255, 255, 255, 0.5); } -.site-description { - margin: .4375em 0 0; - font-size: 17px; - font-weight: inherit; - line-height: 1.4; - word-wrap: break-word; - color: #929292; +.uk-light .uk-totop:hover, .uk-section-primary:not(.uk-preserve-color) .uk-totop:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-totop:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-totop:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-totop:hover, .uk-card-primary.uk-card-body .uk-totop:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-totop:hover, .uk-card-secondary.uk-card-body .uk-totop:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-totop:hover, .uk-overlay-primary .uk-totop:hover, .uk-offcanvas-bar .uk-totop:hover, +.uk-light .uk-totop:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-totop:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-totop:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-totop:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-totop:focus, +.uk-card-primary.uk-card-body .uk-totop:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-totop:focus, +.uk-card-secondary.uk-card-body .uk-totop:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-totop:focus, +.uk-overlay-primary .uk-totop:focus, +.uk-offcanvas-bar .uk-totop:focus { + color: #fff; } -/*-------------------------------------------------------------- -# Elements ---------------------------------------------------------------*/ -html { - -webkit-box-sizing: border-box; - box-sizing: border-box; +.uk-light .uk-totop:active, .uk-section-primary:not(.uk-preserve-color) .uk-totop:active, .uk-section-secondary:not(.uk-preserve-color) .uk-totop:active, .uk-tile-primary:not(.uk-preserve-color) .uk-totop:active, .uk-tile-secondary:not(.uk-preserve-color) .uk-totop:active, .uk-card-primary.uk-card-body .uk-totop:active, .uk-card-primary > :not([class*='uk-card-media']) .uk-totop:active, .uk-card-secondary.uk-card-body .uk-totop:active, .uk-card-secondary > :not([class*='uk-card-media']) .uk-totop:active, .uk-overlay-primary .uk-totop:active, .uk-offcanvas-bar .uk-totop:active { + color: #ccc; } -*, -*:before, -*:after { - /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ - -webkit-box-sizing: inherit; - box-sizing: inherit; +.uk-light .uk-badge, .uk-section-primary:not(.uk-preserve-color) .uk-badge, .uk-section-secondary:not(.uk-preserve-color) .uk-badge, .uk-tile-primary:not(.uk-preserve-color) .uk-badge, .uk-tile-secondary:not(.uk-preserve-color) .uk-badge, .uk-card-primary.uk-card-body .uk-badge, .uk-card-primary > :not([class*='uk-card-media']) .uk-badge, .uk-card-secondary.uk-card-body .uk-badge, .uk-card-secondary > :not([class*='uk-card-media']) .uk-badge, .uk-overlay-primary .uk-badge, .uk-offcanvas-bar .uk-badge { + background-color: #fff; + color: #666; } -body { - background: #fff; - /* Fallback for when there is no custom background color defined. */ +.uk-light .uk-badge:hover, .uk-section-primary:not(.uk-preserve-color) .uk-badge:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-badge:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-badge:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-badge:hover, .uk-card-primary.uk-card-body .uk-badge:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-badge:hover, .uk-card-secondary.uk-card-body .uk-badge:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-badge:hover, .uk-overlay-primary .uk-badge:hover, .uk-offcanvas-bar .uk-badge:hover, +.uk-light .uk-badge:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-badge:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-badge:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-badge:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-badge:focus, +.uk-card-primary.uk-card-body .uk-badge:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-badge:focus, +.uk-card-secondary.uk-card-body .uk-badge:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-badge:focus, +.uk-overlay-primary .uk-badge:focus, +.uk-offcanvas-bar .uk-badge:focus { + color: #666; } -blockquote, q { - quotes: "" ""; +.uk-light .uk-label, .uk-section-primary:not(.uk-preserve-color) .uk-label, .uk-section-secondary:not(.uk-preserve-color) .uk-label, .uk-tile-primary:not(.uk-preserve-color) .uk-label, .uk-tile-secondary:not(.uk-preserve-color) .uk-label, .uk-card-primary.uk-card-body .uk-label, .uk-card-primary > :not([class*='uk-card-media']) .uk-label, .uk-card-secondary.uk-card-body .uk-label, .uk-card-secondary > :not([class*='uk-card-media']) .uk-label, .uk-overlay-primary .uk-label, .uk-offcanvas-bar .uk-label { + background-color: #fff; + color: #666; } -blockquote:before, blockquote:after, q:before, q:after { - content: ""; +.uk-light .uk-article-meta, .uk-section-primary:not(.uk-preserve-color) .uk-article-meta, .uk-section-secondary:not(.uk-preserve-color) .uk-article-meta, .uk-tile-primary:not(.uk-preserve-color) .uk-article-meta, .uk-tile-secondary:not(.uk-preserve-color) .uk-article-meta, .uk-card-primary.uk-card-body .uk-article-meta, .uk-card-primary > :not([class*='uk-card-media']) .uk-article-meta, .uk-card-secondary.uk-card-body .uk-article-meta, .uk-card-secondary > :not([class*='uk-card-media']) .uk-article-meta, .uk-overlay-primary .uk-article-meta, .uk-offcanvas-bar .uk-article-meta { + color: rgba(255, 255, 255, 0.5); } -hr { - border: 0; - height: 1px; - margin-bottom: 1.5em; +.uk-light .uk-search-input, .uk-section-primary:not(.uk-preserve-color) .uk-search-input, .uk-section-secondary:not(.uk-preserve-color) .uk-search-input, .uk-tile-primary:not(.uk-preserve-color) .uk-search-input, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-input, .uk-card-primary.uk-card-body .uk-search-input, .uk-card-primary > :not([class*='uk-card-media']) .uk-search-input, .uk-card-secondary.uk-card-body .uk-search-input, .uk-card-secondary > :not([class*='uk-card-media']) .uk-search-input, .uk-overlay-primary .uk-search-input, .uk-offcanvas-bar .uk-search-input { + color: #fff; } -ul, ol { - margin: 0 0 1.5em 3em; +.uk-light .uk-search-input:-ms-input-placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-search-input:-ms-input-placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-search-input:-ms-input-placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-search-input:-ms-input-placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-input:-ms-input-placeholder, .uk-card-primary.uk-card-body .uk-search-input:-ms-input-placeholder, .uk-card-primary > :not([class*='uk-card-media']) .uk-search-input:-ms-input-placeholder, .uk-card-secondary.uk-card-body .uk-search-input:-ms-input-placeholder, .uk-card-secondary > :not([class*='uk-card-media']) .uk-search-input:-ms-input-placeholder, .uk-overlay-primary .uk-search-input:-ms-input-placeholder, .uk-offcanvas-bar .uk-search-input:-ms-input-placeholder { + color: rgba(255, 255, 255, 0.5) !important; } -ul { - list-style: disc; +.uk-light .uk-search-input::-webkit-input-placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-search-input::-webkit-input-placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-search-input::-webkit-input-placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-search-input::-webkit-input-placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-input::-webkit-input-placeholder, .uk-card-primary.uk-card-body .uk-search-input::-webkit-input-placeholder, .uk-card-primary > :not([class*='uk-card-media']) .uk-search-input::-webkit-input-placeholder, .uk-card-secondary.uk-card-body .uk-search-input::-webkit-input-placeholder, .uk-card-secondary > :not([class*='uk-card-media']) .uk-search-input::-webkit-input-placeholder, .uk-overlay-primary .uk-search-input::-webkit-input-placeholder, .uk-offcanvas-bar .uk-search-input::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.5); } -ol { - list-style: decimal; +.uk-light .uk-search-input::-ms-input-placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-search-input::-ms-input-placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-search-input::-ms-input-placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-search-input::-ms-input-placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-input::-ms-input-placeholder, .uk-card-primary.uk-card-body .uk-search-input::-ms-input-placeholder, .uk-card-primary > :not([class*='uk-card-media']) .uk-search-input::-ms-input-placeholder, .uk-card-secondary.uk-card-body .uk-search-input::-ms-input-placeholder, .uk-card-secondary > :not([class*='uk-card-media']) .uk-search-input::-ms-input-placeholder, .uk-overlay-primary .uk-search-input::-ms-input-placeholder, .uk-offcanvas-bar .uk-search-input::-ms-input-placeholder { + color: rgba(255, 255, 255, 0.5); } -li > ul, -li > ol { - margin-bottom: 0; - margin-left: 1.5em; +.uk-light .uk-search-input::placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-search-input::placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-search-input::placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-search-input::placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-input::placeholder, .uk-card-primary.uk-card-body .uk-search-input::placeholder, .uk-card-primary > :not([class*='uk-card-media']) .uk-search-input::placeholder, .uk-card-secondary.uk-card-body .uk-search-input::placeholder, .uk-card-secondary > :not([class*='uk-card-media']) .uk-search-input::placeholder, .uk-overlay-primary .uk-search-input::placeholder, .uk-offcanvas-bar .uk-search-input::placeholder { + color: rgba(255, 255, 255, 0.5); } -dt { - font-weight: bold; +.uk-light .uk-search .uk-search-icon, .uk-section-primary:not(.uk-preserve-color) .uk-search .uk-search-icon, .uk-section-secondary:not(.uk-preserve-color) .uk-search .uk-search-icon, .uk-tile-primary:not(.uk-preserve-color) .uk-search .uk-search-icon, .uk-tile-secondary:not(.uk-preserve-color) .uk-search .uk-search-icon, .uk-card-primary.uk-card-body .uk-search .uk-search-icon, .uk-card-primary > :not([class*='uk-card-media']) .uk-search .uk-search-icon, .uk-card-secondary.uk-card-body .uk-search .uk-search-icon, .uk-card-secondary > :not([class*='uk-card-media']) .uk-search .uk-search-icon, .uk-overlay-primary .uk-search .uk-search-icon, .uk-offcanvas-bar .uk-search .uk-search-icon { + color: rgba(255, 255, 255, 0.5); } -dd { - margin: 0 1.5em 1.5em; +.uk-light .uk-search .uk-search-icon:hover, .uk-section-primary:not(.uk-preserve-color) .uk-search .uk-search-icon:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-search .uk-search-icon:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-search .uk-search-icon:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-search .uk-search-icon:hover, .uk-card-primary.uk-card-body .uk-search .uk-search-icon:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-search .uk-search-icon:hover, .uk-card-secondary.uk-card-body .uk-search .uk-search-icon:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-search .uk-search-icon:hover, .uk-overlay-primary .uk-search .uk-search-icon:hover, .uk-offcanvas-bar .uk-search .uk-search-icon:hover { + color: rgba(255, 255, 255, 0.5); } -img { - height: auto; - /* Make sure images are scaled correctly. */ - max-width: 100%; - /* Adhere to container width. */ +.uk-light .uk-search-default .uk-search-input, .uk-section-primary:not(.uk-preserve-color) .uk-search-default .uk-search-input, .uk-section-secondary:not(.uk-preserve-color) .uk-search-default .uk-search-input, .uk-tile-primary:not(.uk-preserve-color) .uk-search-default .uk-search-input, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-default .uk-search-input, .uk-card-primary.uk-card-body .uk-search-default .uk-search-input, .uk-card-primary > :not([class*='uk-card-media']) .uk-search-default .uk-search-input, .uk-card-secondary.uk-card-body .uk-search-default .uk-search-input, .uk-card-secondary > :not([class*='uk-card-media']) .uk-search-default .uk-search-input, .uk-overlay-primary .uk-search-default .uk-search-input, .uk-offcanvas-bar .uk-search-default .uk-search-input { + background-color: transparent; } -figure { - margin: 1em 0; - /* Extra wide images within figure tags don't overflow the content area. */ +.uk-light .uk-search-default .uk-search-input:focus, .uk-section-primary:not(.uk-preserve-color) .uk-search-default .uk-search-input:focus, .uk-section-secondary:not(.uk-preserve-color) .uk-search-default .uk-search-input:focus, .uk-tile-primary:not(.uk-preserve-color) .uk-search-default .uk-search-input:focus, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-default .uk-search-input:focus, .uk-card-primary.uk-card-body .uk-search-default .uk-search-input:focus, .uk-card-primary > :not([class*='uk-card-media']) .uk-search-default .uk-search-input:focus, .uk-card-secondary.uk-card-body .uk-search-default .uk-search-input:focus, .uk-card-secondary > :not([class*='uk-card-media']) .uk-search-default .uk-search-input:focus, .uk-overlay-primary .uk-search-default .uk-search-input:focus, .uk-offcanvas-bar .uk-search-default .uk-search-input:focus { + background-color: transparent; } -table { - margin: 0 0 1.5em; - width: 100%; +.uk-light .uk-search-navbar .uk-search-input, .uk-section-primary:not(.uk-preserve-color) .uk-search-navbar .uk-search-input, .uk-section-secondary:not(.uk-preserve-color) .uk-search-navbar .uk-search-input, .uk-tile-primary:not(.uk-preserve-color) .uk-search-navbar .uk-search-input, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-navbar .uk-search-input, .uk-card-primary.uk-card-body .uk-search-navbar .uk-search-input, .uk-card-primary > :not([class*='uk-card-media']) .uk-search-navbar .uk-search-input, .uk-card-secondary.uk-card-body .uk-search-navbar .uk-search-input, .uk-card-secondary > :not([class*='uk-card-media']) .uk-search-navbar .uk-search-input, .uk-overlay-primary .uk-search-navbar .uk-search-input, .uk-offcanvas-bar .uk-search-navbar .uk-search-input { + background-color: transparent; } -/*-------------------------------------------------------------- -# Forms ---------------------------------------------------------------*/ -button, -input[type="button"], -input[type="reset"], -input[type="submit"] { - border: 1px solid; - border-color: #ccc #ccc #bbb; - border-radius: 3px; - background: #e6e6e6; - color: rgba(0, 0, 0, 0.8); - font-size: 12px; - font-size: 0.75rem; - line-height: 1; - padding: .6em 1em .4em; -} - -button:hover, -input[type="button"]:hover, -input[type="reset"]:hover, -input[type="submit"]:hover { - border-color: #ccc #bbb #aaa; -} - -button:active, button:focus, -input[type="button"]:active, -input[type="button"]:focus, -input[type="reset"]:active, -input[type="reset"]:focus, -input[type="submit"]:active, -input[type="submit"]:focus { - border-color: #aaa #bbb #bbb; -} - -input[type="text"], -input[type="email"], -input[type="url"], -input[type="password"], -input[type="search"], -input[type="number"], -input[type="tel"], -input[type="range"], -input[type="date"], -input[type="month"], -input[type="week"], -input[type="time"], -input[type="datetime"], -input[type="datetime-local"], -input[type="color"], -textarea { - color: #666; - border: 1px solid #ccc; - border-radius: 3px; - padding: 3px; -} - -input[type="text"]:focus, -input[type="email"]:focus, -input[type="url"]:focus, -input[type="password"]:focus, -input[type="search"]:focus, -input[type="number"]:focus, -input[type="tel"]:focus, -input[type="range"]:focus, -input[type="date"]:focus, -input[type="month"]:focus, -input[type="week"]:focus, -input[type="time"]:focus, -input[type="datetime"]:focus, -input[type="datetime-local"]:focus, -input[type="color"]:focus, -textarea:focus { - color: #111; -} - -select { - border: 1px solid #ccc; -} - -textarea { - width: 100%; +.uk-light .uk-search-large .uk-search-input, .uk-section-primary:not(.uk-preserve-color) .uk-search-large .uk-search-input, .uk-section-secondary:not(.uk-preserve-color) .uk-search-large .uk-search-input, .uk-tile-primary:not(.uk-preserve-color) .uk-search-large .uk-search-input, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-large .uk-search-input, .uk-card-primary.uk-card-body .uk-search-large .uk-search-input, .uk-card-primary > :not([class*='uk-card-media']) .uk-search-large .uk-search-input, .uk-card-secondary.uk-card-body .uk-search-large .uk-search-input, .uk-card-secondary > :not([class*='uk-card-media']) .uk-search-large .uk-search-input, .uk-overlay-primary .uk-search-large .uk-search-input, .uk-offcanvas-bar .uk-search-large .uk-search-input { + background-color: transparent; } -/*-------------------------------------------------------------- -# Navigation ---------------------------------------------------------------*/ -/*-------------------------------------------------------------- -## Links ---------------------------------------------------------------*/ -a { - color: #0073aa; +.uk-light .uk-search-toggle, .uk-section-primary:not(.uk-preserve-color) .uk-search-toggle, .uk-section-secondary:not(.uk-preserve-color) .uk-search-toggle, .uk-tile-primary:not(.uk-preserve-color) .uk-search-toggle, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-toggle, .uk-card-primary.uk-card-body .uk-search-toggle, .uk-card-primary > :not([class*='uk-card-media']) .uk-search-toggle, .uk-card-secondary.uk-card-body .uk-search-toggle, .uk-card-secondary > :not([class*='uk-card-media']) .uk-search-toggle, .uk-overlay-primary .uk-search-toggle, .uk-offcanvas-bar .uk-search-toggle { + color: rgba(255, 255, 255, 0.5); } -a:visited { - color: #333; +.uk-light .uk-search-toggle:hover, .uk-section-primary:not(.uk-preserve-color) .uk-search-toggle:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-search-toggle:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-search-toggle:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-toggle:hover, .uk-card-primary.uk-card-body .uk-search-toggle:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-search-toggle:hover, .uk-card-secondary.uk-card-body .uk-search-toggle:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-search-toggle:hover, .uk-overlay-primary .uk-search-toggle:hover, .uk-offcanvas-bar .uk-search-toggle:hover, +.uk-light .uk-search-toggle:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-search-toggle:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-search-toggle:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-search-toggle:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-search-toggle:focus, +.uk-card-primary.uk-card-body .uk-search-toggle:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-search-toggle:focus, +.uk-card-secondary.uk-card-body .uk-search-toggle:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-search-toggle:focus, +.uk-overlay-primary .uk-search-toggle:focus, +.uk-offcanvas-bar .uk-search-toggle:focus { + color: #fff; } -a:hover, a:focus, a:active { - color: #00a0d2; +.uk-light .uk-nav-parent-icon > .uk-parent > a::after, .uk-section-primary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent > a::after, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent > a::after, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent > a::after, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent > a::after, .uk-card-primary.uk-card-body .uk-nav-parent-icon > .uk-parent > a::after, .uk-card-primary > :not([class*='uk-card-media']) .uk-nav-parent-icon > .uk-parent > a::after, .uk-card-secondary.uk-card-body .uk-nav-parent-icon > .uk-parent > a::after, .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-parent-icon > .uk-parent > a::after, .uk-overlay-primary .uk-nav-parent-icon > .uk-parent > a::after, .uk-offcanvas-bar .uk-nav-parent-icon > .uk-parent > a::after { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.1%22%20points%3D%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E"); } -a:focus { - outline: thin dotted; +.uk-light .uk-nav-parent-icon > .uk-parent.uk-open > a::after, .uk-section-primary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent.uk-open > a::after, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent.uk-open > a::after, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent.uk-open > a::after, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent.uk-open > a::after, .uk-card-primary.uk-card-body .uk-nav-parent-icon > .uk-parent.uk-open > a::after, .uk-card-primary > :not([class*='uk-card-media']) .uk-nav-parent-icon > .uk-parent.uk-open > a::after, .uk-card-secondary.uk-card-body .uk-nav-parent-icon > .uk-parent.uk-open > a::after, .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-parent-icon > .uk-parent.uk-open > a::after, .uk-overlay-primary .uk-nav-parent-icon > .uk-parent.uk-open > a::after, .uk-offcanvas-bar .uk-nav-parent-icon > .uk-parent.uk-open > a::after { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E"); } -a:hover, a:active { - outline: 0; +.uk-light .uk-nav-default > li > a, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default > li > a, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default > li > a, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default > li > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default > li > a, .uk-card-primary.uk-card-body .uk-nav-default > li > a, .uk-card-primary > :not([class*='uk-card-media']) .uk-nav-default > li > a, .uk-card-secondary.uk-card-body .uk-nav-default > li > a, .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-default > li > a, .uk-overlay-primary .uk-nav-default > li > a, .uk-offcanvas-bar .uk-nav-default > li > a { + color: rgba(255, 255, 255, 0.5); } -/*-------------------------------------------------------------- -## Menus ---------------------------------------------------------------*/ -.main-navigation { - clear: both; - display: block; - margin: 0 auto; - max-width: 636px; - text-align: center; +.uk-light .uk-nav-default > li > a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default > li > a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default > li > a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default > li > a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default > li > a:hover, .uk-card-primary.uk-card-body .uk-nav-default > li > a:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-nav-default > li > a:hover, .uk-card-secondary.uk-card-body .uk-nav-default > li > a:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-default > li > a:hover, .uk-overlay-primary .uk-nav-default > li > a:hover, .uk-offcanvas-bar .uk-nav-default > li > a:hover, +.uk-light .uk-nav-default > li > a:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-nav-default > li > a:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-nav-default > li > a:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-nav-default > li > a:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default > li > a:focus, +.uk-card-primary.uk-card-body .uk-nav-default > li > a:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-nav-default > li > a:focus, +.uk-card-secondary.uk-card-body .uk-nav-default > li > a:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-default > li > a:focus, +.uk-overlay-primary .uk-nav-default > li > a:focus, +.uk-offcanvas-bar .uk-nav-default > li > a:focus { + color: #fff; } -.main-navigation ul { - display: none; - list-style: none; - margin: 0; - padding-left: 0; +.uk-light .uk-nav-default > li.uk-active > a, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default > li.uk-active > a, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default > li.uk-active > a, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default > li.uk-active > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default > li.uk-active > a, .uk-card-primary.uk-card-body .uk-nav-default > li.uk-active > a, .uk-card-primary > :not([class*='uk-card-media']) .uk-nav-default > li.uk-active > a, .uk-card-secondary.uk-card-body .uk-nav-default > li.uk-active > a, .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-default > li.uk-active > a, .uk-overlay-primary .uk-nav-default > li.uk-active > a, .uk-offcanvas-bar .uk-nav-default > li.uk-active > a { + color: #ccc; } -.main-navigation ul ul { - -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); - float: left; - position: absolute; - top: 100%; - left: -999em; - z-index: 99999; - text-align: left; +.uk-light .uk-nav-default .uk-nav-header, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-header, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-header, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-header, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-header, .uk-card-primary.uk-card-body .uk-nav-default .uk-nav-header, .uk-card-primary > :not([class*='uk-card-media']) .uk-nav-default .uk-nav-header, .uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-header, .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-default .uk-nav-header, .uk-overlay-primary .uk-nav-default .uk-nav-header, .uk-offcanvas-bar .uk-nav-default .uk-nav-header { + color: #ccc; } -.main-navigation ul ul ul { - left: -999em; - top: 0; +.uk-light .uk-nav-default .uk-nav-divider, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-divider, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-divider, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-divider, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-divider, .uk-card-primary.uk-card-body .uk-nav-default .uk-nav-divider, .uk-card-primary > :not([class*='uk-card-media']) .uk-nav-default .uk-nav-divider, .uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-divider, .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-default .uk-nav-divider, .uk-overlay-primary .uk-nav-default .uk-nav-divider, .uk-offcanvas-bar .uk-nav-default .uk-nav-divider { + border-top-color: rgba(255, 255, 255, 0.2); } -.main-navigation ul ul li:hover > ul, -.main-navigation ul ul li.focus > ul { - left: 100%; +.uk-light .uk-nav-default .uk-nav-sub a, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a, .uk-card-primary.uk-card-body .uk-nav-default .uk-nav-sub a, .uk-card-primary > :not([class*='uk-card-media']) .uk-nav-default .uk-nav-sub a, .uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-sub a, .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-default .uk-nav-sub a, .uk-overlay-primary .uk-nav-default .uk-nav-sub a, .uk-offcanvas-bar .uk-nav-default .uk-nav-sub a { + color: rgba(255, 255, 255, 0.5); } -.main-navigation ul ul a { - width: 200px; +.uk-light .uk-nav-default .uk-nav-sub a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a:hover, .uk-card-primary.uk-card-body .uk-nav-default .uk-nav-sub a:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-nav-default .uk-nav-sub a:hover, .uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-sub a:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-default .uk-nav-sub a:hover, .uk-overlay-primary .uk-nav-default .uk-nav-sub a:hover, .uk-offcanvas-bar .uk-nav-default .uk-nav-sub a:hover, +.uk-light .uk-nav-default .uk-nav-sub a:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a:focus, +.uk-card-primary.uk-card-body .uk-nav-default .uk-nav-sub a:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-nav-default .uk-nav-sub a:focus, +.uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-sub a:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-default .uk-nav-sub a:focus, +.uk-overlay-primary .uk-nav-default .uk-nav-sub a:focus, +.uk-offcanvas-bar .uk-nav-default .uk-nav-sub a:focus { + color: #fff; } -.main-navigation ul li:hover > ul, -.main-navigation ul li.focus > ul { - display: block; - left: auto; +.uk-light .uk-nav-default .uk-nav-sub li.uk-active > a, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub li.uk-active > a, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub li.uk-active > a, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub li.uk-active > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub li.uk-active > a, .uk-card-primary.uk-card-body .uk-nav-default .uk-nav-sub li.uk-active > a, .uk-card-primary > :not([class*='uk-card-media']) .uk-nav-default .uk-nav-sub li.uk-active > a, .uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-sub li.uk-active > a, .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-default .uk-nav-sub li.uk-active > a, .uk-overlay-primary .uk-nav-default .uk-nav-sub li.uk-active > a, .uk-offcanvas-bar .uk-nav-default .uk-nav-sub li.uk-active > a { + color: #ccc; } -.main-navigation li { - position: relative; +.uk-light .uk-nav-primary > li > a, .uk-section-primary:not(.uk-preserve-color) .uk-nav-primary > li > a, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary > li > a, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary > li > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary > li > a, .uk-card-primary.uk-card-body .uk-nav-primary > li > a, .uk-card-primary > :not([class*='uk-card-media']) .uk-nav-primary > li > a, .uk-card-secondary.uk-card-body .uk-nav-primary > li > a, .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-primary > li > a, .uk-overlay-primary .uk-nav-primary > li > a, .uk-offcanvas-bar .uk-nav-primary > li > a { + color: rgba(255, 255, 255, 0.5); } -.main-navigation a { - display: block; - text-decoration: none; +.uk-light .uk-nav-primary > li > a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-nav-primary > li > a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary > li > a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary > li > a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary > li > a:hover, .uk-card-primary.uk-card-body .uk-nav-primary > li > a:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-nav-primary > li > a:hover, .uk-card-secondary.uk-card-body .uk-nav-primary > li > a:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-primary > li > a:hover, .uk-overlay-primary .uk-nav-primary > li > a:hover, .uk-offcanvas-bar .uk-nav-primary > li > a:hover, +.uk-light .uk-nav-primary > li > a:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-nav-primary > li > a:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary > li > a:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary > li > a:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary > li > a:focus, +.uk-card-primary.uk-card-body .uk-nav-primary > li > a:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-nav-primary > li > a:focus, +.uk-card-secondary.uk-card-body .uk-nav-primary > li > a:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-primary > li > a:focus, +.uk-overlay-primary .uk-nav-primary > li > a:focus, +.uk-offcanvas-bar .uk-nav-primary > li > a:focus { + color: #fff; } -.menu-toggle { - padding: 1em; +.uk-light .uk-nav-primary > li.uk-active > a, .uk-section-primary:not(.uk-preserve-color) .uk-nav-primary > li.uk-active > a, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary > li.uk-active > a, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary > li.uk-active > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary > li.uk-active > a, .uk-card-primary.uk-card-body .uk-nav-primary > li.uk-active > a, .uk-card-primary > :not([class*='uk-card-media']) .uk-nav-primary > li.uk-active > a, .uk-card-secondary.uk-card-body .uk-nav-primary > li.uk-active > a, .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-primary > li.uk-active > a, .uk-overlay-primary .uk-nav-primary > li.uk-active > a, .uk-offcanvas-bar .uk-nav-primary > li.uk-active > a { + color: #ccc; } -@media screen and (max-width: 37.5em) { - /* Small menu. */ - .menu-toggle, - .main-navigation.toggled ul { - display: block; - margin: 0 auto; - } +.uk-light .uk-nav-primary .uk-nav-header, .uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-header, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-header, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-header, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-header, .uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-header, .uk-card-primary > :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-header, .uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-header, .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-header, .uk-overlay-primary .uk-nav-primary .uk-nav-header, .uk-offcanvas-bar .uk-nav-primary .uk-nav-header { + color: #ccc; } -@media screen and (min-width: 37.5em) { - .menu-toggle { - display: none; - } - .main-navigation ul { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - } - .main-navigation a { - padding: 0 .5em; - } +.uk-light .uk-nav-primary .uk-nav-divider, .uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-divider, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-divider, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-divider, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-divider, .uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-divider, .uk-card-primary > :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-divider, .uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-divider, .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-divider, .uk-overlay-primary .uk-nav-primary .uk-nav-divider, .uk-offcanvas-bar .uk-nav-primary .uk-nav-divider { + border-top-color: rgba(255, 255, 255, 0.2); } -.site-main .comment-navigation, -.site-main .posts-navigation, -.site-main .post-navigation { - border-bottom: 1px solid #111; - margin: 0 auto 60px; - max-width: 636px; - overflow: hidden; - padding-bottom: 60px; +.uk-light .uk-nav-primary .uk-nav-sub a, .uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a, .uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-sub a, .uk-card-primary > :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-sub a, .uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-sub a, .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-sub a, .uk-overlay-primary .uk-nav-primary .uk-nav-sub a, .uk-offcanvas-bar .uk-nav-primary .uk-nav-sub a { + color: rgba(255, 255, 255, 0.5); } -.nav-links { - display: -webkit-box; - display: -ms-flexbox; - display: flex; +.uk-light .uk-nav-primary .uk-nav-sub a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a:hover, .uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-sub a:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-sub a:hover, .uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-sub a:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-sub a:hover, .uk-overlay-primary .uk-nav-primary .uk-nav-sub a:hover, .uk-offcanvas-bar .uk-nav-primary .uk-nav-sub a:hover, +.uk-light .uk-nav-primary .uk-nav-sub a:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a:focus, +.uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-sub a:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-sub a:focus, +.uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-sub a:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-sub a:focus, +.uk-overlay-primary .uk-nav-primary .uk-nav-sub a:focus, +.uk-offcanvas-bar .uk-nav-primary .uk-nav-sub a:focus { + color: #fff; } -.comment-navigation .nav-previous, -.posts-navigation .nav-previous, -.post-navigation .nav-previous { - width: 50%; - -webkit-box-flex: 1; - -ms-flex: 1 0 50%; - flex: 1 0 50%; +.uk-light .uk-nav-primary .uk-nav-sub li.uk-active > a, .uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub li.uk-active > a, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub li.uk-active > a, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub li.uk-active > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub li.uk-active > a, .uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-sub li.uk-active > a, .uk-card-primary > :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-sub li.uk-active > a, .uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-sub li.uk-active > a, .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-sub li.uk-active > a, .uk-overlay-primary .uk-nav-primary .uk-nav-sub li.uk-active > a, .uk-offcanvas-bar .uk-nav-primary .uk-nav-sub li.uk-active > a { + color: #ccc; } -.comment-navigation .nav-next, -.posts-navigation .nav-next, -.post-navigation .nav-next { - text-align: end; - -webkit-box-flex: 1; - -ms-flex: 1 0 50%; - flex: 1 0 50%; +.uk-light .uk-navbar-nav > li > a, .uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav > li > a, .uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav > li > a, .uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav > li > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav > li > a, .uk-card-primary.uk-card-body .uk-navbar-nav > li > a, .uk-card-primary > :not([class*='uk-card-media']) .uk-navbar-nav > li > a, .uk-card-secondary.uk-card-body .uk-navbar-nav > li > a, .uk-card-secondary > :not([class*='uk-card-media']) .uk-navbar-nav > li > a, .uk-overlay-primary .uk-navbar-nav > li > a, .uk-offcanvas-bar .uk-navbar-nav > li > a { + color: rgba(255, 255, 255, 0.5); } -/*-------------------------------------------------------------- -# Accessibility ---------------------------------------------------------------*/ -/* Text meant only for screen readers. */ -.screen-reader-text { - clip: rect(1px, 1px, 1px, 1px); - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - word-wrap: normal !important; - /* Many screen reader and browser combinations announce broken words as they would appear visually. */ +.uk-light .uk-navbar-nav > li:hover > a, .uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav > li:hover > a, .uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav > li:hover > a, .uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav > li:hover > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav > li:hover > a, .uk-card-primary.uk-card-body .uk-navbar-nav > li:hover > a, .uk-card-primary > :not([class*='uk-card-media']) .uk-navbar-nav > li:hover > a, .uk-card-secondary.uk-card-body .uk-navbar-nav > li:hover > a, .uk-card-secondary > :not([class*='uk-card-media']) .uk-navbar-nav > li:hover > a, .uk-overlay-primary .uk-navbar-nav > li:hover > a, .uk-offcanvas-bar .uk-navbar-nav > li:hover > a, +.uk-light .uk-navbar-nav > li > a:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav > li > a:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav > li > a:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav > li > a:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav > li > a:focus, +.uk-card-primary.uk-card-body .uk-navbar-nav > li > a:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-navbar-nav > li > a:focus, +.uk-card-secondary.uk-card-body .uk-navbar-nav > li > a:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-navbar-nav > li > a:focus, +.uk-overlay-primary .uk-navbar-nav > li > a:focus, +.uk-offcanvas-bar .uk-navbar-nav > li > a:focus, +.uk-light .uk-navbar-nav > li > a.uk-open, +.uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav > li > a.uk-open, +.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav > li > a.uk-open, +.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav > li > a.uk-open, +.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav > li > a.uk-open, +.uk-card-primary.uk-card-body .uk-navbar-nav > li > a.uk-open, +.uk-card-primary > :not([class*='uk-card-media']) .uk-navbar-nav > li > a.uk-open, +.uk-card-secondary.uk-card-body .uk-navbar-nav > li > a.uk-open, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-navbar-nav > li > a.uk-open, +.uk-overlay-primary .uk-navbar-nav > li > a.uk-open, +.uk-offcanvas-bar .uk-navbar-nav > li > a.uk-open { + color: #fff; +} + +.uk-light .uk-navbar-nav > li > a:active, .uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav > li > a:active, .uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav > li > a:active, .uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav > li > a:active, .uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav > li > a:active, .uk-card-primary.uk-card-body .uk-navbar-nav > li > a:active, .uk-card-primary > :not([class*='uk-card-media']) .uk-navbar-nav > li > a:active, .uk-card-secondary.uk-card-body .uk-navbar-nav > li > a:active, .uk-card-secondary > :not([class*='uk-card-media']) .uk-navbar-nav > li > a:active, .uk-overlay-primary .uk-navbar-nav > li > a:active, .uk-offcanvas-bar .uk-navbar-nav > li > a:active { + color: #ccc; } -.screen-reader-text:focus { - background-color: #f1f1f1; - border-radius: 3px; - -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); - box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); - clip: auto !important; - color: #21759b; - display: block; - font-size: 14px; - font-size: 0.875rem; - font-weight: bold; - height: auto; - left: 5px; - line-height: normal; - padding: 15px 23px 14px; - text-decoration: none; - top: 5px; - width: auto; - z-index: 100000; - /* Above WP toolbar. */ +.uk-light .uk-navbar-nav > li.uk-active > a, .uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav > li.uk-active > a, .uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav > li.uk-active > a, .uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav > li.uk-active > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav > li.uk-active > a, .uk-card-primary.uk-card-body .uk-navbar-nav > li.uk-active > a, .uk-card-primary > :not([class*='uk-card-media']) .uk-navbar-nav > li.uk-active > a, .uk-card-secondary.uk-card-body .uk-navbar-nav > li.uk-active > a, .uk-card-secondary > :not([class*='uk-card-media']) .uk-navbar-nav > li.uk-active > a, .uk-overlay-primary .uk-navbar-nav > li.uk-active > a, .uk-offcanvas-bar .uk-navbar-nav > li.uk-active > a { + color: #ccc; } -/* Do not show the outline on the skip link target. */ -#primary[tabindex="-1"]:focus { - outline: 0; +.uk-light .uk-navbar-item, .uk-section-primary:not(.uk-preserve-color) .uk-navbar-item, .uk-section-secondary:not(.uk-preserve-color) .uk-navbar-item, .uk-tile-primary:not(.uk-preserve-color) .uk-navbar-item, .uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-item, .uk-card-primary.uk-card-body .uk-navbar-item, .uk-card-primary > :not([class*='uk-card-media']) .uk-navbar-item, .uk-card-secondary.uk-card-body .uk-navbar-item, .uk-card-secondary > :not([class*='uk-card-media']) .uk-navbar-item, .uk-overlay-primary .uk-navbar-item, .uk-offcanvas-bar .uk-navbar-item { + color: #fff; } -/*-------------------------------------------------------------- -# Alignments ---------------------------------------------------------------*/ -.alignleft, -.alignright { - max-width: 636px !important; - /* Let's work to make this !important unnecessary */ +.uk-light .uk-navbar-toggle, .uk-section-primary:not(.uk-preserve-color) .uk-navbar-toggle, .uk-section-secondary:not(.uk-preserve-color) .uk-navbar-toggle, .uk-tile-primary:not(.uk-preserve-color) .uk-navbar-toggle, .uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-toggle, .uk-card-primary.uk-card-body .uk-navbar-toggle, .uk-card-primary > :not([class*='uk-card-media']) .uk-navbar-toggle, .uk-card-secondary.uk-card-body .uk-navbar-toggle, .uk-card-secondary > :not([class*='uk-card-media']) .uk-navbar-toggle, .uk-overlay-primary .uk-navbar-toggle, .uk-offcanvas-bar .uk-navbar-toggle { + color: rgba(255, 255, 255, 0.5); } -.alignleft img, -.alignright img, -.alignleft figcaption, -.alignright figcaption { - max-width: 50%; - width: 50%; +.uk-light .uk-navbar-toggle:hover, .uk-section-primary:not(.uk-preserve-color) .uk-navbar-toggle:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-navbar-toggle:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-navbar-toggle:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-toggle:hover, .uk-card-primary.uk-card-body .uk-navbar-toggle:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-navbar-toggle:hover, .uk-card-secondary.uk-card-body .uk-navbar-toggle:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-navbar-toggle:hover, .uk-overlay-primary .uk-navbar-toggle:hover, .uk-offcanvas-bar .uk-navbar-toggle:hover, +.uk-light .uk-navbar-toggle:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-navbar-toggle:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-toggle:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-toggle:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-toggle:focus, +.uk-card-primary.uk-card-body .uk-navbar-toggle:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-navbar-toggle:focus, +.uk-card-secondary.uk-card-body .uk-navbar-toggle:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-navbar-toggle:focus, +.uk-overlay-primary .uk-navbar-toggle:focus, +.uk-offcanvas-bar .uk-navbar-toggle:focus, +.uk-light .uk-navbar-toggle.uk-open, +.uk-section-primary:not(.uk-preserve-color) .uk-navbar-toggle.uk-open, +.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-toggle.uk-open, +.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-toggle.uk-open, +.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-toggle.uk-open, +.uk-card-primary.uk-card-body .uk-navbar-toggle.uk-open, +.uk-card-primary > :not([class*='uk-card-media']) .uk-navbar-toggle.uk-open, +.uk-card-secondary.uk-card-body .uk-navbar-toggle.uk-open, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-navbar-toggle.uk-open, +.uk-overlay-primary .uk-navbar-toggle.uk-open, +.uk-offcanvas-bar .uk-navbar-toggle.uk-open { + color: #fff; } -.alignleft figcaption { - clear: left; +.uk-light .uk-subnav > * > :first-child, .uk-section-primary:not(.uk-preserve-color) .uk-subnav > * > :first-child, .uk-section-secondary:not(.uk-preserve-color) .uk-subnav > * > :first-child, .uk-tile-primary:not(.uk-preserve-color) .uk-subnav > * > :first-child, .uk-tile-secondary:not(.uk-preserve-color) .uk-subnav > * > :first-child, .uk-card-primary.uk-card-body .uk-subnav > * > :first-child, .uk-card-primary > :not([class*='uk-card-media']) .uk-subnav > * > :first-child, .uk-card-secondary.uk-card-body .uk-subnav > * > :first-child, .uk-card-secondary > :not([class*='uk-card-media']) .uk-subnav > * > :first-child, .uk-overlay-primary .uk-subnav > * > :first-child, .uk-offcanvas-bar .uk-subnav > * > :first-child { + color: rgba(255, 255, 255, 0.5); +} + +.uk-light .uk-subnav > * > a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-subnav > * > a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-subnav > * > a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-subnav > * > a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-subnav > * > a:hover, .uk-card-primary.uk-card-body .uk-subnav > * > a:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-subnav > * > a:hover, .uk-card-secondary.uk-card-body .uk-subnav > * > a:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-subnav > * > a:hover, .uk-overlay-primary .uk-subnav > * > a:hover, .uk-offcanvas-bar .uk-subnav > * > a:hover, +.uk-light .uk-subnav > * > a:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-subnav > * > a:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-subnav > * > a:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-subnav > * > a:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-subnav > * > a:focus, +.uk-card-primary.uk-card-body .uk-subnav > * > a:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-subnav > * > a:focus, +.uk-card-secondary.uk-card-body .uk-subnav > * > a:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-subnav > * > a:focus, +.uk-overlay-primary .uk-subnav > * > a:focus, +.uk-offcanvas-bar .uk-subnav > * > a:focus { + color: #fff; +} + +.uk-light .uk-subnav > .uk-active > a, .uk-section-primary:not(.uk-preserve-color) .uk-subnav > .uk-active > a, .uk-section-secondary:not(.uk-preserve-color) .uk-subnav > .uk-active > a, .uk-tile-primary:not(.uk-preserve-color) .uk-subnav > .uk-active > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-subnav > .uk-active > a, .uk-card-primary.uk-card-body .uk-subnav > .uk-active > a, .uk-card-primary > :not([class*='uk-card-media']) .uk-subnav > .uk-active > a, .uk-card-secondary.uk-card-body .uk-subnav > .uk-active > a, .uk-card-secondary > :not([class*='uk-card-media']) .uk-subnav > .uk-active > a, .uk-overlay-primary .uk-subnav > .uk-active > a, .uk-offcanvas-bar .uk-subnav > .uk-active > a { + color: #ccc; } -.alignright figcaption { - clear: right; +.uk-light .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before, .uk-section-primary:not(.uk-preserve-color) .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before, .uk-section-secondary:not(.uk-preserve-color) .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before, .uk-tile-primary:not(.uk-preserve-color) .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before, .uk-card-primary.uk-card-body .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before, .uk-card-primary > :not([class*='uk-card-media']) .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before, .uk-card-secondary.uk-card-body .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before, .uk-card-secondary > :not([class*='uk-card-media']) .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before, .uk-overlay-primary .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before, .uk-offcanvas-bar .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before { + border-left-color: rgba(255, 255, 255, 0.2); +} + +.uk-light .uk-subnav-pill > * > :first-child, .uk-section-primary:not(.uk-preserve-color) .uk-subnav-pill > * > :first-child, .uk-section-secondary:not(.uk-preserve-color) .uk-subnav-pill > * > :first-child, .uk-tile-primary:not(.uk-preserve-color) .uk-subnav-pill > * > :first-child, .uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-pill > * > :first-child, .uk-card-primary.uk-card-body .uk-subnav-pill > * > :first-child, .uk-card-primary > :not([class*='uk-card-media']) .uk-subnav-pill > * > :first-child, .uk-card-secondary.uk-card-body .uk-subnav-pill > * > :first-child, .uk-card-secondary > :not([class*='uk-card-media']) .uk-subnav-pill > * > :first-child, .uk-overlay-primary .uk-subnav-pill > * > :first-child, .uk-offcanvas-bar .uk-subnav-pill > * > :first-child { + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } -.alignleft img, -.alignleft figcaption { - float: left; - margin-right: 1.5em; +.uk-light .uk-subnav-pill > * > a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-subnav-pill > * > a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-subnav-pill > * > a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-subnav-pill > * > a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-pill > * > a:hover, .uk-card-primary.uk-card-body .uk-subnav-pill > * > a:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-subnav-pill > * > a:hover, .uk-card-secondary.uk-card-body .uk-subnav-pill > * > a:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-subnav-pill > * > a:hover, .uk-overlay-primary .uk-subnav-pill > * > a:hover, .uk-offcanvas-bar .uk-subnav-pill > * > a:hover, +.uk-light .uk-subnav-pill > * > a:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-subnav-pill > * > a:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-subnav-pill > * > a:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-subnav-pill > * > a:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-pill > * > a:focus, +.uk-card-primary.uk-card-body .uk-subnav-pill > * > a:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-subnav-pill > * > a:focus, +.uk-card-secondary.uk-card-body .uk-subnav-pill > * > a:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-subnav-pill > * > a:focus, +.uk-overlay-primary .uk-subnav-pill > * > a:focus, +.uk-offcanvas-bar .uk-subnav-pill > * > a:focus { + background-color: rgba(255, 255, 255, 0.1); + color: #fff; } -.alignright img, -.alignright figcaption { - float: right; - margin-left: 1.5em; +.uk-light .uk-subnav-pill > * > a:active, .uk-section-primary:not(.uk-preserve-color) .uk-subnav-pill > * > a:active, .uk-section-secondary:not(.uk-preserve-color) .uk-subnav-pill > * > a:active, .uk-tile-primary:not(.uk-preserve-color) .uk-subnav-pill > * > a:active, .uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-pill > * > a:active, .uk-card-primary.uk-card-body .uk-subnav-pill > * > a:active, .uk-card-primary > :not([class*='uk-card-media']) .uk-subnav-pill > * > a:active, .uk-card-secondary.uk-card-body .uk-subnav-pill > * > a:active, .uk-card-secondary > :not([class*='uk-card-media']) .uk-subnav-pill > * > a:active, .uk-overlay-primary .uk-subnav-pill > * > a:active, .uk-offcanvas-bar .uk-subnav-pill > * > a:active { + background-color: rgba(255, 255, 255, 0.1); + color: #fff; } -.aligncenter { - clear: both; - display: block; - margin-left: auto; - margin-right: auto; +.uk-light .uk-subnav-pill > .uk-active > a, .uk-section-primary:not(.uk-preserve-color) .uk-subnav-pill > .uk-active > a, .uk-section-secondary:not(.uk-preserve-color) .uk-subnav-pill > .uk-active > a, .uk-tile-primary:not(.uk-preserve-color) .uk-subnav-pill > .uk-active > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-pill > .uk-active > a, .uk-card-primary.uk-card-body .uk-subnav-pill > .uk-active > a, .uk-card-primary > :not([class*='uk-card-media']) .uk-subnav-pill > .uk-active > a, .uk-card-secondary.uk-card-body .uk-subnav-pill > .uk-active > a, .uk-card-secondary > :not([class*='uk-card-media']) .uk-subnav-pill > .uk-active > a, .uk-overlay-primary .uk-subnav-pill > .uk-active > a, .uk-offcanvas-bar .uk-subnav-pill > .uk-active > a { + background-color: #fff; + color: #666; } -/*-------------------------------------------------------------- -# Widgets ---------------------------------------------------------------*/ -.widget-area { - width: 25%; +.uk-light .uk-subnav > .uk-disabled > a, .uk-section-primary:not(.uk-preserve-color) .uk-subnav > .uk-disabled > a, .uk-section-secondary:not(.uk-preserve-color) .uk-subnav > .uk-disabled > a, .uk-tile-primary:not(.uk-preserve-color) .uk-subnav > .uk-disabled > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-subnav > .uk-disabled > a, .uk-card-primary.uk-card-body .uk-subnav > .uk-disabled > a, .uk-card-primary > :not([class*='uk-card-media']) .uk-subnav > .uk-disabled > a, .uk-card-secondary.uk-card-body .uk-subnav > .uk-disabled > a, .uk-card-secondary > :not([class*='uk-card-media']) .uk-subnav > .uk-disabled > a, .uk-overlay-primary .uk-subnav > .uk-disabled > a, .uk-offcanvas-bar .uk-subnav > .uk-disabled > a { + color: rgba(255, 255, 255, 0.5); } -.widget { - margin: 0 0 1.5em; - /* Make sure select elements fit in widgets. */ +.uk-light .uk-breadcrumb > * > *, .uk-section-primary:not(.uk-preserve-color) .uk-breadcrumb > * > *, .uk-section-secondary:not(.uk-preserve-color) .uk-breadcrumb > * > *, .uk-tile-primary:not(.uk-preserve-color) .uk-breadcrumb > * > *, .uk-tile-secondary:not(.uk-preserve-color) .uk-breadcrumb > * > *, .uk-card-primary.uk-card-body .uk-breadcrumb > * > *, .uk-card-primary > :not([class*='uk-card-media']) .uk-breadcrumb > * > *, .uk-card-secondary.uk-card-body .uk-breadcrumb > * > *, .uk-card-secondary > :not([class*='uk-card-media']) .uk-breadcrumb > * > *, .uk-overlay-primary .uk-breadcrumb > * > *, .uk-offcanvas-bar .uk-breadcrumb > * > * { + color: rgba(255, 255, 255, 0.5); } -.widget select { - max-width: 100%; +.uk-light .uk-breadcrumb > * > :hover, .uk-section-primary:not(.uk-preserve-color) .uk-breadcrumb > * > :hover, .uk-section-secondary:not(.uk-preserve-color) .uk-breadcrumb > * > :hover, .uk-tile-primary:not(.uk-preserve-color) .uk-breadcrumb > * > :hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-breadcrumb > * > :hover, .uk-card-primary.uk-card-body .uk-breadcrumb > * > :hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-breadcrumb > * > :hover, .uk-card-secondary.uk-card-body .uk-breadcrumb > * > :hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-breadcrumb > * > :hover, .uk-overlay-primary .uk-breadcrumb > * > :hover, .uk-offcanvas-bar .uk-breadcrumb > * > :hover, +.uk-light .uk-breadcrumb > * > :focus, +.uk-section-primary:not(.uk-preserve-color) .uk-breadcrumb > * > :focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-breadcrumb > * > :focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-breadcrumb > * > :focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-breadcrumb > * > :focus, +.uk-card-primary.uk-card-body .uk-breadcrumb > * > :focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-breadcrumb > * > :focus, +.uk-card-secondary.uk-card-body .uk-breadcrumb > * > :focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-breadcrumb > * > :focus, +.uk-overlay-primary .uk-breadcrumb > * > :focus, +.uk-offcanvas-bar .uk-breadcrumb > * > :focus { + color: #fff; } -/*-------------------------------------------------------------- -# Content ---------------------------------------------------------------*/ -#page { - margin: 0 auto; - max-width: 100%; +.uk-light .uk-breadcrumb > :last-child > *, .uk-section-primary:not(.uk-preserve-color) .uk-breadcrumb > :last-child > *, .uk-section-secondary:not(.uk-preserve-color) .uk-breadcrumb > :last-child > *, .uk-tile-primary:not(.uk-preserve-color) .uk-breadcrumb > :last-child > *, .uk-tile-secondary:not(.uk-preserve-color) .uk-breadcrumb > :last-child > *, .uk-card-primary.uk-card-body .uk-breadcrumb > :last-child > *, .uk-card-primary > :not([class*='uk-card-media']) .uk-breadcrumb > :last-child > *, .uk-card-secondary.uk-card-body .uk-breadcrumb > :last-child > *, .uk-card-secondary > :not([class*='uk-card-media']) .uk-breadcrumb > :last-child > *, .uk-overlay-primary .uk-breadcrumb > :last-child > *, .uk-offcanvas-bar .uk-breadcrumb > :last-child > * { + color: #fff; } -.site-branding { - text-align: center; - margin: 60px 0; +.uk-light .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before, .uk-section-primary:not(.uk-preserve-color) .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before, .uk-section-secondary:not(.uk-preserve-color) .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before, .uk-tile-primary:not(.uk-preserve-color) .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before, .uk-tile-secondary:not(.uk-preserve-color) .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before, .uk-card-primary.uk-card-body .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before, .uk-card-primary > :not([class*='uk-card-media']) .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before, .uk-card-secondary.uk-card-body .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before, .uk-card-secondary > :not([class*='uk-card-media']) .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before, .uk-overlay-primary .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before, .uk-offcanvas-bar .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before { + color: rgba(255, 255, 255, 0.5); } -.site-footer { - margin: 1em 0; - opacity: 0.5; +.uk-light .uk-pagination > * > *, .uk-section-primary:not(.uk-preserve-color) .uk-pagination > * > *, .uk-section-secondary:not(.uk-preserve-color) .uk-pagination > * > *, .uk-tile-primary:not(.uk-preserve-color) .uk-pagination > * > *, .uk-tile-secondary:not(.uk-preserve-color) .uk-pagination > * > *, .uk-card-primary.uk-card-body .uk-pagination > * > *, .uk-card-primary > :not([class*='uk-card-media']) .uk-pagination > * > *, .uk-card-secondary.uk-card-body .uk-pagination > * > *, .uk-card-secondary > :not([class*='uk-card-media']) .uk-pagination > * > *, .uk-overlay-primary .uk-pagination > * > *, .uk-offcanvas-bar .uk-pagination > * > * { + color: rgba(255, 255, 255, 0.5); } -/*-------------------------------------------------------------- -## Posts and pages ---------------------------------------------------------------*/ -.sticky { - display: block; +.uk-light .uk-pagination > * > :hover, .uk-section-primary:not(.uk-preserve-color) .uk-pagination > * > :hover, .uk-section-secondary:not(.uk-preserve-color) .uk-pagination > * > :hover, .uk-tile-primary:not(.uk-preserve-color) .uk-pagination > * > :hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-pagination > * > :hover, .uk-card-primary.uk-card-body .uk-pagination > * > :hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-pagination > * > :hover, .uk-card-secondary.uk-card-body .uk-pagination > * > :hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-pagination > * > :hover, .uk-overlay-primary .uk-pagination > * > :hover, .uk-offcanvas-bar .uk-pagination > * > :hover, +.uk-light .uk-pagination > * > :focus, +.uk-section-primary:not(.uk-preserve-color) .uk-pagination > * > :focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-pagination > * > :focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-pagination > * > :focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-pagination > * > :focus, +.uk-card-primary.uk-card-body .uk-pagination > * > :focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-pagination > * > :focus, +.uk-card-secondary.uk-card-body .uk-pagination > * > :focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-pagination > * > :focus, +.uk-overlay-primary .uk-pagination > * > :focus, +.uk-offcanvas-bar .uk-pagination > * > :focus { + color: #fff; } -.hentry { - margin: 60px 0; +.uk-light .uk-pagination > .uk-active > *, .uk-section-primary:not(.uk-preserve-color) .uk-pagination > .uk-active > *, .uk-section-secondary:not(.uk-preserve-color) .uk-pagination > .uk-active > *, .uk-tile-primary:not(.uk-preserve-color) .uk-pagination > .uk-active > *, .uk-tile-secondary:not(.uk-preserve-color) .uk-pagination > .uk-active > *, .uk-card-primary.uk-card-body .uk-pagination > .uk-active > *, .uk-card-primary > :not([class*='uk-card-media']) .uk-pagination > .uk-active > *, .uk-card-secondary.uk-card-body .uk-pagination > .uk-active > *, .uk-card-secondary > :not([class*='uk-card-media']) .uk-pagination > .uk-active > *, .uk-overlay-primary .uk-pagination > .uk-active > *, .uk-offcanvas-bar .uk-pagination > .uk-active > * { + color: #fff; } -.updated:not(.published) { - display: none; +.uk-light .uk-pagination > .uk-disabled > *, .uk-section-primary:not(.uk-preserve-color) .uk-pagination > .uk-disabled > *, .uk-section-secondary:not(.uk-preserve-color) .uk-pagination > .uk-disabled > *, .uk-tile-primary:not(.uk-preserve-color) .uk-pagination > .uk-disabled > *, .uk-tile-secondary:not(.uk-preserve-color) .uk-pagination > .uk-disabled > *, .uk-card-primary.uk-card-body .uk-pagination > .uk-disabled > *, .uk-card-primary > :not([class*='uk-card-media']) .uk-pagination > .uk-disabled > *, .uk-card-secondary.uk-card-body .uk-pagination > .uk-disabled > *, .uk-card-secondary > :not([class*='uk-card-media']) .uk-pagination > .uk-disabled > *, .uk-overlay-primary .uk-pagination > .uk-disabled > *, .uk-offcanvas-bar .uk-pagination > .uk-disabled > * { + color: rgba(255, 255, 255, 0.5); } -.page-content, -.entry-content, -.entry-summary { - margin: 1.5em 0 0; +.uk-light .uk-tab > * > a, .uk-section-primary:not(.uk-preserve-color) .uk-tab > * > a, .uk-section-secondary:not(.uk-preserve-color) .uk-tab > * > a, .uk-tile-primary:not(.uk-preserve-color) .uk-tab > * > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-tab > * > a, .uk-card-primary.uk-card-body .uk-tab > * > a, .uk-card-primary > :not([class*='uk-card-media']) .uk-tab > * > a, .uk-card-secondary.uk-card-body .uk-tab > * > a, .uk-card-secondary > :not([class*='uk-card-media']) .uk-tab > * > a, .uk-overlay-primary .uk-tab > * > a, .uk-offcanvas-bar .uk-tab > * > a { + color: rgba(255, 255, 255, 0.5); } -.page-links { - clear: both; - margin: 0 0 1.5em; +.uk-light .uk-tab > * > a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-tab > * > a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-tab > * > a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-tab > * > a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-tab > * > a:hover, .uk-card-primary.uk-card-body .uk-tab > * > a:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-tab > * > a:hover, .uk-card-secondary.uk-card-body .uk-tab > * > a:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-tab > * > a:hover, .uk-overlay-primary .uk-tab > * > a:hover, .uk-offcanvas-bar .uk-tab > * > a:hover, +.uk-light .uk-tab > * > a:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-tab > * > a:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-tab > * > a:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-tab > * > a:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-tab > * > a:focus, +.uk-card-primary.uk-card-body .uk-tab > * > a:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-tab > * > a:focus, +.uk-card-secondary.uk-card-body .uk-tab > * > a:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-tab > * > a:focus, +.uk-overlay-primary .uk-tab > * > a:focus, +.uk-offcanvas-bar .uk-tab > * > a:focus { + color: #fff; } -.entry-header, -.page-header, -.entry-footer, -.site-info, -.post-navigation, -.page-navigation, -.comments-area, -.not-found .page-content, -.search .entry-summary { - margin: 1.5em auto; - padding-left: 14px; - padding-right: 14px; - max-width: 636px; +.uk-light .uk-tab > .uk-active > a, .uk-section-primary:not(.uk-preserve-color) .uk-tab > .uk-active > a, .uk-section-secondary:not(.uk-preserve-color) .uk-tab > .uk-active > a, .uk-tile-primary:not(.uk-preserve-color) .uk-tab > .uk-active > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-tab > .uk-active > a, .uk-card-primary.uk-card-body .uk-tab > .uk-active > a, .uk-card-primary > :not([class*='uk-card-media']) .uk-tab > .uk-active > a, .uk-card-secondary.uk-card-body .uk-tab > .uk-active > a, .uk-card-secondary > :not([class*='uk-card-media']) .uk-tab > .uk-active > a, .uk-overlay-primary .uk-tab > .uk-active > a, .uk-offcanvas-bar .uk-tab > .uk-active > a { + color: #ccc; } -.entry-header .wp-post-image { - margin-bottom: 1.5em; +.uk-light .uk-tab > .uk-disabled > a, .uk-section-primary:not(.uk-preserve-color) .uk-tab > .uk-disabled > a, .uk-section-secondary:not(.uk-preserve-color) .uk-tab > .uk-disabled > a, .uk-tile-primary:not(.uk-preserve-color) .uk-tab > .uk-disabled > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-tab > .uk-disabled > a, .uk-card-primary.uk-card-body .uk-tab > .uk-disabled > a, .uk-card-primary > :not([class*='uk-card-media']) .uk-tab > .uk-disabled > a, .uk-card-secondary.uk-card-body .uk-tab > .uk-disabled > a, .uk-card-secondary > :not([class*='uk-card-media']) .uk-tab > .uk-disabled > a, .uk-overlay-primary .uk-tab > .uk-disabled > a, .uk-offcanvas-bar .uk-tab > .uk-disabled > a { + color: rgba(255, 255, 255, 0.5); } -.entry-footer span { - margin-right: 1em; +.uk-light .uk-slidenav, .uk-section-primary:not(.uk-preserve-color) .uk-slidenav, .uk-section-secondary:not(.uk-preserve-color) .uk-slidenav, .uk-tile-primary:not(.uk-preserve-color) .uk-slidenav, .uk-tile-secondary:not(.uk-preserve-color) .uk-slidenav, .uk-card-primary.uk-card-body .uk-slidenav, .uk-card-primary > :not([class*='uk-card-media']) .uk-slidenav, .uk-card-secondary.uk-card-body .uk-slidenav, .uk-card-secondary > :not([class*='uk-card-media']) .uk-slidenav, .uk-overlay-primary .uk-slidenav, .uk-offcanvas-bar .uk-slidenav { + color: rgba(255, 255, 255, 0.7); } -.entry-footer { - color: #aaa; - font-size: 90%; - padding-bottom: 40px; - border-bottom: 1px solid #111; -} - -@media screen and (min-width: 664px) { - .entry-header, - .page-header, - .entry-footer, - .site-info, - .post-navigation, - .page-navigation, - .comments-area, - .not-found .page-content, - .search .entry-summary { - padding-left: 0; - padding-right: 0; - } +.uk-light .uk-slidenav:hover, .uk-section-primary:not(.uk-preserve-color) .uk-slidenav:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-slidenav:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-slidenav:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-slidenav:hover, .uk-card-primary.uk-card-body .uk-slidenav:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-slidenav:hover, .uk-card-secondary.uk-card-body .uk-slidenav:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-slidenav:hover, .uk-overlay-primary .uk-slidenav:hover, .uk-offcanvas-bar .uk-slidenav:hover, +.uk-light .uk-slidenav:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-slidenav:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-slidenav:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-slidenav:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-slidenav:focus, +.uk-card-primary.uk-card-body .uk-slidenav:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-slidenav:focus, +.uk-card-secondary.uk-card-body .uk-slidenav:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-slidenav:focus, +.uk-overlay-primary .uk-slidenav:focus, +.uk-offcanvas-bar .uk-slidenav:focus { + color: rgba(255, 255, 255, 0.95); } -/*-------------------------------------------------------------- -## Comments ---------------------------------------------------------------*/ -.comment-content a { - word-wrap: break-word; +.uk-light .uk-slidenav:active, .uk-section-primary:not(.uk-preserve-color) .uk-slidenav:active, .uk-section-secondary:not(.uk-preserve-color) .uk-slidenav:active, .uk-tile-primary:not(.uk-preserve-color) .uk-slidenav:active, .uk-tile-secondary:not(.uk-preserve-color) .uk-slidenav:active, .uk-card-primary.uk-card-body .uk-slidenav:active, .uk-card-primary > :not([class*='uk-card-media']) .uk-slidenav:active, .uk-card-secondary.uk-card-body .uk-slidenav:active, .uk-card-secondary > :not([class*='uk-card-media']) .uk-slidenav:active, .uk-overlay-primary .uk-slidenav:active, .uk-offcanvas-bar .uk-slidenav:active { + color: rgba(255, 255, 255, 0.7); } -.bypostauthor { - display: block; +.uk-light .uk-dotnav > * > *, .uk-section-primary:not(.uk-preserve-color) .uk-dotnav > * > *, .uk-section-secondary:not(.uk-preserve-color) .uk-dotnav > * > *, .uk-tile-primary:not(.uk-preserve-color) .uk-dotnav > * > *, .uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav > * > *, .uk-card-primary.uk-card-body .uk-dotnav > * > *, .uk-card-primary > :not([class*='uk-card-media']) .uk-dotnav > * > *, .uk-card-secondary.uk-card-body .uk-dotnav > * > *, .uk-card-secondary > :not([class*='uk-card-media']) .uk-dotnav > * > *, .uk-overlay-primary .uk-dotnav > * > *, .uk-offcanvas-bar .uk-dotnav > * > * { + background-color: transparent; } -/*-------------------------------------------------------------- -# Infinite scroll ---------------------------------------------------------------*/ -/* Globally hidden elements when Infinite Scroll is supported and in use. */ -.infinite-scroll .posts-navigation, -.infinite-scroll.neverending .site-footer { - /* Theme Footer (when set to scrolling) */ - display: none; +.uk-light .uk-dotnav > * > :hover, .uk-section-primary:not(.uk-preserve-color) .uk-dotnav > * > :hover, .uk-section-secondary:not(.uk-preserve-color) .uk-dotnav > * > :hover, .uk-tile-primary:not(.uk-preserve-color) .uk-dotnav > * > :hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav > * > :hover, .uk-card-primary.uk-card-body .uk-dotnav > * > :hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-dotnav > * > :hover, .uk-card-secondary.uk-card-body .uk-dotnav > * > :hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-dotnav > * > :hover, .uk-overlay-primary .uk-dotnav > * > :hover, .uk-offcanvas-bar .uk-dotnav > * > :hover, +.uk-light .uk-dotnav > * > :focus, +.uk-section-primary:not(.uk-preserve-color) .uk-dotnav > * > :focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-dotnav > * > :focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-dotnav > * > :focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav > * > :focus, +.uk-card-primary.uk-card-body .uk-dotnav > * > :focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-dotnav > * > :focus, +.uk-card-secondary.uk-card-body .uk-dotnav > * > :focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-dotnav > * > :focus, +.uk-overlay-primary .uk-dotnav > * > :focus, +.uk-offcanvas-bar .uk-dotnav > * > :focus { + background-color: rgba(255, 255, 255, 0.9); } -/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */ -.infinity-end.neverending .site-footer { - display: block; +.uk-light .uk-dotnav > * > :active, .uk-section-primary:not(.uk-preserve-color) .uk-dotnav > * > :active, .uk-section-secondary:not(.uk-preserve-color) .uk-dotnav > * > :active, .uk-tile-primary:not(.uk-preserve-color) .uk-dotnav > * > :active, .uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav > * > :active, .uk-card-primary.uk-card-body .uk-dotnav > * > :active, .uk-card-primary > :not([class*='uk-card-media']) .uk-dotnav > * > :active, .uk-card-secondary.uk-card-body .uk-dotnav > * > :active, .uk-card-secondary > :not([class*='uk-card-media']) .uk-dotnav > * > :active, .uk-overlay-primary .uk-dotnav > * > :active, .uk-offcanvas-bar .uk-dotnav > * > :active { + background-color: rgba(255, 255, 255, 0.5); } -/*-------------------------------------------------------------- -# Media ---------------------------------------------------------------*/ -.page-content .wp-smiley, -.entry-content .wp-smiley, -.comment-content .wp-smiley { - border: none; - margin-bottom: 0; - margin-top: 0; - padding: 0; +.uk-light .uk-dotnav > .uk-active > *, .uk-section-primary:not(.uk-preserve-color) .uk-dotnav > .uk-active > *, .uk-section-secondary:not(.uk-preserve-color) .uk-dotnav > .uk-active > *, .uk-tile-primary:not(.uk-preserve-color) .uk-dotnav > .uk-active > *, .uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav > .uk-active > *, .uk-card-primary.uk-card-body .uk-dotnav > .uk-active > *, .uk-card-primary > :not([class*='uk-card-media']) .uk-dotnav > .uk-active > *, .uk-card-secondary.uk-card-body .uk-dotnav > .uk-active > *, .uk-card-secondary > :not([class*='uk-card-media']) .uk-dotnav > .uk-active > *, .uk-overlay-primary .uk-dotnav > .uk-active > *, .uk-offcanvas-bar .uk-dotnav > .uk-active > * { + background-color: rgba(255, 255, 255, 0.9); } -/* Make sure embeds and iframes fit their containers. */ -embed, -iframe, -object { - max-width: 100%; +.uk-light .uk-accordion-title, .uk-section-primary:not(.uk-preserve-color) .uk-accordion-title, .uk-section-secondary:not(.uk-preserve-color) .uk-accordion-title, .uk-tile-primary:not(.uk-preserve-color) .uk-accordion-title, .uk-tile-secondary:not(.uk-preserve-color) .uk-accordion-title, .uk-card-primary.uk-card-body .uk-accordion-title, .uk-card-primary > :not([class*='uk-card-media']) .uk-accordion-title, .uk-card-secondary.uk-card-body .uk-accordion-title, .uk-card-secondary > :not([class*='uk-card-media']) .uk-accordion-title, .uk-overlay-primary .uk-accordion-title, .uk-offcanvas-bar .uk-accordion-title { + color: #ccc; } -/* Make sure logo link wraps around logo image. */ -.custom-logo-link { - display: inline-block; +.uk-light .uk-accordion-title:hover, .uk-section-primary:not(.uk-preserve-color) .uk-accordion-title:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-accordion-title:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-accordion-title:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-accordion-title:hover, .uk-card-primary.uk-card-body .uk-accordion-title:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-accordion-title:hover, .uk-card-secondary.uk-card-body .uk-accordion-title:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-accordion-title:hover, .uk-overlay-primary .uk-accordion-title:hover, .uk-offcanvas-bar .uk-accordion-title:hover, +.uk-light .uk-accordion-title:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-accordion-title:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-accordion-title:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-accordion-title:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-accordion-title:focus, +.uk-card-primary.uk-card-body .uk-accordion-title:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-accordion-title:focus, +.uk-card-secondary.uk-card-body .uk-accordion-title:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-accordion-title:focus, +.uk-overlay-primary .uk-accordion-title:focus, +.uk-offcanvas-bar .uk-accordion-title:focus { + color: #fff; } -/*-------------------------------------------------------------- -## Captions ---------------------------------------------------------------*/ -.wp-caption { - margin-bottom: 1.5em; - max-width: 100%; +.uk-light .uk-iconnav > * > a, .uk-section-primary:not(.uk-preserve-color) .uk-iconnav > * > a, .uk-section-secondary:not(.uk-preserve-color) .uk-iconnav > * > a, .uk-tile-primary:not(.uk-preserve-color) .uk-iconnav > * > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-iconnav > * > a, .uk-card-primary.uk-card-body .uk-iconnav > * > a, .uk-card-primary > :not([class*='uk-card-media']) .uk-iconnav > * > a, .uk-card-secondary.uk-card-body .uk-iconnav > * > a, .uk-card-secondary > :not([class*='uk-card-media']) .uk-iconnav > * > a, .uk-overlay-primary .uk-iconnav > * > a, .uk-offcanvas-bar .uk-iconnav > * > a { + color: rgba(255, 255, 255, 0.5); } -.wp-caption img[class*="wp-image-"] { - display: block; - margin-left: auto; - margin-right: auto; +.uk-light .uk-iconnav > * > a:hover, .uk-section-primary:not(.uk-preserve-color) .uk-iconnav > * > a:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-iconnav > * > a:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-iconnav > * > a:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-iconnav > * > a:hover, .uk-card-primary.uk-card-body .uk-iconnav > * > a:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-iconnav > * > a:hover, .uk-card-secondary.uk-card-body .uk-iconnav > * > a:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-iconnav > * > a:hover, .uk-overlay-primary .uk-iconnav > * > a:hover, .uk-offcanvas-bar .uk-iconnav > * > a:hover, +.uk-light .uk-iconnav > * > a:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-iconnav > * > a:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-iconnav > * > a:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-iconnav > * > a:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-iconnav > * > a:focus, +.uk-card-primary.uk-card-body .uk-iconnav > * > a:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-iconnav > * > a:focus, +.uk-card-secondary.uk-card-body .uk-iconnav > * > a:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-iconnav > * > a:focus, +.uk-overlay-primary .uk-iconnav > * > a:focus, +.uk-offcanvas-bar .uk-iconnav > * > a:focus { + color: #fff; } -.wp-caption .wp-caption-text { - margin: 0.8075em 0; +.uk-light .uk-iconnav > .uk-active > a, .uk-section-primary:not(.uk-preserve-color) .uk-iconnav > .uk-active > a, .uk-section-secondary:not(.uk-preserve-color) .uk-iconnav > .uk-active > a, .uk-tile-primary:not(.uk-preserve-color) .uk-iconnav > .uk-active > a, .uk-tile-secondary:not(.uk-preserve-color) .uk-iconnav > .uk-active > a, .uk-card-primary.uk-card-body .uk-iconnav > .uk-active > a, .uk-card-primary > :not([class*='uk-card-media']) .uk-iconnav > .uk-active > a, .uk-card-secondary.uk-card-body .uk-iconnav > .uk-active > a, .uk-card-secondary > :not([class*='uk-card-media']) .uk-iconnav > .uk-active > a, .uk-overlay-primary .uk-iconnav > .uk-active > a, .uk-offcanvas-bar .uk-iconnav > .uk-active > a { + color: #fff; } -.wp-caption-text { - text-align: center; +.uk-light .uk-text-lead, .uk-section-primary:not(.uk-preserve-color) .uk-text-lead, .uk-section-secondary:not(.uk-preserve-color) .uk-text-lead, .uk-tile-primary:not(.uk-preserve-color) .uk-text-lead, .uk-tile-secondary:not(.uk-preserve-color) .uk-text-lead, .uk-card-primary.uk-card-body .uk-text-lead, .uk-card-primary > :not([class*='uk-card-media']) .uk-text-lead, .uk-card-secondary.uk-card-body .uk-text-lead, .uk-card-secondary > :not([class*='uk-card-media']) .uk-text-lead, .uk-overlay-primary .uk-text-lead, .uk-offcanvas-bar .uk-text-lead { + color: #fff; } -/*-------------------------------------------------------------- -## Galleries ---------------------------------------------------------------*/ -.gallery { - margin-bottom: 1.5em; +.uk-light .uk-text-meta, .uk-section-primary:not(.uk-preserve-color) .uk-text-meta, .uk-section-secondary:not(.uk-preserve-color) .uk-text-meta, .uk-tile-primary:not(.uk-preserve-color) .uk-text-meta, .uk-tile-secondary:not(.uk-preserve-color) .uk-text-meta, .uk-card-primary.uk-card-body .uk-text-meta, .uk-card-primary > :not([class*='uk-card-media']) .uk-text-meta, .uk-card-secondary.uk-card-body .uk-text-meta, .uk-card-secondary > :not([class*='uk-card-media']) .uk-text-meta, .uk-overlay-primary .uk-text-meta, .uk-offcanvas-bar .uk-text-meta { + color: rgba(255, 255, 255, 0.5); } -.gallery-item { - display: inline-block; - text-align: center; - vertical-align: top; - width: 100%; +.uk-light .uk-text-muted, .uk-section-primary:not(.uk-preserve-color) .uk-text-muted, .uk-section-secondary:not(.uk-preserve-color) .uk-text-muted, .uk-tile-primary:not(.uk-preserve-color) .uk-text-muted, .uk-tile-secondary:not(.uk-preserve-color) .uk-text-muted, .uk-card-primary.uk-card-body .uk-text-muted, .uk-card-primary > :not([class*='uk-card-media']) .uk-text-muted, .uk-card-secondary.uk-card-body .uk-text-muted, .uk-card-secondary > :not([class*='uk-card-media']) .uk-text-muted, .uk-overlay-primary .uk-text-muted, .uk-offcanvas-bar .uk-text-muted { + color: rgba(255, 255, 255, 0.5) !important; } -.gallery-columns-2 .gallery-item { - max-width: 50%; +.uk-light .uk-text-emphasis, .uk-section-primary:not(.uk-preserve-color) .uk-text-emphasis, .uk-section-secondary:not(.uk-preserve-color) .uk-text-emphasis, .uk-tile-primary:not(.uk-preserve-color) .uk-text-emphasis, .uk-tile-secondary:not(.uk-preserve-color) .uk-text-emphasis, .uk-card-primary.uk-card-body .uk-text-emphasis, .uk-card-primary > :not([class*='uk-card-media']) .uk-text-emphasis, .uk-card-secondary.uk-card-body .uk-text-emphasis, .uk-card-secondary > :not([class*='uk-card-media']) .uk-text-emphasis, .uk-overlay-primary .uk-text-emphasis, .uk-offcanvas-bar .uk-text-emphasis { + color: #ccc !important; } -.gallery-columns-3 .gallery-item { - max-width: 33.3333333333%; +.uk-light .uk-text-primary, .uk-section-primary:not(.uk-preserve-color) .uk-text-primary, .uk-section-secondary:not(.uk-preserve-color) .uk-text-primary, .uk-tile-primary:not(.uk-preserve-color) .uk-text-primary, .uk-tile-secondary:not(.uk-preserve-color) .uk-text-primary, .uk-card-primary.uk-card-body .uk-text-primary, .uk-card-primary > :not([class*='uk-card-media']) .uk-text-primary, .uk-card-secondary.uk-card-body .uk-text-primary, .uk-card-secondary > :not([class*='uk-card-media']) .uk-text-primary, .uk-overlay-primary .uk-text-primary, .uk-offcanvas-bar .uk-text-primary { + color: #fff !important; } -.gallery-columns-4 .gallery-item { - max-width: 25%; +.uk-light .uk-text-secondary, .uk-section-primary:not(.uk-preserve-color) .uk-text-secondary, .uk-section-secondary:not(.uk-preserve-color) .uk-text-secondary, .uk-tile-primary:not(.uk-preserve-color) .uk-text-secondary, .uk-tile-secondary:not(.uk-preserve-color) .uk-text-secondary, .uk-card-primary.uk-card-body .uk-text-secondary, .uk-card-primary > :not([class*='uk-card-media']) .uk-text-secondary, .uk-card-secondary.uk-card-body .uk-text-secondary, .uk-card-secondary > :not([class*='uk-card-media']) .uk-text-secondary, .uk-overlay-primary .uk-text-secondary, .uk-offcanvas-bar .uk-text-secondary { + color: #fff !important; } -.gallery-columns-5 .gallery-item { - max-width: 20%; +.uk-light .uk-column-divider, .uk-section-primary:not(.uk-preserve-color) .uk-column-divider, .uk-section-secondary:not(.uk-preserve-color) .uk-column-divider, .uk-tile-primary:not(.uk-preserve-color) .uk-column-divider, .uk-tile-secondary:not(.uk-preserve-color) .uk-column-divider, .uk-card-primary.uk-card-body .uk-column-divider, .uk-card-primary > :not([class*='uk-card-media']) .uk-column-divider, .uk-card-secondary.uk-card-body .uk-column-divider, .uk-card-secondary > :not([class*='uk-card-media']) .uk-column-divider, .uk-overlay-primary .uk-column-divider, .uk-offcanvas-bar .uk-column-divider { + -webkit-column-rule-color: rgba(255, 255, 255, 0.2); + column-rule-color: rgba(255, 255, 255, 0.2); } -.gallery-columns-6 .gallery-item { - max-width: 16.6666666667%; +.uk-light .uk-logo, .uk-section-primary:not(.uk-preserve-color) .uk-logo, .uk-section-secondary:not(.uk-preserve-color) .uk-logo, .uk-tile-primary:not(.uk-preserve-color) .uk-logo, .uk-tile-secondary:not(.uk-preserve-color) .uk-logo, .uk-card-primary.uk-card-body .uk-logo, .uk-card-primary > :not([class*='uk-card-media']) .uk-logo, .uk-card-secondary.uk-card-body .uk-logo, .uk-card-secondary > :not([class*='uk-card-media']) .uk-logo, .uk-overlay-primary .uk-logo, .uk-offcanvas-bar .uk-logo { + color: #fff; } -.gallery-columns-7 .gallery-item { - max-width: 14.2857142857%; +.uk-light .uk-logo:hover, .uk-section-primary:not(.uk-preserve-color) .uk-logo:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-logo:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-logo:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-logo:hover, .uk-card-primary.uk-card-body .uk-logo:hover, .uk-card-primary > :not([class*='uk-card-media']) .uk-logo:hover, .uk-card-secondary.uk-card-body .uk-logo:hover, .uk-card-secondary > :not([class*='uk-card-media']) .uk-logo:hover, .uk-overlay-primary .uk-logo:hover, .uk-offcanvas-bar .uk-logo:hover, +.uk-light .uk-logo:focus, +.uk-section-primary:not(.uk-preserve-color) .uk-logo:focus, +.uk-section-secondary:not(.uk-preserve-color) .uk-logo:focus, +.uk-tile-primary:not(.uk-preserve-color) .uk-logo:focus, +.uk-tile-secondary:not(.uk-preserve-color) .uk-logo:focus, +.uk-card-primary.uk-card-body .uk-logo:focus, +.uk-card-primary > :not([class*='uk-card-media']) .uk-logo:focus, +.uk-card-secondary.uk-card-body .uk-logo:focus, +.uk-card-secondary > :not([class*='uk-card-media']) .uk-logo:focus, +.uk-overlay-primary .uk-logo:focus, +.uk-offcanvas-bar .uk-logo:focus { + color: #fff; } -.gallery-columns-8 .gallery-item { - max-width: 12.5%; +.uk-light .uk-logo > :not(.uk-logo-inverse):not(:only-of-type), .uk-section-primary:not(.uk-preserve-color) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type), .uk-section-secondary:not(.uk-preserve-color) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type), .uk-tile-primary:not(.uk-preserve-color) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type), .uk-tile-secondary:not(.uk-preserve-color) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type), .uk-card-primary.uk-card-body .uk-logo > :not(.uk-logo-inverse):not(:only-of-type), .uk-card-primary > :not([class*='uk-card-media']) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type), .uk-card-secondary.uk-card-body .uk-logo > :not(.uk-logo-inverse):not(:only-of-type), .uk-card-secondary > :not([class*='uk-card-media']) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type), .uk-overlay-primary .uk-logo > :not(.uk-logo-inverse):not(:only-of-type), .uk-offcanvas-bar .uk-logo > :not(.uk-logo-inverse):not(:only-of-type) { + display: none; } -.gallery-columns-9 .gallery-item { - max-width: 11.1111111111%; +.uk-light .uk-logo-inverse, .uk-section-primary:not(.uk-preserve-color) .uk-logo-inverse, .uk-section-secondary:not(.uk-preserve-color) .uk-logo-inverse, .uk-tile-primary:not(.uk-preserve-color) .uk-logo-inverse, .uk-tile-secondary:not(.uk-preserve-color) .uk-logo-inverse, .uk-card-primary.uk-card-body .uk-logo-inverse, .uk-card-primary > :not([class*='uk-card-media']) .uk-logo-inverse, .uk-card-secondary.uk-card-body .uk-logo-inverse, .uk-card-secondary > :not([class*='uk-card-media']) .uk-logo-inverse, .uk-overlay-primary .uk-logo-inverse, .uk-offcanvas-bar .uk-logo-inverse { + display: inline; } -.gallery-caption { - display: block; +/* ======================================================================== + Component: Print + ========================================================================== */ +@media print { + *, + *::before, + *::after { + background: transparent !important; + color: black !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + text-shadow: none !important; + } + a, + a:visited { + text-decoration: underline; + } + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + thead { + display: table-header-group; + } + tr, + img { + page-break-inside: avoid; + } + img { + max-width: 100% !important; + } + @page { + margin: 0.5cm; + } + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + h2, + h3 { + page-break-after: avoid; + } } /*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/style.scss b/style.scss index 26f13e7..7bc583f 100644 --- a/style.scss +++ b/style.scss @@ -16,968 +16,21 @@ Use it to make something cool, have fun, and share what you've learned with othe Team WP is based on gutenbergtheme https://github.com/WordPress/gutenberg-starter-theme. gutenbergtheme is distributed under the terms of the GNU GPL v2 or later. */ -/*-------------------------------------------------------------- ->>> TABLE OF CONTENTS: ----------------------------------------------------------------- -# Normalize -# Typography -# Elements -# Forms -# Navigation - ## Links - ## Menus -# Accessibility -# Alignments -# Widgets -# Content - ## Posts and pages - ## Comments -# Infinite scroll -# Media - ## Captions - ## Galleries ---------------------------------------------------------------*/ -/*-------------------------------------------------------------- -# Normalize ---------------------------------------------------------------*/ -html { - font-family: sans-serif; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} - -body { - margin: 0; -} - -article, -aside, -details, -figcaption, -figure, -footer, -header, -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: bold; -} - -dfn { - font-style: italic; -} - -h1 { - font-size: 2.44em; - margin: 0.67em 0; - line-height: 1.4; -} - -h2 { - font-size: 1.95em; - line-height: 1.4; -} - -h3 { - font-size: 1.56em; - line-height: 1.4; -} - -h4 { - font-size: 1.25em; - line-height: 1.5; -} - -h5 { - font-size: 1em; -} - -h6 { - font-size: 0.8em; -} - -mark { - background: #ff0; - color: #000; -} - -small { - font-size: 80%; -} - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -img { - border: 0; -} - -svg:not(:root) { - overflow: hidden; -} - -figure { - margin: 1em 40px; -} - -hr { - 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-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -legend { - border: 0; - padding: 0; -} - -textarea { - overflow: auto; -} - -optgroup { - font-weight: bold; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { - padding: 0; -} - -/*-------------------------------------------------------------- -# Typography ---------------------------------------------------------------*/ -body, -button, -input, -select, -optgroup, -textarea { - color: #444; - font-family: "Noto Serif", serif; - font-size: 16px; - font-size: 1rem; - line-height: 1.8; -} - -h1, h2, h3, h4, h5, h6 { - color: #32373c; - clear: both; -} - -.entry-header h1.entry-title { - font-size: 2.44em; - line-height: 1.4; - margin: 1em 0; -} - -dfn, cite, em, i { - font-style: italic; -} - -blockquote { - margin: 0 1.5em; -} - -address { - margin: 0 0 1.5em; -} - -pre { - background: #eee; - font-family: "Courier 10 Pitch", Courier, monospace; - font-size: 15px; - font-size: 0.9375rem; - line-height: 1.6; - margin-bottom: 1.6em; - max-width: 100%; - overflow: auto; - padding: 1.6em; -} - -code, kbd, tt, var { - font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; - font-size: 15px; - font-size: 0.9375rem; -} - -abbr, acronym { - border-bottom: 1px dotted #666; - cursor: help; -} - -mark, ins { - background: #fff9c0; - text-decoration: none; -} - -big { - font-size: 125%; -} - -.archive .site-header { - margin-bottom: 3.5em; -} - -.site-title { - margin: .4375em 0 0; - font-size: 38px; - font-weight: bold; - line-height: 1.2; - color: #333332; -} - -.site-title a { - text-decoration: none; - color: inherit; -} - -.site-branding { - margin-bottom: 1.75em; -} - -.site-description { - margin: .4375em 0 0; - font-size: 17px; - font-weight: inherit; - line-height: 1.4; - word-wrap: break-word; - color: #929292; -} -/*-------------------------------------------------------------- -# Elements ---------------------------------------------------------------*/ -html { - box-sizing: border-box; -} - -*, -*:before, -*:after { - /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ - box-sizing: inherit; -} - -body { - background: #fff; - /* Fallback for when there is no custom background color defined. */ } - -blockquote, q { - quotes: "" ""; } - blockquote:before, blockquote:after, q:before, q:after { - content: ""; } - -hr { - border: 0; - height: 1px; - margin-bottom: 1.5em; -} - -ul, ol { - margin: 0 0 1.5em 3em; -} - -ul { - list-style: disc; -} - -ol { - list-style: decimal; -} - -li > ul, -li > ol { - margin-bottom: 0; - margin-left: 1.5em; -} - -dt { - font-weight: bold; -} - -dd { - margin: 0 1.5em 1.5em; -} - -img { - height: auto; - /* Make sure images are scaled correctly. */ - max-width: 100%; - /* Adhere to container width. */ -} - -figure { - margin: 1em 0; - /* Extra wide images within figure tags don't overflow the content area. */ -} - -table { - margin: 0 0 1.5em; - width: 100%; -} - -/*-------------------------------------------------------------- -# Forms ---------------------------------------------------------------*/ -button, -input[type="button"], -input[type="reset"], -input[type="submit"] { - border: 1px solid; - border-color: #ccc #ccc #bbb; - border-radius: 3px; - background: #e6e6e6; - color: rgba(0, 0, 0, 0.8); - font-size: 12px; - font-size: 0.75rem; - line-height: 1; - padding: .6em 1em .4em; -} - -button:hover, -input[type="button"]:hover, -input[type="reset"]:hover, -input[type="submit"]:hover { - border-color: #ccc #bbb #aaa; -} - -button:active, button:focus, -input[type="button"]:active, -input[type="button"]:focus, -input[type="reset"]:active, -input[type="reset"]:focus, -input[type="submit"]:active, -input[type="submit"]:focus { - border-color: #aaa #bbb #bbb; -} - -input[type="text"], -input[type="email"], -input[type="url"], -input[type="password"], -input[type="search"], -input[type="number"], -input[type="tel"], -input[type="range"], -input[type="date"], -input[type="month"], -input[type="week"], -input[type="time"], -input[type="datetime"], -input[type="datetime-local"], -input[type="color"], -textarea { - color: #666; - border: 1px solid #ccc; - border-radius: 3px; - padding: 3px; -} - -input[type="text"]:focus, -input[type="email"]:focus, -input[type="url"]:focus, -input[type="password"]:focus, -input[type="search"]:focus, -input[type="number"]:focus, -input[type="tel"]:focus, -input[type="range"]:focus, -input[type="date"]:focus, -input[type="month"]:focus, -input[type="week"]:focus, -input[type="time"]:focus, -input[type="datetime"]:focus, -input[type="datetime-local"]:focus, -input[type="color"]:focus, -textarea:focus { - color: #111; -} - -select { - border: 1px solid #ccc; -} - -textarea { - width: 100%; -} - -/*-------------------------------------------------------------- -# Navigation ---------------------------------------------------------------*/ -/*-------------------------------------------------------------- -## Links ---------------------------------------------------------------*/ -a { - color: #0073aa; -} - -a:visited { - color: #333; -} - -a:hover, a:focus, a:active { - color: #00a0d2; -} - -a:focus { - outline: thin dotted; -} - -a:hover, a:active { - outline: 0; -} - -/*-------------------------------------------------------------- -## Menus ---------------------------------------------------------------*/ -.main-navigation { - clear: both; - display: block; - margin: 0 auto; - max-width: 636px; - text-align: center; -} - -.main-navigation ul { - display: none; - list-style: none; - margin: 0; - padding-left: 0; -} - -.main-navigation ul ul { - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); - float: left; - position: absolute; - top: 100%; - left: -999em; - z-index: 99999; - text-align: left; -} - -.main-navigation ul ul ul { - left: -999em; - top: 0; -} - -.main-navigation ul ul li:hover > ul, -.main-navigation ul ul li.focus > ul { - left: 100%; -} - -.main-navigation ul ul a { - width: 200px; -} - -.main-navigation ul li:hover > ul, -.main-navigation ul li.focus > ul { - display: block; - left: auto; -} - -.main-navigation li { - position: relative; -} - -.main-navigation a { - display: block; - text-decoration: none; -} - -.menu-toggle { - padding: 1em; -} - -@media screen and (max-width: 37.5em) { - /* Small menu. */ - .menu-toggle, - .main-navigation.toggled ul { - display: block; - margin: 0 auto; - } -} - -@media screen and (min-width: 37.5em) { - .menu-toggle { - display: none; - } - .main-navigation ul { - display: flex; - justify-content: center; - flex-wrap: wrap; - } - - .main-navigation a { - padding: 0 .5em; - } -} - -.site-main .comment-navigation, -.site-main .posts-navigation, -.site-main .post-navigation { - border-bottom: 1px solid #111; - margin: 0 auto 60px; - max-width: 636px; - overflow: hidden; - padding-bottom: 60px; -} - -.nav-links { - display: flex; -} - -.comment-navigation .nav-previous, -.posts-navigation .nav-previous, -.post-navigation .nav-previous { - width: 50%; - flex: 1 0 50%; -} - -.comment-navigation .nav-next, -.posts-navigation .nav-next, -.post-navigation .nav-next { - text-align: end; - flex: 1 0 50%; -} - -/*-------------------------------------------------------------- -# Accessibility ---------------------------------------------------------------*/ -/* Text meant only for screen readers. */ -.screen-reader-text { - clip: rect(1px, 1px, 1px, 1px); - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - word-wrap: normal !important; - /* Many screen reader and browser combinations announce broken words as they would appear visually. */ -} - -.screen-reader-text:focus { - background-color: #f1f1f1; - border-radius: 3px; - box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); - clip: auto !important; - color: #21759b; - display: block; - font-size: 14px; - font-size: 0.875rem; - font-weight: bold; - height: auto; - left: 5px; - line-height: normal; - padding: 15px 23px 14px; - text-decoration: none; - top: 5px; - width: auto; - z-index: 100000; - /* Above WP toolbar. */ -} - -/* Do not show the outline on the skip link target. */ -#primary[tabindex="-1"]:focus { - outline: 0; -} - -/*-------------------------------------------------------------- -# Alignments ---------------------------------------------------------------*/ - -.alignleft, -.alignright { - max-width: 636px !important; /* Let's work to make this !important unnecessary */ -} - -.alignleft img, -.alignright img, -.alignleft figcaption, -.alignright figcaption { - max-width: 50%; - width: 50%; -} - -.alignleft figcaption { - clear: left; -} - -.alignright figcaption { - clear: right; -} - -.alignleft img, -.alignleft figcaption { - float: left; - margin-right: 1.5em; -} - -.alignright img, -.alignright figcaption { - float: right; - margin-left: 1.5em; -} - -.aligncenter { - clear: both; - display: block; - margin-left: auto; - margin-right: auto; -} - - -/*-------------------------------------------------------------- -# Widgets ---------------------------------------------------------------*/ -.widget-area { - width: 25%; -} - -.widget { - margin: 0 0 1.5em; - /* Make sure select elements fit in widgets. */ -} - -.widget select { - max-width: 100%; -} - -/*-------------------------------------------------------------- -# Content ---------------------------------------------------------------*/ -#page { - margin: 0 auto; - max-width: 100%; -} - -.site-branding { - text-align: center; - margin: 60px 0; -} - -.site-footer { - margin: 1em 0; - opacity: 0.5; -} /*-------------------------------------------------------------- -## Posts and pages +# Include UIKit 3 +# Reference https://getuikit.com/docs/sass --------------------------------------------------------------*/ -.sticky { - display: block; -} - -.hentry { - margin: 60px 0; -} - -.updated:not(.published) { - display: none; -} - -.page-content, -.entry-content, -.entry-summary { - margin: 1.5em 0 0; -} - -.page-links { - clear: both; - margin: 0 0 1.5em; -} - -.entry-header, -.page-header, -.entry-footer, -.site-info, -.post-navigation, -.page-navigation, -.comments-area, -.not-found .page-content, -.search .entry-summary { - margin: 1.5em auto; - padding-left: 14px; - padding-right: 14px; - max-width: 636px; -} - -.entry-header .wp-post-image { - margin-bottom: 1.5em; -} - -.entry-footer span{ - margin-right: 1em; -} - -.entry-footer{ - color: #aaa; - font-size: 90%; - padding-bottom: 40px; - border-bottom: 1px solid #111; -} - -@media screen and (min-width: 664px) { - .entry-header, - .page-header, - .entry-footer, - .site-info, - .post-navigation, - .page-navigation, - .comments-area, - .not-found .page-content, - .search .entry-summary { - padding-left: 0; - padding-right: 0; - } -} - -/*-------------------------------------------------------------- -## Comments ---------------------------------------------------------------*/ -.comment-content a { - word-wrap: break-word; -} - -.bypostauthor { - display: block; -} - -/*-------------------------------------------------------------- -# Infinite scroll ---------------------------------------------------------------*/ -/* Globally hidden elements when Infinite Scroll is supported and in use. */ -.infinite-scroll .posts-navigation, -.infinite-scroll.neverending .site-footer { - /* Theme Footer (when set to scrolling) */ - display: none; -} - -/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */ -.infinity-end.neverending .site-footer { - display: block; -} - -/*-------------------------------------------------------------- -# Media ---------------------------------------------------------------*/ -.page-content .wp-smiley, -.entry-content .wp-smiley, -.comment-content .wp-smiley { - border: none; - margin-bottom: 0; - margin-top: 0; - padding: 0; -} - -/* Make sure embeds and iframes fit their containers. */ -embed, -iframe, -object { - max-width: 100%; -} - -/* Make sure logo link wraps around logo image. */ -.custom-logo-link { - display: inline-block; -} - -/*-------------------------------------------------------------- -## Captions ---------------------------------------------------------------*/ -.wp-caption { - margin-bottom: 1.5em; - max-width: 100%; -} - -.wp-caption img[class*="wp-image-"] { - display: block; - margin-left: auto; - margin-right: auto; -} - -.wp-caption .wp-caption-text { - margin: 0.8075em 0; -} - -.wp-caption-text { - text-align: center; -} - -/*-------------------------------------------------------------- -## Galleries ---------------------------------------------------------------*/ -.gallery { - margin-bottom: 1.5em; -} - -.gallery-item { - display: inline-block; - text-align: center; - vertical-align: top; - width: 100%; -} - -.gallery-columns-2 .gallery-item { - max-width: 50%; -} - -.gallery-columns-3 .gallery-item { - max-width: 33.3333333333%; -} - -.gallery-columns-4 .gallery-item { - max-width: 25%; -} - -.gallery-columns-5 .gallery-item { - max-width: 20%; -} - -.gallery-columns-6 .gallery-item { - max-width: 16.6666666667%; -} -.gallery-columns-7 .gallery-item { - max-width: 14.2857142857%; -} +// 1. Your custom variables and variable overwrites. +@import "scss/_import-variables.scss"; -.gallery-columns-8 .gallery-item { - max-width: 12.5%; -} +// 2. Import default variables and available mixins. +@import "lib/uikit/src/scss/variables.scss"; +@import "lib/uikit/src/scss/mixins.scss"; -.gallery-columns-9 .gallery-item { - max-width: 11.1111111111%; -} +// 3. Your custom mixin overwrites. +@import "scss/_import-mixins"; -.gallery-caption { - display: block; -} +// 4. Import UIkit +@import "lib/uikit/src/scss/uikit.scss"; \ No newline at end of file