uikit-sass-rails 1.3.0 → 1.4.0

data/vendor/assets/stylesheets/uikit/uikit.scss

@@ -1,4 +1,4 @@
-/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+/*! UIkit 2.20.3 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
 /* ========================================================================
    Component: Base
  ========================================================================== */
@@ -371,7 +371,7 @@ pre {
   overflow: auto;
 }
 
-/* Selection pseudo-element
+/* Selection pseudo-element 
  ========================================================================== */
 
 ::-moz-selection, ::selection {
@@ -430,69 +430,62 @@ iframe {
    Component: Grid
  ========================================================================== */
 /*
- * Micro clearfix
+ * 1. Makes grid more robust so that it can be used with other block elements like lists
  */
 
 .uk-grid {
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  flex-wrap: wrap;
+  /* 1 */
+  margin: 0;
+  padding: 0;
+  list-style: none;
   &:before {
-    content: " ";
-    display: table;
+    content: "";
+    display: block;
+    overflow: hidden;
   }
   &:after {
-    content: " ";
-    display: table;
+    content: "";
+    display: block;
+    overflow: hidden;
     clear: both;
   }
-  /* 1 */
-  margin: 0 0 0 -25px;
-  /* 2 */
-  padding: 0;
-  list-style: none;
   > * {
     /* 1 */
-    margin: 0;
+    -ms-flex: none;
+    -webkit-flex: none;
+    flex: none;
     /* 2 */
-    padding-left: 25px;
+    margin: 0;
     /* 3 */
     float: left;
     > :last-child {
       margin-bottom: 0;
     }
+    padding-left: 25px;
   }
+  margin-left: -25px;
   + .uk-grid {
     margin-top: 25px;
   }
-  > {
-    .uk-grid-margin, * > .uk-panel + .uk-panel {
-      margin-top: 25px;
-    }
-  }
-  &.uk-grid-small {
-    margin-left: -10px;
-    > * {
-      padding-left: 10px;
-    }
-    + .uk-grid-small {
-      margin-top: 10px;
-    }
-    > {
-      .uk-grid-margin, * > .uk-panel + .uk-panel {
-        margin-top: 10px;
-      }
-    }
-  }
 }
 
 /*
- * 1. Needed for the gutter
- * 2. Makes grid more robust so that it can be used with other block elements like lists
+ * DEPRECATED
+ * Micro clearfix
+ * Can't use `table` because it creates a 1px gap when it becomes a flex item, only in Webkit
  */
 
 /*
  * Grid cell
- * 1. Makes grid more robust so that it can be used with other block elements
- * 2. Create horizontal gutter
- * 3. `float` is set by default so columns always behave the same and create a new block format context
+ * 1. Space is allocated solely based on content dimensions
+ * 2. Makes grid more robust so that it can be used with other block elements
+ * 3. DEPRECATED Using `float` to support IE9
  */
 
 /*
@@ -502,25 +495,20 @@ iframe {
 /* Grid gutter
  ========================================================================== */
 /*
- * Vertical gutter
+ * Default gutter
  */
+/* Horizontal */
 
-/*
- * This class is set by JavaScript and applies a vertical gutter if the columns stack or float into the next row
- * Higher specificity to override margin
- */
+/* Vertical */
 
-/*
- * Vertical gutter for panels
- */
+.uk-grid-margin, .uk-grid > * > .uk-panel + .uk-panel {
+  margin-top: 25px;
+}
 
-/*
- * Larger gutter for large screens
- */
 /* Large screen and bigger */
 @media (min-width: 1220px) {
-  /* Horizontal gutter */
-  .uk-grid:not(.uk-grid-preserve) {
+  /* Horizontal */
+  .uk-grid {
     margin-left: -35px;
     > * {
       padding-left: 35px;
@@ -528,26 +516,85 @@ iframe {
     + .uk-grid {
       margin-top: 35px;
     }
-    > {
-      .uk-grid-margin, * > .uk-panel + .uk-panel {
-        margin-top: 35px;
-      }
+  }
+  /* Vertical */
+  .uk-grid-margin, .uk-grid > * > .uk-panel + .uk-panel {
+    margin-top: 35px;
+  }
+}
+
+/*
+ * Collapse gutter
+ */
+/* Horizontal */
+
+.uk-grid-collapse {
+  margin-left: 0;
+  > * {
+    padding-left: 0;
+  }
+  + .uk-grid-collapse {
+    margin-top: 0;
+  }
+  > {
+    .uk-grid-margin, * > .uk-panel + .uk-panel {
+      margin-top: 0;
     }
   }
-  /* Vertical gutter */
-  /* Vertical gutter for panels */
 }
 
+/* Vertical */
+
 /*
  * Small gutter
- * Higher specificity to override large gutter
  */
+/* Horizontal */
+
+.uk-grid-small {
+  margin-left: -10px;
+  > * {
+    padding-left: 10px;
+  }
+  + .uk-grid-small {
+    margin-top: 10px;
+  }
+  > {
+    .uk-grid-margin, * > .uk-panel + .uk-panel {
+      margin-top: 10px;
+    }
+  }
+}
+
+/* Vertical */
+
+/*
+ * Medium gutter
+ */
+/* Horizontal */
+
+.uk-grid-medium {
+  margin-left: -25px;
+  > * {
+    padding-left: 25px;
+  }
+  + .uk-grid-medium {
+    margin-top: 25px;
+  }
+  > {
+    .uk-grid-margin, * > .uk-panel + .uk-panel {
+      margin-top: 25px;
+    }
+  }
+}
+
+/* Vertical */
 
 /* Modifier: `uk-grid-divider`
  ========================================================================== */
 /*
  * Horizontal divider
- * Does not work with `uk-push-*`, `uk-pull-*` and not if the columns float into the next row
+ * Only works with the default gutter. Does not work with gutter collapse, small or large.
+ * Does not work with `uk-push-*`, `uk-pull-*` and not if the columns float into the next row.
  */
 
 .uk-grid-divider {
@@ -590,7 +637,7 @@ iframe {
   /*
      * Large gutter
      */
-  .uk-grid-divider:not(.uk-grid-preserve) {
+  .uk-grid-divider {
     &:not(:empty) {
       margin-left: -35px;
       margin-right: -35px;
@@ -610,6 +657,31 @@ iframe {
  * Vertical divider
  */
 
+/* Match panels in grids
+ ========================================================================== */
+
+.uk-grid-match > * {
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  > * {
+    /* 1 */
+    -ms-flex: none;
+    -webkit-flex: none;
+    flex: none;
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    width: 100%;
+  }
+}
+
+/*
+ * 1. Behave like a block element
+ */
+
 /* Even grid cell widths
  ========================================================================== */
 
@@ -1132,12 +1204,16 @@ iframe {
   display: block;
   /* 2 */
   position: relative;
+  text-decoration: none;
+  &:hover {
+    text-decoration: none;
+  }
   &:before {
-    content: " ";
+    content: "";
     display: table;
   }
   &:after {
-    content: " ";
+    content: "";
     display: table;
     clear: both;
   }
@@ -1146,6 +1222,10 @@ iframe {
   }
 }
 
+/*
+ * Allow panels to be anchors
+ */
+
 /*
  * Micro clearfix to make panels more robust
  */
@@ -1177,6 +1257,13 @@ iframe {
   z-index: 1;
 }
 
+/* Sub-object: `uk-panel-teaser`
+ ========================================================================== */
+
+.uk-panel-teaser {
+  margin-bottom: 15px;
+}
+
 /* Modifier: `uk-panel-box`
  ========================================================================== */
 
@@ -1184,6 +1271,13 @@ iframe {
   padding: 15px;
   background: #f5f5f5;
   color: #444444;
+}
+
+.uk-panel-box-hover:hover {
+  color: #444444;
+}
+
+.uk-panel-box {
   .uk-panel-title {
     color: #444444;
   }
@@ -1192,7 +1286,9 @@ iframe {
     right: 10px;
   }
   .uk-panel-teaser {
-    margin: -15px -15px 15px -15px;
+    margin-top: -15px;
+    margin-left: -15px;
+    margin-right: -15px;
   }
   > .uk-nav-side {
     margin: 0 -15px;
@@ -1210,9 +1306,10 @@ iframe {
 .uk-panel-box-primary {
   background-color: #ebf7fd;
   color: #2d7091;
-  .uk-panel-title {
-    color: #2d7091;
-  }
+}
+
+.uk-panel-box-primary-hover:hover, .uk-panel-box-primary .uk-panel-title {
+  color: #2d7091;
 }
 
 /*
@@ -1222,9 +1319,31 @@ iframe {
 .uk-panel-box-secondary {
   background-color: #eeeeee;
   color: #444444;
-  .uk-panel-title {
+}
+
+.uk-panel-box-secondary-hover:hover, .uk-panel-box-secondary .uk-panel-title {
+  color: #444444;
+}
+
+/* Modifier: `uk-panel-hover`
+ ========================================================================== */
+
+.uk-panel-hover {
+  padding: 15px;
+  color: #444444;
+  &:hover {
+    background: #f5f5f5;
     color: #444444;
   }
+  .uk-panel-badge {
+    top: 10px;
+    right: 10px;
+  }
+  .uk-panel-teaser {
+    margin-top: -15px;
+    margin-left: -15px;
+    margin-right: -15px;
+  }
 }
 
 /* Modifier: `uk-panel-header`
@@ -1273,6 +1392,115 @@ iframe {
   }
 }
 
+/* ========================================================================
+   Component: Block
+ ========================================================================== */
+
+.uk-block {
+  position: relative;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  &:before {
+    content: "";
+    display: table;
+  }
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+/* Phone landscape and bigger */
+@media (min-width: 768px) {
+  .uk-block {
+    padding-top: 50px;
+    padding-bottom: 50px;
+  }
+}
+
+/*
+ * Micro clearfix to make blocks more robust
+ */
+
+/*
+ * Remove margin from the last-child
+ */
+
+/* Padding Modifier
+ ========================================================================== */
+/*
+ * Large padding
+ */
+
+.uk-block-large {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+/* Tablets and bigger */
+@media (min-width: 768px) {
+  .uk-block-large {
+    padding-top: 50px;
+    padding-bottom: 50px;
+  }
+}
+
+/* Desktop and bigger */
+@media (min-width: 960px) {
+  .uk-block-large {
+    padding-top: 100px;
+    padding-bottom: 100px;
+  }
+}
+
+/* Color Modifier
+ ========================================================================== */
+/*
+ * Default
+ */
+
+.uk-block-default {
+  background: #ffffff;
+}
+
+/*
+ * Muted
+ */
+
+.uk-block-muted {
+  background: #f9f9f9;
+}
+
+/*
+ * Primary
+ */
+
+.uk-block-primary {
+  background: #00a8e6;
+}
+
+/*
+ * Secondary
+ */
+
+.uk-block-secondary {
+  background: #222222;
+}
+
+/*
+ * Adjust padding between equal colored blocks
+ */
+
+.uk-block-default + .uk-block-default, .uk-block-muted + .uk-block-muted, .uk-block-primary + .uk-block-primary, .uk-block-secondary + .uk-block-secondary {
+  padding-top: 0;
+}
+
 /* ========================================================================
    Component: Article
  ========================================================================== */
@@ -1282,11 +1510,11 @@ iframe {
 
 .uk-article {
   &:before {
-    content: " ";
+    content: "";
     display: table;
   }
   &:after {
-    content: " ";
+    content: "";
     display: table;
     clear: both;
   }
@@ -1360,11 +1588,11 @@ iframe {
 .uk-comment-header {
   margin-bottom: 15px;
   &:before {
-    content: " ";
+    content: "";
     display: table;
   }
   &:after {
-    content: " ";
+    content: "";
     display: table;
     clear: both;
   }
@@ -1441,34 +1669,88 @@ iframe {
 /* Modifier `uk-comment-primary`
  ========================================================================== */
 /* ========================================================================
-   Component: Nav
+   Component: Cover
  ========================================================================== */
+/*
+ * Background image always covers and centers its element
+ */
 
-.uk-nav {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  li > a {
-    display: block;
-    text-decoration: none;
-  }
-  > li > a {
-    padding: 5px 15px;
-  }
-  ul {
-    padding-left: 15px;
-    a {
-      padding: 2px 0;
-    }
-  }
-  li > a > div {
-    font-size: 12px;
-    line-height: 18px;
+.uk-cover-background {
+  background-position: 50% 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+/*
+ * Emulates image cover, works with video and image elements
+ * 1. Parent container which clips resized object
+ * 2. Resizes the object to always covers its container
+ * 3. Reset the responsive image CSS
+ * 4. Center object
+ */
+/* 1 */
+
+.uk-cover {
+  overflow: hidden;
+}
+
+.uk-cover-object {
+  /* 2 */
+  width: auto;
+  height: auto;
+  min-width: 100%;
+  min-height: 100%;
+  /* 3 */
+  max-width: none;
+  /* 4 */
+  position: relative;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+/*
+ * To center iframes use `data-uk-cover` JavaScript
+ */
+
+[data-uk-cover] {
+  position: relative;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+/* ========================================================================
+   Component: Nav
+ ========================================================================== */
+
+.uk-nav {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  li > a {
+    display: block;
+    text-decoration: none;
+  }
+  > li > a {
+    padding: 5px 15px;
+  }
+  ul {
+    padding-left: 15px;
+    a {
+      padding: 2px 0;
+    }
+  }
+  li > a > div {
+    font-size: 12px;
+    line-height: 18px;
   }
 }
 
@@ -1766,11 +2048,11 @@ html:not(.uk-touch) .uk-nav-offcanvas ul a:hover {
   background: #eeeeee;
   color: #444444;
   &:before {
-    content: " ";
+    content: "";
     display: table;
   }
   &:after {
-    content: " ";
+    content: "";
     display: table;
     clear: both;
   }
@@ -1990,93 +2272,120 @@ html:not(.uk-touch) .uk-nav-offcanvas ul a:hover {
    Component: Subnav
  ========================================================================== */
 /*
- * 1. Remove default list style
- * 2. Remove whitespace between child elements when using `inline-block`
+ * 1. Gutter
+ * 2. Remove default list style
  */
 
 .uk-subnav {
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  flex-wrap: wrap;
   /* 1 */
+  margin-left: -10px;
+  margin-top: -10px;
+  /* 2 */
   padding: 0;
   list-style: none;
-  /* 2 */
-  font-size: 0.001px;
-  > li {
+  > * {
     /* 1 */
-    position: relative;
+    -ms-flex: none;
+    -webkit-flex: none;
+    flex: none;
     /* 2 */
-    font-size: 1rem;
-    vertical-align: top;
-    display: inline-block;
-    > {
-      a, span {
-        display: inline-block;
-      }
-    }
-    &:nth-child(n+2) {
-      margin-left: 10px;
-    }
-    > {
-      a {
-        color: #0077dd;
-        &:hover {
-          color: #005599;
+    padding-left: 10px;
+    margin-top: 10px;
+    /* 3 */
+    position: relative;
+  }
+  &:before {
+    content: "";
+    display: block;
+    overflow: hidden;
+  }
+  &:after {
+    content: "";
+    display: block;
+    overflow: hidden;
+    clear: both;
+  }
+  > {
+    * {
+      float: left;
+      > {
+        * {
+          display: inline-block;
+          color: #444444;
+        }
+        :hover, :focus {
+          color: #0077dd;
+          text-decoration: none;
         }
       }
-      span {
-        color: #999999;
-      }
+    }
+    .uk-active > * {
+      color: #0077dd;
     }
   }
 }
 
-/* Items
- ========================================================================== */
 /*
- * 1. Create position context for dropdowns
- * 2. Reset whitespace hack
+ * 1. Space is allocated solely based on content dimensions
+ * 2. Horizontal gutter is using `padding` so `uk-width-*` classes can be applied
+ * 3. Create position context for dropdowns
  */
 
 /*
- * Items
+ * DEPRECATED IE9 Support
  */
 
+/* Items
+ ========================================================================== */
+
 /*
- * Active
+ * Hover
+ * 1. Apply hover style also to focus state
  */
+
 /*
- * Disabled
+ * Active
  */
 
 /* Modifier: 'subnav-line'
  ========================================================================== */
 
-.uk-subnav-line > li:nth-child(n+2):before {
-  content: "";
-  display: inline-block;
-  height: 10px;
-  margin-right: 10px;
-  border-left: 1px solid #dddddd;
+.uk-subnav-line > {
+  :before {
+    content: "";
+    display: inline-block;
+    height: 10px;
+    vertical-align: middle;
+  }
+  :nth-child(n+2):before {
+    margin-right: 10px;
+    border-left: 1px solid #dddddd;
+  }
 }
 
 /* Modifier: 'subnav-pill'
  ========================================================================== */
 
-.uk-subnav-pill > li {
-  > {
-    a, span {
+.uk-subnav-pill > {
+  * > {
+    * {
       padding: 3px 9px;
-      text-decoration: none;
     }
-    a {
-      &:hover, &:focus {
-        background: #eeeeee;
-        color: #444444;
-        /* 2 */
-        outline: none;
-      }
+    :hover, :focus {
+      background: #eeeeee;
+      color: #444444;
+      text-decoration: none;
+      /* 2 */
+      outline: none;
     }
   }
-  &.uk-active > a {
+  .uk-active > * {
     background: #00a8e6;
     color: #ffffff;
   }
@@ -2093,6 +2402,16 @@ html:not(.uk-touch) .uk-nav-offcanvas ul a:hover {
  * `li` needed for higher specificity to override hover
  */
 
+/* Disabled state
+ ========================================================================== */
+
+.uk-subnav > .uk-disabled > * {
+  background: none;
+  color: #999999;
+  text-decoration: none;
+  cursor: text;
+}
+
 /* ========================================================================
    Component: Breadcrumb
  ========================================================================== */
@@ -2155,11 +2474,11 @@ html:not(.uk-touch) .uk-nav-offcanvas ul a:hover {
   /* 3 */
   font-size: 0.001px;
   &:before {
-    content: " ";
+    content: "";
     display: table;
   }
   &:after {
-    content: " ";
+    content: "";
     display: table;
     clear: both;
   }
@@ -2282,11 +2601,11 @@ html:not(.uk-touch) .uk-nav-offcanvas ul a:hover {
   list-style: none;
   border-bottom: 1px solid #dddddd;
   &:before {
-    content: " ";
+    content: "";
     display: table;
   }
   &:after {
-    content: " ";
+    content: "";
     display: table;
     clear: both;
   }
@@ -2341,7 +2660,7 @@ html:not(.uk-touch) .uk-nav-offcanvas ul a:hover {
     &.uk-disabled {
       > a {
         color: #999999;
-        cursor: auto;
+        cursor: text;
         &:hover, &:focus {
           background: none;
           border-color: transparent;
@@ -2417,11 +2736,11 @@ html:not(.uk-touch) .uk-nav-offcanvas ul a:hover {
 
 .uk-tab-center {
   &:before {
-    content: " ";
+    content: "";
     display: table;
   }
   &:after {
-    content: " ";
+    content: "";
     display: table;
     clear: both;
   }
@@ -2595,6 +2914,91 @@ html:not(.uk-touch) .uk-nav-offcanvas ul a:hover {
   }
 }
 
+/* ========================================================================
+   Component: Thumbnav
+ ========================================================================== */
+/*
+ * 1. Gutter
+ * 2. Remove default list style
+ */
+
+.uk-thumbnav {
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  flex-wrap: wrap;
+  /* 1 */
+  margin-left: -10px;
+  margin-top: -10px;
+  /* 2 */
+  padding: 0;
+  list-style: none;
+  > * {
+    /* 1 */
+    -ms-flex: none;
+    -webkit-flex: none;
+    flex: none;
+    /* 2 */
+    padding-left: 10px;
+    margin-top: 10px;
+  }
+  &:before {
+    content: "";
+    display: block;
+    overflow: hidden;
+  }
+  &:after {
+    content: "";
+    display: block;
+    overflow: hidden;
+    clear: both;
+  }
+  > {
+    * {
+      float: left;
+      > {
+        * {
+          display: block;
+          background: #ffffff;
+          > img {
+            opacity: 0.7;
+            -webkit-transition: opacity 0.15s linear;
+            transition: opacity 0.15s linear;
+          }
+        }
+        :hover > img, :focus > img {
+          opacity: 1;
+        }
+      }
+    }
+    .uk-active > * > img {
+      opacity: 1;
+    }
+  }
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions
+ * 2. Horizontal gutter is using `padding` so `uk-width-*` classes can be applied
+ */
+
+/*
+ * DEPRECATED IE9 Support
+ */
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Hover
+ */
+
+/*
+ * Active
+ */
+
 /* ========================================================================
    Component: List
  ========================================================================== */
@@ -2604,11 +3008,11 @@ html:not(.uk-touch) .uk-nav-offcanvas ul a:hover {
   list-style: none;
   > li {
     &:before {
-      content: " ";
+      content: "";
       display: table;
     }
     &:after {
-      content: " ";
+      content: "";
       display: table;
       clear: both;
     }
@@ -2751,6 +3155,9 @@ html:not(.uk-touch) .uk-nav-offcanvas ul a:hover {
     text-align: left;
     color: #999999;
   }
+  tbody tr.uk-active {
+    background: #eeeeee;
+  }
 }
 
 /*
@@ -2761,6 +3168,10 @@ html:not(.uk-touch) .uk-nav-offcanvas ul a:hover {
  * Caption and footer
  */
 
+/*
+ * Active State
+ */
+
 /* Sub-modifier: `uk-table-middle`
  ========================================================================== */
 
@@ -2982,6 +3393,8 @@ html:not(.uk-touch) .uk-nav-offcanvas ul a:hover {
       content: "";
       display: block;
       border-bottom: 1px solid #dddddd;
+      /* 1 */
+      width: 100%;
     }
   }
 }
@@ -3072,7 +3485,9 @@ html:not(.uk-touch) .uk-nav-offcanvas ul a:hover {
  * 5. Style
  */
 
-/* 4 */
+/*
+ * 1. Fixes IE9
+ */
 
 /* Size modifiers
  * Higher specificity needed to override defaults
@@ -3197,11 +3612,11 @@ select.uk-form-width-mini {
 
 .uk-form-row {
   &:before {
-    content: " ";
+    content: "";
     display: table;
   }
   &:after {
-    content: " ";
+    content: "";
     display: table;
     clear: both;
   }
@@ -3596,11 +4011,13 @@ select.uk-form-width-mini {
 /* ========================================================================
    Component: Icon
  ========================================================================== */
+
 /*
  * 1. Allow margin
  * 2. Prevent inherit font style
  * 4. Correct line-height
  * 5. Better font rendering
+ * 6. Remove `text-decoration` for anchors
  */
 
 [class*='uk-icon-'] {
@@ -3615,8 +4032,14 @@ select.uk-form-width-mini {
   /* 5 */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  text-decoration: none;
+  &:hover, &:focus {
+    text-decoration: none;
+  }
 }
 
+/* 6 */
+
 /* Size modifiers
  ========================================================================== */
 
@@ -3644,6 +4067,20 @@ select.uk-form-width-mini {
   animation: uk-rotate 2s infinite linear;
 }
 
+/* Modifier: `uk-icon-hover`
+ ========================================================================== */
+
+.uk-icon-hover {
+  color: #999999;
+  &:hover {
+    color: #444444;
+  }
+}
+
+/*
+ * Hover
+ */
+
 /* Modifier: `uk-icon-button`
  ========================================================================== */
 
@@ -3662,7 +4099,6 @@ select.uk-form-width-mini {
   &:hover, &:focus {
     background-color: #f5f5f5;
     color: #444444;
-    text-decoration: none;
     /* 2 */
     outline: none;
   }
@@ -4263,7 +4699,7 @@ select.uk-form-width-mini {
   content: "\f099";
 }
 
-.uk-icon-facebook:before {
+.uk-icon-facebook-f:before, .uk-icon-facebook:before {
   content: "\f09a";
 }
 
@@ -5083,7 +5519,7 @@ select.uk-form-width-mini {
   content: "\f183";
 }
 
-.uk-icon-gittip:before {
+.uk-icon-gittip:before, .uk-icon-gratipay:before {
   content: "\f184";
 }
 
@@ -5411,7 +5847,7 @@ select.uk-form-width-mini {
   content: "\f1da";
 }
 
-.uk-icon-circle-thin:before {
+.uk-icon-genderless:before, .uk-icon-circle-thin:before {
   content: "\f1db";
 }
 
@@ -5599,26 +6035,186 @@ select.uk-form-width-mini {
   content: "\f20c";
 }
 
-/* ========================================================================
-   Component: Close
- ========================================================================== */
-/*
- * Removes inner padding and border in Firefox 4+.
- */
+.uk-icon-buysellads:before {
+  content: "\f20d";
+}
 
-.uk-close {
-  &::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-  }
-  /* 1 */
-  -webkit-appearance: none;
-  /* 2 */
-  margin: 0;
-  /* 3 */
-  border: none;
-  /* 4 */
-  overflow: visible;
+.uk-icon-connectdevelop:before {
+  content: "\f20e";
+}
+
+.uk-icon-dashcube:before {
+  content: "\f210";
+}
+
+.uk-icon-forumbee:before {
+  content: "\f211";
+}
+
+.uk-icon-leanpub:before {
+  content: "\f212";
+}
+
+.uk-icon-sellsy:before {
+  content: "\f213";
+}
+
+.uk-icon-shirtsinbulk:before {
+  content: "\f214";
+}
+
+.uk-icon-simplybuilt:before {
+  content: "\f215";
+}
+
+.uk-icon-skyatlas:before {
+  content: "\f216";
+}
+
+.uk-icon-cart-plus:before {
+  content: "\f217";
+}
+
+.uk-icon-cart-arrow-down:before {
+  content: "\f218";
+}
+
+.uk-icon-diamond:before {
+  content: "\f219";
+}
+
+.uk-icon-ship:before {
+  content: "\f21a";
+}
+
+.uk-icon-user-secret:before {
+  content: "\f21b";
+}
+
+.uk-icon-motorcycle:before {
+  content: "\f21c";
+}
+
+.uk-icon-street-view:before {
+  content: "\f21d";
+}
+
+.uk-icon-heartbeat:before {
+  content: "\f21e";
+}
+
+.uk-icon-venus:before {
+  content: "\f221";
+}
+
+.uk-icon-mars:before {
+  content: "\f222";
+}
+
+.uk-icon-mercury:before {
+  content: "\f223";
+}
+
+.uk-icon-transgender:before {
+  content: "\f224";
+}
+
+.uk-icon-transgender-alt:before {
+  content: "\f225";
+}
+
+.uk-icon-venus-double:before {
+  content: "\f226";
+}
+
+.uk-icon-mars-double:before {
+  content: "\f227";
+}
+
+.uk-icon-venus-mars:before {
+  content: "\f228";
+}
+
+.uk-icon-mars-stroke:before {
+  content: "\f229";
+}
+
+.uk-icon-mars-stroke-v:before {
+  content: "\f22a";
+}
+
+.uk-icon-mars-stroke-h:before {
+  content: "\f22b";
+}
+
+.uk-icon-neuter:before {
+  content: "\f22c";
+}
+
+.uk-icon-facebook-official:before {
+  content: "\f230";
+}
+
+.uk-icon-pinterest-p:before {
+  content: "\f231";
+}
+
+.uk-icon-whatsapp:before {
+  content: "\f232";
+}
+
+.uk-icon-server:before {
+  content: "\f233";
+}
+
+.uk-icon-user-plus:before {
+  content: "\f234";
+}
+
+.uk-icon-user-times:before {
+  content: "\f235";
+}
+
+.uk-icon-hotel:before, .uk-icon-bed:before {
+  content: "\f236";
+}
+
+.uk-icon-viacoin:before {
+  content: "\f237";
+}
+
+.uk-icon-train:before {
+  content: "\f238";
+}
+
+.uk-icon-subway:before {
+  content: "\f239";
+}
+
+.uk-icon-medium-logo:before {
+  content: "\f23a";
+}
+
+/* ========================================================================
+   Component: Close
+ ========================================================================== */
+/*
+ * Removes inner padding and border in Firefox 4+.
+ */
+
+.uk-close {
+  &::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
+  /* 1 */
+  -webkit-appearance: none;
+  /* 2 */
+  margin: 0;
+  /* 3 */
+  border: none;
+  /* 4 */
+  overflow: visible;
   /* 5 */
   font: inherit;
   color: inherit;
@@ -5929,7 +6525,9 @@ a.uk-thumbnail {
  * 2. Create position context
  * 3. Set max-width for responsive images to prevent `inline-block` consequences
  * 4. Remove the gap between the container and its child element
- * 5. Fixed wrong scaling calculation for images in Chrome
+ * 5. Needed for transitions and to fixed wrong scaling calculation for images in Chrome
+ * 6. Fixed `overflow: hidden` to be ignored with border-radius and CSS transforms in Webkit
+ * 7. Reset margin
  */
 
 .uk-overlay {
@@ -5943,16 +6541,243 @@ a.uk-thumbnail {
   vertical-align: middle;
   /* 5 */
   overflow: hidden;
+  /* 6 */
+  -webkit-transform: translateZ(0);
+  /* 7 */
+  margin: 0;
+  &.uk-border-circle {
+    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
+  }
   > :first-child {
     margin-bottom: 0;
   }
 }
 
+/* 6 for Safari */
+
 /*
  * Remove margin from content
  */
 
-/* Sub-object `uk-overlay-area`
+/* Sub-object `uk-overlay-panel`
+ ========================================================================== */
+/*
+ * 1. Position cover
+ * 2. Style
+ */
+
+.uk-overlay-panel {
+  /* 1 */
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  /* 2 */
+  padding: 20px;
+  color: #ffffff;
+  > :last-child, &.uk-flex > * > :last-child {
+    margin-bottom: 0;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    color: inherit;
+  }
+  a {
+    &:not([class]) {
+      color: inherit;
+      text-decoration: underline;
+    }
+    &[class*='uk-icon-']:not(.uk-icon-button) {
+      color: inherit;
+    }
+  }
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+/*
+ * Keep color for headings if the default heading color is changed
+ */
+
+/* Sub-object `uk-overlay-hover` and `uk-overlay-active`
+ ========================================================================== */
+
+.uk-overlay-hover:not(:hover):not(.uk-hover) .uk-overlay-panel:not(.uk-ignore), .uk-overlay-active :not(.uk-active) > .uk-overlay-panel:not(.uk-ignore) {
+  opacity: 0;
+}
+
+/* Modifier `uk-overlay-background`
+ ========================================================================== */
+
+.uk-overlay-background {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+/* Modifier `uk-overlay-image`
+ ========================================================================== */
+/*
+ * Reset panel
+ */
+
+.uk-overlay-image {
+  padding: 0;
+}
+
+/* Position modifiers
+ ========================================================================== */
+
+.uk-overlay-top {
+  bottom: auto;
+}
+
+.uk-overlay-bottom {
+  top: auto;
+}
+
+.uk-overlay-left {
+  right: auto;
+}
+
+.uk-overlay-right {
+  left: auto;
+}
+
+/* Sub-object `uk-overlay-icon`
+ ========================================================================== */
+
+.uk-overlay-icon:before {
+  content: "\f002";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 50px;
+  height: 50px;
+  margin-top: -25px;
+  margin-left: -25px;
+  font-size: 50px;
+  line-height: 1;
+  font-family: FontAwesome;
+  text-align: center;
+  color: #ffffff;
+}
+
+/* Transitions
+ ========================================================================== */
+
+.uk-overlay-fade, .uk-overlay-scale, .uk-overlay-spin, .uk-overlay-grayscale, .uk-overlay-blur, [class*='uk-overlay-slide'] {
+  transition-duration: 0.3s;
+  transition-timing-function: ease-out;
+  transition-property: opacity transform filter;
+}
+
+.uk-overlay-active {
+  .uk-overlay-fade, .uk-overlay-scale, .uk-overlay-spin, [class*='uk-overlay-slide'] {
+    transition-duration: 0.8s;
+  }
+}
+
+/*
+ * Fade
+ */
+
+.uk-overlay-fade {
+  opacity: 0.7;
+}
+
+.uk-overlay-hover:hover .uk-overlay-fade, .uk-overlay-active .uk-active > .uk-overlay-fade {
+  opacity: 1;
+}
+
+/*
+ * Scale
+ */
+
+.uk-overlay-scale {
+  -webkit-transform: scale(1);
+  transform: scale(1);
+}
+
+.uk-overlay-hover:hover .uk-overlay-scale, .uk-overlay-active .uk-active > .uk-overlay-scale {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
+
+/*
+ * Spin
+ */
+
+.uk-overlay-spin {
+  -webkit-transform: scale(1) rotate(0deg);
+  transform: scale(1) rotate(0deg);
+}
+
+.uk-overlay-hover:hover .uk-overlay-spin, .uk-overlay-active .uk-active > .uk-overlay-spin {
+  -webkit-transform: scale(1.1) rotate(3deg);
+  transform: scale(1.1) rotate(3deg);
+}
+
+/*
+ * Grayscale
+ */
+
+.uk-overlay-grayscale {
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+
+.uk-overlay-hover:hover .uk-overlay-grayscale, .uk-overlay-active .uk-active > .uk-overlay-grayscale {
+  -webkit-filter: grayscale(0%);
+  filter: grayscale(0%);
+}
+
+/*
+ * Slide
+ */
+
+[class*='uk-overlay-slide'] {
+  opacity: 0;
+}
+
+/* Top */
+
+.uk-overlay-slide-top {
+  -webkit-transform: translateY(-100%);
+  transform: translateY(-100%);
+}
+
+/* Bottom */
+
+.uk-overlay-slide-bottom {
+  -webkit-transform: translateY(100%);
+  transform: translateY(100%);
+}
+
+/* Left */
+
+.uk-overlay-slide-left {
+  -webkit-transform: translateX(-100%);
+  transform: translateX(-100%);
+}
+
+/* Right */
+
+.uk-overlay-slide-right {
+  -webkit-transform: translateX(100%);
+  transform: translateX(100%);
+}
+
+/* Hover */
+
+.uk-overlay-hover:hover [class*='uk-overlay-slide'], .uk-overlay-active .uk-active > [class*='uk-overlay-slide'] {
+  opacity: 1;
+  -webkit-transform: translateX(0) translateY(0);
+  transform: translateX(0) translateY(0);
+}
+
+/* DEPRECATED
+ * Sub-object `uk-overlay-area`
  ========================================================================== */
 /*
  * 1. Set position
@@ -6025,7 +6850,8 @@ a.uk-thumbnail {
   }
 }
 
-/* Sub-object `uk-overlay-area-content`
+/* DEPRECATED
+ * Sub-object `uk-overlay-area-content`
  ========================================================================== */
 /*
  * Remove whitespace between child elements when using `inline-block`
@@ -6076,7 +6902,8 @@ a.uk-thumbnail {
  * Links in overlay area
  */
 
-/* Sub-object `uk-overlay-caption`
+/* DEPRECATED
+ * Sub-object `uk-overlay-caption`
  ========================================================================== */
 /*
  * 1. Set position
@@ -6120,124 +6947,7 @@ a.uk-thumbnail {
 }
 
 /* ========================================================================
-   Component: Progress
- ========================================================================== */
-/*
- * 1. Clearing
- * 2. Vertical alignment if text is used
- */
-
-.uk-progress {
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  height: 20px;
-  margin-bottom: 15px;
-  background: #eeeeee;
-  /* 1 */
-  overflow: hidden;
-  /* 2 */
-  line-height: 20px;
-}
-
-/*
- * Add margin if adjacent element
- */
-
-* + .uk-progress {
-  margin-top: 15px;
-}
-
-/* Sub-object: `uk-progress-bar`
- ========================================================================== */
-/*
- * 1. Transition
- * 2. Needed for text
- */
-
-.uk-progress-bar {
-  width: 0;
-  height: 100%;
-  background: #00a8e6;
-  float: left;
-  /* 1 */
-  -webkit-transition: width 0.6s ease;
-  transition: width 0.6s ease;
-  /* 2 */
-  font-size: 12px;
-  color: #ffffff;
-  text-align: center;
-}
-
-/* Size modifiers
- ========================================================================== */
-/* Mini */
-
-.uk-progress-mini {
-  height: 6px;
-}
-
-/* Small */
-
-.uk-progress-small {
-  height: 12px;
-}
-
-/* Color modifiers
- ========================================================================== */
-
-.uk-progress-success .uk-progress-bar {
-  background-color: #8cc14c;
-}
-
-.uk-progress-warning .uk-progress-bar {
-  background-color: #faa732;
-}
-
-.uk-progress-danger .uk-progress-bar {
-  background-color: #da314b;
-}
-
-/* Modifier: `uk-progress-striped`
- ========================================================================== */
-
-.uk-progress-striped {
-  .uk-progress-bar {
-    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-    background-size: 30px 30px;
-  }
-  &.uk-active .uk-progress-bar {
-    -webkit-animation: uk-progress-bar-stripes 2s linear infinite;
-    animation: uk-progress-bar-stripes 2s linear infinite;
-  }
-}
-
-/*
- * Animation
- */
-
-@-webkit-keyframes uk-progress-bar-stripes {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 30px 0;
-  }
-}
-
-
-@keyframes uk-progress-bar-stripes {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 30px 0;
-  }
-}
-
-
-/* ========================================================================
-   Component: Animation
+   Component: Animation
  ========================================================================== */
 
 [class*='uk-animation-'] {
@@ -6251,7 +6961,7 @@ a.uk-thumbnail {
 
 /* Hide animated element if scrollspy is used */
 @media screen {
-  [data-uk-scrollspy*='uk-animation-'] {
+  [data-uk-scrollspy*='uk-animation-']:not([data-uk-scrollspy*='target']) {
     opacity: 0;
   }
 }
@@ -6332,16 +7042,16 @@ a.uk-thumbnail {
 .uk-animation-reverse {
   -webkit-animation-direction: reverse;
   animation-direction: reverse;
-  -webkit-animation-timing-function: ease-out;
-  animation-timing-function: ease-out;
+  -webkit-animation-timing-function: ease-in;
+  animation-timing-function: ease-in;
 }
 
 /* Duration modifiers
 ========================================================================== */
 
-.uk-animation-10 {
-  -webkit-animation-duration: 10s;
-  animation-duration: 10s;
+.uk-animation-15 {
+  -webkit-animation-duration: 15s;
+  animation-duration: 15s;
 }
 
 /* Origin modifiers
@@ -6387,6 +7097,22 @@ a.uk-thumbnail {
   transform-origin: 100% 100%;
 }
 
+/* Sub-object: `uk-animation-hover`
+========================================================================== */
+/*
+ * Enable animation only on hover
+ * Note: Firefox also needs this because animations are not triggered when switching between display `hidden` and `block`
+ */
+
+.uk-animation-hover:not(:hover), .uk-touch .uk-animation-hover:not(.uk-hover) {
+  -webkit-animation-name: none;
+  animation-name: none;
+  [class*='uk-animation-'] {
+    -webkit-animation-name: none;
+    animation-name: none;
+  }
+}
+
 /* Keyframes: Fade
  * Used by dropdown, datepicker and slideshow component
  ========================================================================== */
@@ -6394,6 +7120,7 @@ a.uk-thumbnail {
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
@@ -6404,6 +7131,7 @@ a.uk-thumbnail {
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
@@ -6420,6 +7148,7 @@ a.uk-thumbnail {
     opacity: 0;
     -webkit-transform: translateY(-100%);
   }
+
   100% {
     opacity: 1;
     -webkit-transform: translateY(0);
@@ -6432,6 +7161,7 @@ a.uk-thumbnail {
     opacity: 0;
     transform: translateY(-100%);
   }
+
   100% {
     opacity: 1;
     transform: translateY(0);
@@ -6447,6 +7177,7 @@ a.uk-thumbnail {
     opacity: 0;
     -webkit-transform: translateY(100%);
   }
+
   100% {
     opacity: 1;
     -webkit-transform: translateY(0);
@@ -6459,6 +7190,7 @@ a.uk-thumbnail {
     opacity: 0;
     transform: translateY(100%);
   }
+
   100% {
     opacity: 1;
     transform: translateY(0);
@@ -6474,6 +7206,7 @@ a.uk-thumbnail {
     opacity: 0;
     -webkit-transform: translateX(-100%);
   }
+
   100% {
     opacity: 1;
     -webkit-transform: translateX(0);
@@ -6486,6 +7219,7 @@ a.uk-thumbnail {
     opacity: 0;
     transform: translateX(-100%);
   }
+
   100% {
     opacity: 1;
     transform: translateX(0);
@@ -6501,6 +7235,7 @@ a.uk-thumbnail {
     opacity: 0;
     -webkit-transform: translateX(100%);
   }
+
   100% {
     opacity: 1;
     -webkit-transform: translateX(0);
@@ -6513,6 +7248,7 @@ a.uk-thumbnail {
     opacity: 0;
     transform: translateX(100%);
   }
+
   100% {
     opacity: 1;
     transform: translateX(0);
@@ -6530,6 +7266,7 @@ a.uk-thumbnail {
     opacity: 0;
     -webkit-transform: scale(0.2);
   }
+
   100% {
     opacity: 1;
     -webkit-transform: scale(1);
@@ -6542,6 +7279,7 @@ a.uk-thumbnail {
     opacity: 0;
     transform: scale(0.2);
   }
+
   100% {
     opacity: 1;
     transform: scale(1);
@@ -6558,6 +7296,7 @@ a.uk-thumbnail {
     opacity: 0;
     -webkit-transform: scale(1.5);
   }
+
   100% {
     opacity: 1;
     -webkit-transform: scale(1);
@@ -6570,6 +7309,7 @@ a.uk-thumbnail {
     opacity: 0;
     transform: scale(1.5);
   }
+
   100% {
     opacity: 1;
     transform: scale(1);
@@ -6585,6 +7325,7 @@ a.uk-thumbnail {
     opacity: 0;
     -webkit-transform: scale(1.8);
   }
+
   100% {
     opacity: 1;
     -webkit-transform: scale(1);
@@ -6597,6 +7338,7 @@ a.uk-thumbnail {
     opacity: 0;
     transform: scale(1.8);
   }
+
   100% {
     opacity: 1;
     transform: scale(1);
@@ -6614,6 +7356,7 @@ a.uk-thumbnail {
   0% {
     -webkit-transform: translateX(-100%);
   }
+
   100% {
     -webkit-transform: translateX(0);
   }
@@ -6624,6 +7367,7 @@ a.uk-thumbnail {
   0% {
     transform: translateX(-100%);
   }
+
   100% {
     transform: translateX(0);
   }
@@ -6637,6 +7381,7 @@ a.uk-thumbnail {
   0% {
     -webkit-transform: translateX(100%);
   }
+
   100% {
     -webkit-transform: translateX(0);
   }
@@ -6647,6 +7392,7 @@ a.uk-thumbnail {
   0% {
     transform: translateX(100%);
   }
+
   100% {
     transform: translateX(0);
   }
@@ -6660,6 +7406,7 @@ a.uk-thumbnail {
   0% {
     -webkit-transform: translateX(33%);
   }
+
   100% {
     -webkit-transform: translateX(0);
   }
@@ -6670,6 +7417,7 @@ a.uk-thumbnail {
   0% {
     transform: translateX(33%);
   }
+
   100% {
     transform: translateX(0);
   }
@@ -6683,6 +7431,7 @@ a.uk-thumbnail {
   0% {
     -webkit-transform: translateX(-33%);
   }
+
   100% {
     -webkit-transform: translateX(0);
   }
@@ -6693,6 +7442,7 @@ a.uk-thumbnail {
   0% {
     transform: translateX(-33%);
   }
+
   100% {
     transform: translateX(0);
   }
@@ -6705,6 +7455,7 @@ a.uk-thumbnail {
   0% {
     -webkit-transform: scale(1.2);
   }
+
   100% {
     -webkit-transform: scale(1);
   }
@@ -6715,6 +7466,7 @@ a.uk-thumbnail {
   0% {
     transform: scale(1.2);
   }
+
   100% {
     transform: scale(1);
   }
@@ -6722,12 +7474,13 @@ a.uk-thumbnail {
 
 
 /* Keyframes: Rotate
- * Used by icon and search component
+ * Used by icon component
  ========================================================================== */
 @-webkit-keyframes uk-rotate {
   0% {
     -webkit-transform: rotate(0deg);
   }
+
   100% {
     -webkit-transform: rotate(359deg);
   }
@@ -6738,6 +7491,7 @@ a.uk-thumbnail {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(359deg);
   }
@@ -6751,30 +7505,39 @@ a.uk-thumbnail {
   100% {
     -webkit-transform: translateX(0);
   }
+
   10% {
     -webkit-transform: translateX(-9px);
   }
+
   20% {
     -webkit-transform: translateX(8px);
   }
+
   30% {
     -webkit-transform: translateX(-7px);
   }
+
   40% {
     -webkit-transform: translateX(6px);
   }
+
   50% {
     -webkit-transform: translateX(-5px);
   }
+
   60% {
     -webkit-transform: translateX(4px);
   }
+
   70% {
     -webkit-transform: translateX(-3px);
   }
+
   80% {
     -webkit-transform: translateX(2px);
   }
+
   90% {
     -webkit-transform: translateX(-1px);
   }
@@ -6786,30 +7549,39 @@ a.uk-thumbnail {
   100% {
     transform: translateX(0);
   }
+
   10% {
     transform: translateX(-9px);
   }
+
   20% {
     transform: translateX(8px);
   }
+
   30% {
     transform: translateX(-7px);
   }
+
   40% {
     transform: translateX(6px);
   }
+
   50% {
     transform: translateX(-5px);
   }
+
   60% {
     transform: translateX(4px);
   }
+
   70% {
     transform: translateX(-3px);
   }
+
   80% {
     transform: translateX(2px);
   }
+
   90% {
     transform: translateX(-1px);
   }
@@ -6827,6 +7599,7 @@ a.uk-thumbnail {
     opacity: 0;
     -webkit-transform: translateY(-10px);
   }
+
   100% {
     opacity: 1;
     -webkit-transform: translateY(0);
@@ -6839,6 +7612,7 @@ a.uk-thumbnail {
     opacity: 0;
     transform: translateY(-10px);
   }
+
   100% {
     opacity: 1;
     transform: translateY(0);
@@ -6854,6 +7628,7 @@ a.uk-thumbnail {
     opacity: 0;
     -webkit-transform: translateY(10px);
   }
+
   100% {
     opacity: 1;
     -webkit-transform: translateY(0);
@@ -6866,6 +7641,7 @@ a.uk-thumbnail {
     opacity: 0;
     transform: translateY(10px);
   }
+
   100% {
     opacity: 1;
     transform: translateY(0);
@@ -7086,6 +7862,8 @@ a.uk-thumbnail {
  * 3. Allow scrolling for the modal dialog
  * 4. Mask the background page
  * 5. Fade-in transition
+ * 6. Deactivate browser history navigation in IE11
+ * 7. force hardware acceleration to prevent browser rendering hiccups
  */
 
 .uk-modal {
@@ -7107,6 +7885,11 @@ a.uk-thumbnail {
   opacity: 0;
   -webkit-transition: opacity 0.15s linear;
   transition: opacity 0.15s linear;
+  /* 6 */
+  touch-action: cross-slide-y pinch-zoom double-tap-zoom;
+  /* 7 */
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
   &.uk-open {
     opacity: 1;
   }
@@ -7130,7 +7913,7 @@ a.uk-thumbnail {
 /* Sub-object: `uk-modal-dialog`
  ========================================================================== */
 /*
- * 1. Create position context for `uk-modal-dialog-frameless`
+ * 1. Create position context for caption, spinner and close button
  * 2. Set box sizing
  * 3. Set style
  * 4. Slide-in transition
@@ -7164,7 +7947,7 @@ a.uk-thumbnail {
      */
   .uk-modal-dialog {
     width: auto;
-    margin: 10px;
+    margin: 10px auto;
   }
 }
 
@@ -7184,13 +7967,13 @@ a.uk-thumbnail {
  */
 
 .uk-modal-dialog > {
-  :last-child {
+  :not([class*='uk-modal-']):last-child {
     margin-bottom: 0;
   }
   .uk-close:first-child {
     margin: -10px -10px 0 0;
     float: right;
-    + * {
+    + :not([class*='uk-modal-']) {
       margin-top: 0;
     }
   }
@@ -7203,11 +7986,14 @@ a.uk-thumbnail {
  * Remove margin from adjacent element
  */
 
-/* Modifier: `uk-modal-dialog-frameless`
+/* Modifier: `uk-modal-dialog-lightbox`
  ========================================================================== */
 
-.uk-modal-dialog-frameless {
+.uk-modal-dialog-lightbox {
+  margin: 15px auto;
   padding: 0;
+  max-width: 95%;
+  max-width: calc(100% - 30px);
   > .uk-close:first-child {
     position: absolute;
     top: -12px;
@@ -7218,12 +8004,12 @@ a.uk-thumbnail {
 }
 
 /*
- * Close in modal
+ * Close button
  */
 
 /* Phone landscape and smaller */
 @media (max-width: 767px) {
-  .uk-modal-dialog-frameless > .uk-close:first-child {
+  .uk-modal-dialog-lightbox > .uk-close:first-child {
     top: -7px;
     right: -7px;
   }
@@ -7245,6 +8031,60 @@ a.uk-thumbnail {
   }
 }
 
+/* Sub-Object: `uk-modal-header` and `uk-modal-footer`
+ ========================================================================== */
+
+.uk-modal-header {
+  margin-bottom: 15px;
+}
+
+.uk-modal-footer {
+  margin-top: 15px;
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-modal-header > :last-child, .uk-modal-footer > :last-child {
+  margin-bottom: 0;
+}
+
+/* Sub-Object: `uk-modal-caption`
+ ========================================================================== */
+
+.uk-modal-caption {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -20px;
+  margin-bottom: -10px;
+  color: #ffffff;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Sub-Object: `uk-modal-spinner`
+ ========================================================================== */
+
+.uk-modal-spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  font-size: 25px;
+  color: #ddd;
+  &:after {
+    content: "\f110";
+    font-family: FontAwesome;
+    -webkit-animation: uk-rotate 2s infinite linear;
+    animation: uk-rotate 2s infinite linear;
+  }
+}
+
 /* ========================================================================
    Component: Off-canvas
  ========================================================================== */
@@ -7252,7 +8092,8 @@ a.uk-thumbnail {
  * This is the offcanvas overlay and bar container
  * 1. Hide by default
  * 2. Set fixed position
- * 3. Mask the background page
+ * 3. Deactivate browser touch actions in IE11
+ * 4. Mask the background page
  */
 
 .uk-offcanvas {
@@ -7266,6 +8107,8 @@ a.uk-thumbnail {
   left: 0;
   z-index: 1000;
   /* 3 */
+  touch-action: none;
+  /* 4 */
   background: rgba(0, 0, 0, 0.1);
   &.uk-active {
     display: block;
@@ -7296,6 +8139,7 @@ a.uk-thumbnail {
  * 2. Size and style
  * 3. Allow scrolling
  * 4. Side-out transition
+ * 5. Deavtivate scroll chaining in IE11
  */
 
 .uk-offcanvas-bar {
@@ -7317,6 +8161,8 @@ a.uk-thumbnail {
   /* 4 */
   -webkit-transition: -webkit-transform 0.3s ease-in-out;
   transition: transform 0.3s ease-in-out;
+  /* 5 */
+  -ms-scroll-chaining: none;
 }
 
 .uk-offcanvas.uk-active .uk-offcanvas-bar.uk-offcanvas-bar-show {
@@ -7356,12 +8202,17 @@ a.uk-thumbnail {
 /* ========================================================================
    Component: Switcher
  ========================================================================== */
+/*
+ * 1. Deactivate browser history navigation in IE11
+ */
 
 .uk-switcher {
   margin: 0;
   padding: 0;
   list-style: none;
-  > *:not(.uk-active) {
+  /* 1 */
+  touch-action: cross-slide-y pinch-zoom double-tap-zoom;
+  > :not(.uk-active) {
     display: none;
   }
 }
@@ -7370,133 +8221,6 @@ a.uk-thumbnail {
  * Items
  */
 
-/* ========================================================================
-   Component: Tooltip
- ========================================================================== */
-/*
- * 1. Hide by default
- * 2. Set fixed position
- * 3. Set dimensions
- * 4. Set style
- */
-
-.uk-tooltip {
-  /* 1 */
-  display: none;
-  /* 2 */
-  position: absolute;
-  z-index: 1030;
-  /* 3 */
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  max-width: 200px;
-  padding: 5px 8px;
-  /* 4 */
-  background: #333333;
-  color: rgba(255, 255, 255, 0.7);
-  font-size: 12px;
-  line-height: 18px;
-  text-align: center;
-  &:after {
-    content: "";
-    display: block;
-    position: absolute;
-    width: 0;
-    height: 0;
-    /* 1 */
-    border: 5px dashed #333333;
-  }
-}
-
-/* Triangle
- ========================================================================== */
-/*
- * 1. Dashed is less antialised than solid
- */
-
-/* Direction modifiers
- ========================================================================== */
-/*
- * Top
- */
-
-.uk-tooltip-top:after, .uk-tooltip-top-left:after, .uk-tooltip-top-right:after {
-  bottom: -5px;
-  border-top-style: solid;
-  border-bottom: none;
-  border-left-color: transparent;
-  border-right-color: transparent;
-  border-top-color: #333333;
-}
-
-/*
- * Bottom
- */
-
-.uk-tooltip-bottom:after, .uk-tooltip-bottom-left:after, .uk-tooltip-bottom-right:after {
-  top: -5px;
-  border-bottom-style: solid;
-  border-top: none;
-  border-left-color: transparent;
-  border-right-color: transparent;
-  border-bottom-color: #333333;
-}
-
-/*
- * Top/Bottom center
- */
-
-.uk-tooltip-top:after, .uk-tooltip-bottom:after {
-  left: 50%;
-  margin-left: -5px;
-}
-
-/*
- * Top/Bottom left
- */
-
-.uk-tooltip-top-left:after, .uk-tooltip-bottom-left:after {
-  left: 10px;
-}
-
-/*
- * Top/Bottom right
- */
-
-.uk-tooltip-top-right:after, .uk-tooltip-bottom-right:after {
-  right: 10px;
-}
-
-/*
- * Left
- */
-
-.uk-tooltip-left:after {
-  right: -5px;
-  top: 50%;
-  margin-top: -5px;
-  border-left-style: solid;
-  border-right: none;
-  border-top-color: transparent;
-  border-bottom-color: transparent;
-  border-left-color: #333333;
-}
-
-/*
- * Right
- */
-
-.uk-tooltip-right:after {
-  left: -5px;
-  top: 50%;
-  margin-top: -5px;
-  border-right-style: solid;
-  border-left: none;
-  border-top-color: transparent;
-  border-bottom-color: transparent;
-  border-right-color: #333333;
-}
-
 /* ========================================================================
    Component: Text
  ========================================================================== */
@@ -7544,6 +8268,10 @@ a.uk-thumbnail {
   color: #d85030 !important;
 }
 
+.uk-text-contrast {
+  color: #ffffff !important;
+}
+
 /* Alignment modifiers
  ========================================================================== */
 
@@ -7575,11 +8303,14 @@ a.uk-thumbnail {
   vertical-align: bottom !important;
 }
 
-/* Only tablets portrait */
+/* Only tablets portrait and smaller */
 @media (max-width: 959px) {
   .uk-text-center-medium {
     text-align: center !important;
   }
+  .uk-text-left-medium {
+    text-align: left !important;
+  }
 }
 
 /* Phone landscape and smaller */
@@ -7587,6 +8318,9 @@ a.uk-thumbnail {
   .uk-text-center-small {
     text-align: center !important;
   }
+  .uk-text-left-small {
+    text-align: left !important;
+  }
 }
 
 /* Wrap modifiers
@@ -7633,11 +8367,11 @@ a.uk-thumbnail {
   max-width: 980px;
   padding: 0 25px;
   &:before {
-    content: " ";
+    content: "";
     display: table;
   }
   &:after {
-    content: " ";
+    content: "";
     display: table;
     clear: both;
   }
@@ -7668,15 +8402,18 @@ a.uk-thumbnail {
  ========================================================================== */
 /*
  * Micro clearfix
+* `table-cell` is used with `:before` because `table` creates a 1px gap when it becomes a flex item, only in Webkit
+ * `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
  */
 
 .uk-clearfix {
   &:before {
-    content: " ";
-    display: table;
+    content: "";
+    display: table-cell;
   }
   &:after {
-    content: " ";
+    content: "";
     display: table;
     clear: both;
   }
@@ -7838,10 +8575,11 @@ a.uk-thumbnail {
 
 /*
  * Responsiveness: Sets a maximum width relative to the parent and auto scales the height
+ * `important` needed to override `uk-img-preserve img`
  */
 
 .uk-responsive-width {
-  max-width: 100%;
+  max-width: 100% !important;
   height: auto;
 }
 
@@ -7958,6 +8696,26 @@ a.uk-thumbnail {
   margin-bottom: 0 !important;
 }
 
+/* Padding
+ ========================================================================== */
+
+.uk-padding-remove {
+  padding: 0 !important;
+}
+
+.uk-padding-top-remove {
+  padding-top: 0 !important;
+}
+
+.uk-padding-bottom-remove {
+  padding-bottom: 0 !important;
+}
+
+.uk-padding-vertical-remove {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
 /* Border
  ========================================================================== */
 
@@ -7971,6 +8729,12 @@ a.uk-thumbnail {
 
 /* Headings
  ========================================================================== */
+
+.uk-heading-large {
+  font-size: 36px;
+  line-height: 42px;
+}
+
 /* Tablet and bigger */
 @media (min-width: 768px) {
   .uk-heading-large {
@@ -7999,7 +8763,7 @@ a.uk-thumbnail {
 .uk-link-reset {
   color: inherit;
   text-decoration: none;
-  a, &:hover, a:hover {
+  a, &:hover, a:hover, &:focus, a:focus {
     color: inherit;
     text-decoration: none;
   }
@@ -8038,6 +8802,11 @@ a.uk-thumbnail {
 
 /* Overflow
  ========================================================================== */
+
+.uk-overflow-hidden {
+  overflow: hidden;
+}
+
 /*
  * Enable scrollbars if content is clipped
  */
@@ -8053,14 +8822,44 @@ a.uk-thumbnail {
 /* Position
  ========================================================================== */
 
-.uk-position-absolute {
+.uk-position-absolute, [class*='uk-position-top'], [class*='uk-position-bottom'] {
   position: absolute !important;
 }
 
-.uk-position-relative {
-  position: relative !important;
+.uk-position-top {
+  top: 0;
+  width: 100%;
+}
+
+.uk-position-bottom {
+  bottom: 0;
+  width: 100%;
 }
 
+.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;
+}
+
+/*
+ * Cover
+ */
+
 .uk-position-cover {
   position: absolute;
   top: 0;
@@ -8069,6 +8868,22 @@ a.uk-thumbnail {
   right: 0;
 }
 
+/*
+ * Relative
+ */
+
+.uk-position-relative {
+  position: relative !important;
+}
+
+/*
+ * Z-index
+ */
+
+.uk-position-z-index {
+  z-index: 1;
+}
+
 /* Display
  ========================================================================== */
 /*
@@ -8141,6 +8956,451 @@ a.uk-thumbnail {
   }
 }
 
+/* Hide on touch */
+
+.uk-touch .uk-hidden-touch, .uk-notouch .uk-hidden-notouch {
+  display: none !important;
+}
+
+/* ========================================================================
+   Component: Flex
+ ========================================================================== */
+
+.uk-flex {
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+.uk-flex-inline {
+  display: -ms-inline-flexbox;
+  display: -webkit-inline-flex;
+  display: inline-flex;
+}
+
+/*
+ * Fixes initial flex-shrink value in IE10
+ */
+
+.uk-flex > *, .uk-flex-inline > * {
+  -ms-flex-negative: 1;
+}
+
+/* Alignment
+ ========================================================================== */
+/*
+ * Vertical alignment
+ * Default value is `stretch`
+ */
+
+.uk-flex-top {
+  -ms-flex-align: start;
+  -webkit-align-items: flex-start;
+  align-items: flex-start;
+}
+
+.uk-flex-middle {
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+.uk-flex-bottom {
+  -ms-flex-align: end;
+  -webkit-align-items: flex-end;
+  align-items: flex-end;
+}
+
+/*
+ * Horizontal alignment
+ * Default value is `flex-start`
+ */
+
+.uk-flex-center {
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.uk-flex-right {
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+.uk-flex-space-between {
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.uk-flex-space-around {
+  -ms-flex-pack: distribute;
+  -webkit-justify-content: space-around;
+  justify-content: space-around;
+}
+
+/* Direction
+ ========================================================================== */
+
+.uk-flex-row-reverse {
+  -ms-flex-direction: row-reverse;
+  -webkit-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.uk-flex-column {
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}
+
+.uk-flex-column-reverse {
+  -ms-flex-direction: column-reverse;
+  -webkit-flex-direction: column-reverse;
+  flex-direction: column-reverse;
+}
+
+/* Wrap
+ ========================================================================== */
+
+.uk-flex-wrap {
+  -ms-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.uk-flex-wrap-reverse {
+  -ms-flex-wrap: wrap-reverse;
+  -webkit-flex-wrap: wrap-reverse;
+  flex-wrap: wrap-reverse;
+}
+
+/*
+ * Horizontal alignment
+ * Default value is `stretch`
+ */
+
+.uk-flex-wrap-top {
+  -ms-flex-line-pack: start;
+  -webkit-align-content: flex-start;
+  align-content: flex-start;
+}
+
+.uk-flex-wrap-middle {
+  -ms-flex-line-pack: center;
+  -webkit-align-content: center;
+  align-content: center;
+}
+
+.uk-flex-wrap-bottom {
+  -ms-flex-line-pack: end;
+  -webkit-align-content: flex-end;
+  align-content: flex-end;
+}
+
+.uk-flex-wrap-space-between {
+  -ms-flex-line-pack: justify;
+  -webkit-align-content: space-between;
+  align-content: space-between;
+}
+
+.uk-flex-wrap-space-around {
+  -ms-flex-line-pack: distribute;
+  -webkit-align-content: space-around;
+  align-content: space-around;
+}
+
+/* Item ordering
+ ========================================================================== */
+/*
+ * Default is 0
+ */
+
+.uk-flex-order-first {
+  -ms-flex-order: -1;
+  -webkit-order: -1;
+  order: -1;
+}
+
+.uk-flex-order-last {
+  -ms-flex-order: 99;
+  -webkit-order: 99;
+  order: 99;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: 480px) {
+  .uk-flex-order-first-small {
+    -ms-flex-order: -1;
+    -webkit-order: -1;
+    order: -1;
+  }
+  .uk-flex-order-last-small {
+    -ms-flex-order: 99;
+    -webkit-order: 99;
+    order: 99;
+  }
+}
+
+/* Tablet and bigger */
+@media (min-width: 768px) {
+  .uk-flex-order-first-medium {
+    -ms-flex-order: -1;
+    -webkit-order: -1;
+    order: -1;
+  }
+  .uk-flex-order-last-medium {
+    -ms-flex-order: 99;
+    -webkit-order: 99;
+    order: 99;
+  }
+}
+
+/* Desktop and bigger */
+@media (min-width: 960px) {
+  .uk-flex-order-first-large {
+    -ms-flex-order: -1;
+    -webkit-order: -1;
+    order: -1;
+  }
+  .uk-flex-order-last-large {
+    -ms-flex-order: 99;
+    -webkit-order: 99;
+    order: 99;
+  }
+}
+
+/* Large screen and bigger */
+@media (min-width: 1220px) {
+  .uk-flex-order-first-xlarge {
+    -ms-flex-order: -1;
+    -webkit-order: -1;
+    order: -1;
+  }
+  .uk-flex-order-last-xlarge {
+    -ms-flex-order: 99;
+    -webkit-order: 99;
+    order: 99;
+  }
+}
+
+/* Item dimensions
+ ========================================================================== */
+/*
+ * Initial: 0 1 auto
+ * Content dimensions, but shrinks
+ */
+/*
+ * No Flex: 0 0 auto
+ * Content dimensions
+ */
+
+.uk-flex-item-none {
+  -ms-flex: none;
+  -webkit-flex: none;
+  flex: none;
+}
+
+/*
+ * Relative Flex: 1 1 auto
+ * Space is allocated considering content
+ * 1. Fixes flex-shrink value in IE10
+ */
+
+.uk-flex-item-auto {
+  -ms-flex: auto;
+  -webkit-flex: auto;
+  flex: auto;
+  /* 1 */
+  -ms-flex-negative: 1;
+}
+
+/*
+ * Absolute Flex: 1 1 0%
+ * Space is allocated solely based on flex
+ */
+
+.uk-flex-item-1 {
+  -ms-flex: 1;
+  -webkit-flex: 1;
+  flex: 1;
+}
+
+/* ========================================================================
+   Component: Contrast
+ ========================================================================== */
+
+.uk-contrast {
+  color: #ffffff;
+  a:not([class]), .uk-link {
+    color: rgba(255, 255, 255, 0.7);
+    text-decoration: none;
+  }
+  a:not([class]):hover, .uk-link:hover {
+    color: #ffffff;
+    text-decoration: underline;
+  }
+  :not(pre) > {
+    code, kbd, samp {
+      color: #ffffff;
+    }
+  }
+  em, h1, h2, h3, h4, h5, h6 {
+    color: #ffffff;
+  }
+  hr {
+    border-top-color: rgba(255, 255, 255, 0.2);
+  }
+  .uk-nav li > a {
+    text-decoration: none;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+  .uk-nav-side {
+    > li {
+      > a {
+        color: #ffffff;
+        &:hover, &:focus {
+          background: rgba(255, 255, 255, 0.1);
+          color: #ffffff;
+        }
+      }
+      &.uk-active > a {
+        background: #ffffff;
+        color: #444444;
+      }
+    }
+    .uk-nav-header {
+      color: #ffffff;
+    }
+    .uk-nav-divider {
+      border-top-color: rgba(255, 255, 255, 0.2);
+    }
+    ul a {
+      color: rgba(255, 255, 255, 0.7);
+      &:hover {
+        color: #ffffff;
+      }
+    }
+  }
+  .uk-subnav > {
+    * > a {
+      color: rgba(255, 255, 255, 0.7);
+      text-decoration: none;
+      &:hover, &:focus {
+        color: #ffffff;
+        text-decoration: none;
+      }
+    }
+    .uk-active > a {
+      color: #ffffff;
+    }
+  }
+  .uk-subnav-line > :nth-child(n+2):before {
+    border-left-color: rgba(255, 255, 255, 0.2);
+  }
+  .uk-subnav-pill > {
+    * > a {
+      &:hover, &:focus {
+        background: rgba(255, 255, 255, 0.7);
+        color: #444444;
+        text-decoration: none;
+      }
+    }
+    .uk-active > a {
+      background: #ffffff;
+      color: #444444;
+    }
+  }
+  .uk-list-line > li:nth-child(n+2) {
+    border-top-color: rgba(255, 255, 255, 0.2);
+  }
+  .uk-form {
+    select, textarea {
+      border-color: rgba(255, 255, 255, 0.8);
+      background: rgba(255, 255, 255, 0.8);
+      color: #444444;
+      background-clip: padding-box;
+    }
+    input {
+      &:not([type]), &[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
+        border-color: rgba(255, 255, 255, 0.8);
+        background: rgba(255, 255, 255, 0.8);
+        color: #444444;
+        background-clip: padding-box;
+      }
+    }
+    select:focus, textarea:focus {
+      border-color: #ffffff;
+      background: #ffffff;
+      color: #444444;
+    }
+    input {
+      &:not([type]):focus, &[type="text"]:focus, &[type="password"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="date"]:focus, &[type="month"]:focus, &[type="time"]:focus, &[type="week"]:focus, &[type="number"]:focus, &[type="email"]:focus, &[type="url"]:focus, &[type="search"]:focus, &[type="tel"]:focus, &[type="color"]:focus {
+        border-color: #ffffff;
+        background: #ffffff;
+        color: #444444;
+      }
+    }
+    :-ms-input-placeholder {
+      color: rgba(68, 68, 68, 0.7) !important;
+    }
+    ::-moz-placeholder, ::-webkit-input-placeholder {
+      color: rgba(68, 68, 68, 0.7);
+    }
+  }
+  .uk-button {
+    color: #444444;
+    background: #ffffff;
+    &:hover, &:focus {
+      background-color: rgba(255, 255, 255, 0.8);
+      color: #444444;
+    }
+    &:active, &.uk-active {
+      background-color: rgba(255, 255, 255, 0.7);
+      color: #444444;
+    }
+  }
+  .uk-button-primary {
+    background-color: #00a8e6;
+    color: #ffffff;
+    &:hover, &:focus {
+      background-color: #35b3ee;
+      color: #ffffff;
+    }
+    &:active, &.uk-active {
+      background-color: #0091ca;
+      color: #ffffff;
+    }
+  }
+  .uk-icon-hover {
+    color: rgba(255, 255, 255, 0.7);
+    &:hover {
+      color: #ffffff;
+    }
+  }
+  .uk-icon-button {
+    background: #ffffff;
+    color: #444444;
+    &:hover, &:focus {
+      background-color: rgba(255, 255, 255, 0.8);
+      color: #444444;
+    }
+    &:active {
+      background-color: rgba(255, 255, 255, 0.7);
+      color: #444444;
+    }
+  }
+  .uk-text-muted {
+    color: rgba(255, 255, 255, 0.6) !important;
+  }
+  .uk-text-primary {
+    color: #2d7091 !important;
+  }
+}
+
 /* ========================================================================
    Component: Print
  ========================================================================== */
@@ -8182,4 +9442,4 @@ a.uk-thumbnail {
   h2, h3 {
     page-break-after: avoid;
   }
-}
+}