html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
a {
background: transparent;
text-decoration:none;
}
/*
* Improves readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/*
* Style
*/
/* Fix viewport for IE10 snap mode
========================================================================== */
@media screen and (max-width: 400px) {
@-ms-viewport {
width: device-width;
}
}
/* ========================================================================
Component: Grid
========================================================================== */
/*
* 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;
}
/*
* DEPRECATED
* Micro clearfix
* Can't use `table` because it creates a 1px gap when it becomes a flex item, only in Webkit
*/
.uk-grid:before,
.uk-grid:after {
content: "";
display: block;
overflow: hidden;
}
.uk-grid:after {
clear: both;
}
/*
* Grid cell
* 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
*/
.uk-grid > * {
/* 1 */
-ms-flex: none;
-webkit-flex: none;
flex: none;
/* 2 */
margin: 0;
/* 3 */
float: left;
}
/*
* Remove margin from the last-child
*/
.uk-grid > * > :last-child {
margin-bottom: 0;
}
.uk-overlay-panel h3,
. tm-grid-title{
padding:5px;
text-align:center;
background:#222;
}
/* Grid gutter
========================================================================== */
/*
* Default gutter
*/
/* Horizontal */
.uk-grid {
margin-left: -25px;
}
.uk-grid > * {
padding-left: 25px;
}
/* Vertical */
.uk-grid + .uk-grid,
.uk-grid-margin,
.uk-grid > * > .uk-panel + .uk-panel {
margin-top: 25px;
}
/* Large screen and bigger */
@media (min-width: 1700px) {
/* Horizontal */
.uk-grid {
margin-left: -40px;
}
.uk-grid > * {
padding-left: 40px;
}
/* Vertical */
.uk-grid + .uk-grid,
.uk-grid-margin,
.uk-grid > * > .uk-panel + .uk-panel {
margin-top: 40px;
}
}
/*
* Collapse gutter
*/
/* Horizontal */
.uk-grid-collapse {
margin-left: 0;
}
.uk-grid-collapse > * {
padding-left: 0;
}
/* Vertical */
.uk-grid-collapse + .uk-grid-collapse,
.uk-grid-collapse > .uk-grid-margin,
.uk-grid-collapse > * > .uk-panel + .uk-panel {
margin-top: 0;
}
/*
* Small gutter
*/
/* Horizontal */
.uk-grid-small {
margin-left: -10px;
}
.uk-grid-small > * {
padding-left: 10px;
}
/* Vertical */
.uk-grid-small + .uk-grid-small,
.uk-grid-small > .uk-grid-margin,
.uk-grid-small > * > .uk-panel + .uk-panel {
margin-top: 10px;
}
/*
* Medium gutter
*/
/* Horizontal */
.uk-grid-medium {
margin-left: -25px;
}
.uk-grid-medium > * {
padding-left: 25px;
}
/* Vertical */
.uk-grid-medium + .uk-grid-medium,
.uk-grid-medium > .uk-grid-margin,
.uk-grid-medium > * > .uk-panel + .uk-panel {
margin-top: 25px;
}
/* Modifier: `uk-grid-divider`
========================================================================== */
/*
* Horizontal divider
* 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:not(:empty) {
margin-left: -25px;
margin-right: -25px;
}
.uk-grid-divider > * {
padding-left: 25px;
padding-right: 25px;
}
.uk-grid-divider > [class*='uk-width-1-']:not(.uk-width-1-1):nth-child(n+2),
.uk-grid-divider > [class*='uk-width-2-']:nth-child(n+2),
.uk-grid-divider > [class*='uk-width-3-']:nth-child(n+2),
.uk-grid-divider > [class*='uk-width-4-']:nth-child(n+2),
.uk-grid-divider > [class*='uk-width-5-']:nth-child(n+2),
.uk-grid-divider > [class*='uk-width-6-']:nth-child(n+2),
.uk-grid-divider > [class*='uk-width-7-']:nth-child(n+2),
.uk-grid-divider > [class*='uk-width-8-']:nth-child(n+2),
.uk-grid-divider > [class*='uk-width-9-']:nth-child(n+2) {
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
/* Tablet and bigger */
@media (min-width: 768px) {
.uk-grid-divider > [class*='uk-width-medium-']:not(.uk-width-medium-1-1):nth-child(n+2) {
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
}
/* Desktop and bigger */
@media (min-width: 960px) {
.uk-grid-divider > [class*='uk-width-large-']:not(.uk-width-large-1-1):nth-child(n+2) {
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
}
/* Large screen and bigger */
@media (min-width: 1700px) {
/*
* Large gutter
*/
.uk-grid-divider:not(:empty) {
margin-left: -40px;
margin-right: -40px;
}
.uk-grid-divider > * {
padding-left: 40px;
padding-right: 40px;
}
.uk-grid-divider:empty {
margin-top: 40px;
margin-bottom: 40px;
}
}
/*
* Vertical divider
*/
.uk-grid-divider:empty {
margin-top: 25px;
margin-bottom: 25px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
/* Match panels in grids
========================================================================== */
/*
* 1. Behave like a block element
*/
.uk-grid-match > * {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* 1 */
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.uk-grid-match > * > * {
/* 1 */
-ms-flex: none;
-webkit-flex: none;
flex: none;
box-sizing: border-box;
width: 100%;
}
/* Even grid cell widths
========================================================================== */
[class*='uk-grid-width'] > * {
box-sizing: border-box;
width: 100%;
}
.uk-grid-width-1-2 > * {
width: 50%;
}
.uk-grid-width-1-3 > * {
width: 33.333%;
}
.uk-grid-width-1-4 > * {
width: 25%;
}
.uk-grid-width-1-5 > * {
width: 20%;
}
.uk-grid-width-1-6 > * {
width: 16.666%;
}
.uk-grid-width-1-10 > * {
width: 10%;
}
/* Phone landscape and bigger */
@media (min-width: 480px) {
.uk-grid-width-small-1-2 > * {
width: 50%;
}
.uk-grid-width-small-1-3 > * {
width: 33.333%;
}
.uk-grid-width-small-1-4 > * {
width: 25%;
}
.uk-grid-width-small-1-5 > * {
width: 20%;
}
.uk-grid-width-small-1-6 > * {
width: 16.666%;
}
.uk-grid-width-small-1-10 > * {
width: 10%;
}
}
/* Tablet and bigger */
@media (min-width: 768px) {
.uk-grid-width-medium-1-2 > * {
width: 50%;
}
.uk-grid-width-medium-1-3 > * {
width: 33.333%;
}
.uk-grid-width-medium-1-4 > * {
width: 25%;
}
.uk-grid-width-medium-1-5 > * {
width: 20%;
}
.uk-grid-width-medium-1-6 > * {
width: 16.666%;
}
.uk-grid-width-medium-1-10 > * {
width: 10%;
}
}
/* Desktop and bigger */
@media (min-width: 960px) {
.uk-grid-width-large-1-2 > * {
width: 50%;
}
.uk-grid-width-large-1-3 > * {
width: 33.333%;
}
.uk-grid-width-large-1-4 > * {
width: 25%;
}
.uk-grid-width-large-1-5 > * {
width: 20%;
}
.uk-grid-width-large-1-6 > * {
width: 16.666%;
}
.uk-grid-width-large-1-10 > * {
width: 10%;
}
}
/* Large screen and bigger */
@media (min-width: 1700px) {
.uk-grid-width-xlarge-1-2 > * {
width: 50%;
}
.uk-grid-width-xlarge-1-3 > * {
width: 33.333%;
}
.uk-grid-width-xlarge-1-4 > * {
width: 25%;
}
.uk-grid-width-xlarge-1-5 > * {
width: 20%;
}
.uk-grid-width-xlarge-1-6 > * {
width: 16.666%;
}
.uk-grid-width-xlarge-1-10 > * {
width: 10%;
}
}
/* Sub-objects: `uk-width-*`
========================================================================== */
[class*='uk-width'] {
box-sizing: border-box;
width: 100%;
}
/*
* Widths
*/
/* Whole */
.uk-width-1-1 {
width: 100%;
}
/* Halves */
.uk-width-1-2,
.uk-width-2-4,
.uk-width-3-6,
.uk-width-5-10 {
width: 50%;
}
/* Thirds */
.uk-width-1-3,
.uk-width-2-6 {
width: 33.333%;
}
.uk-width-2-3,
.uk-width-4-6 {
width: 66.666%;
}
/* Quarters */
.uk-width-1-4 {
width: 25%;
}
.uk-width-3-4 {
width: 75%;
}
/* Fifths */
.uk-width-1-5,
.uk-width-2-10 {
width: 20%;
}
.uk-width-2-5,
.uk-width-4-10 {
width: 40%;
}
.uk-width-3-5,
.uk-width-6-10 {
width: 60%;
}
.uk-width-4-5,
.uk-width-8-10 {
width: 80%;
}
/* Sixths */
.uk-width-1-6 {
width: 16.666%;
}
.uk-width-5-6 {
width: 83.333%;
}
/* Tenths */
.uk-width-1-10 {
width: 10%;
}
.uk-width-3-10 {
width: 30%;
}
.uk-width-7-10 {
width: 70%;
}
.uk-width-9-10 {
width: 90%;
}
/* Phone landscape and bigger */
@media (min-width: 480px) {
/* Whole */
.uk-width-small-1-1 {
width: 100%;
}
/* Halves */
.uk-width-small-1-2,
.uk-width-small-2-4,
.uk-width-small-3-6,
.uk-width-small-5-10 {
width: 50%;
}
/* Thirds */
.uk-width-small-1-3,
.uk-width-small-2-6 {
width: 33.333%;
}
.uk-width-small-2-3,
.uk-width-small-4-6 {
width: 66.666%;
}
/* Quarters */
.uk-width-small-1-4 {
width: 25%;
}
.uk-width-small-3-4 {
width: 75%;
}
/* Fifths */
.uk-width-small-1-5,
.uk-width-small-2-10 {
width: 20%;
}
.uk-width-small-2-5,
.uk-width-small-4-10 {
width: 40%;
}
.uk-width-small-3-5,
.uk-width-small-6-10 {
width: 60%;
}
.uk-width-small-4-5,
.uk-width-small-8-10 {
width: 80%;
}
/* Sixths */
.uk-width-small-1-6 {
width: 16.666%;
}
.uk-width-small-5-6 {
width: 83.333%;
}
/* Tenths */
.uk-width-small-1-10 {
width: 10%;
}
.uk-width-small-3-10 {
width: 30%;
}
.uk-width-small-7-10 {
width: 70%;
}
.uk-width-small-9-10 {
width: 90%;
}
}
/* Tablet and bigger */
@media (min-width: 768px) {
/* Whole */
.uk-width-medium-1-1 {
width: 100%;
}
/* Halves */
.uk-width-medium-1-2,
.uk-width-medium-2-4,
.uk-width-medium-3-6,
.uk-width-medium-5-10 {
width: 50%;
}
/* Thirds */
.uk-width-medium-1-3,
.uk-width-medium-2-6 {
width: 33.333%;
}
.uk-width-medium-2-3,
.uk-width-medium-4-6 {
width: 66.666%;
}
/* Quarters */
.uk-width-medium-1-4 {
width: 25%;
}
.uk-width-medium-3-4 {
width: 75%;
}
/* Fifths */
.uk-width-medium-1-5,
.uk-width-medium-2-10 {
width: 20%;
}
.uk-width-medium-2-5,
.uk-width-medium-4-10 {
width: 40%;
}
.uk-width-medium-3-5,
.uk-width-medium-6-10 {
width: 60%;
}
.uk-width-medium-4-5,
.uk-width-medium-8-10 {
width: 80%;
}
/* Sixths */
.uk-width-medium-1-6 {
width: 16.666%;
}
.uk-width-medium-5-6 {
width: 83.333%;
}
/* Tenths */
.uk-width-medium-1-10 {
width: 10%;
}
.uk-width-medium-3-10 {
width: 30%;
}
.uk-width-medium-7-10 {
width: 70%;
}
.uk-width-medium-9-10 {
width: 90%;
}
}
/* Desktop and bigger */
@media (min-width: 960px) {
/* Whole */
.uk-width-large-1-1 {
width: 100%;
}
/* Halves */
.uk-width-large-1-2,
.uk-width-large-2-4,
.uk-width-large-3-6,
.uk-width-large-5-10 {
width: 50%;
}
/* Thirds */
.uk-width-large-1-3,
.uk-width-large-2-6 {
width: 33.333%;
}
.uk-width-large-2-3,
.uk-width-large-4-6 {
width: 66.666%;
}
/* Quarters */
.uk-width-large-1-4 {
width: 25%;
}
.uk-width-large-3-4 {
width: 75%;
}
/* Fifths */
.uk-width-large-1-5,
.uk-width-large-2-10 {
width: 20%;
}
.uk-width-large-2-5,
.uk-width-large-4-10 {
width: 40%;
}
.uk-width-large-3-5,
.uk-width-large-6-10 {
width: 60%;
}
.uk-width-large-4-5,
.uk-width-large-8-10 {
width: 80%;
}
/* Sixths */
.uk-width-large-1-6 {
width: 16.666%;
}
.uk-width-large-5-6 {
width: 83.333%;
}
/* Tenths */
.uk-width-large-1-10 {
width: 10%;
}
.uk-width-large-3-10 {
width: 30%;
}
.uk-width-large-7-10 {
width: 70%;
}
.uk-width-large-9-10 {
width: 90%;
}
}
/* Sub-object: `uk-push-*` and `uk-pull-*`
========================================================================== */
/*
* Source ordering
* Works only with `uk-width-medium-*`
*/
/* Tablet and bigger */
@media (min-width: 768px) {
[class*='uk-push-'],
[class*='uk-pull-'] {
position: relative;
}
/*
* Push
*/
/* Halves */
.uk-push-1-2,
.uk-push-2-4,
.uk-push-3-6,
.uk-push-5-10 {
left: 50%;
}
/* Thirds */
.uk-push-1-3,
.uk-push-2-6 {
left: 33.333%;
}
.uk-push-2-3,
.uk-push-4-6 {
left: 66.666%;
}
/* Quarters */
.uk-push-1-4 {
left: 25%;
}
.uk-push-3-4 {
left: 75%;
}
/* Fifths */
.uk-push-1-5,
.uk-push-2-10 {
left: 20%;
}
.uk-push-2-5,
.uk-push-4-10 {
left: 40%;
}
.uk-push-3-5,
.uk-push-6-10 {
left: 60%;
}
.uk-push-4-5,
.uk-push-8-10 {
left: 80%;
}
/* Sixths */
.uk-push-1-6 {
left: 16.666%;
}
.uk-push-5-6 {
left: 83.333%;
}
/* Tenths */
.uk-push-1-10 {
left: 10%;
}
.uk-push-3-10 {
left: 30%;
}
.uk-push-7-10 {
left: 70%;
}
.uk-push-9-10 {
left: 90%;
}
/*
* Pull
*/
/* Halves */
.uk-pull-1-2,
.uk-pull-2-4,
.uk-pull-3-6,
.uk-pull-5-10 {
left: -50%;
}
/* Thirds */
.uk-pull-1-3,
.uk-pull-2-6 {
left: -33.333%;
}
.uk-pull-2-3,
.uk-pull-4-6 {
left: -66.666%;
}
/* Quarters */
.uk-pull-1-4 {
left: -25%;
}
.uk-pull-3-4 {
left: -75%;
}
/* Fifths */
.uk-pull-1-5,
.uk-pull-2-10 {
left: -20%;
}
.uk-pull-2-5,
.uk-pull-4-10 {
left: -40%;
}
.uk-pull-3-5,
.uk-pull-6-10 {
left: -60%;
}
.uk-pull-4-5,
.uk-pull-8-10 {
left: -80%;
}
/* Sixths */
.uk-pull-1-6 {
left: -16.666%;
}
.uk-pull-5-6 {
left: -83.333%;
}
/* Tenths */
.uk-pull-1-10 {
left: -10%;
}
.uk-pull-3-10 {
left: -30%;
}
.uk-pull-7-10 {
left: -70%;
}
.uk-pull-9-10 {
left: -90%;
}
}
.uk-grid-divider:empty {
border-top: 1px dashed rgba(0, 0, 0, 0.1);
}
/*
* Horizontal divider
*/
.uk-grid-divider > [class*='uk-width-1-']:not(.uk-width-1-1):nth-child(n+2),
.uk-grid-divider > [class*='uk-width-2-']:nth-child(n+2),
.uk-grid-divider > [class*='uk-width-3-']:nth-child(n+2),
.uk-grid-divider > [class*='uk-width-4-']:nth-child(n+2),
.uk-grid-divider > [class*='uk-width-5-']:nth-child(n+2),
.uk-grid-divider > [class*='uk-width-6-']:nth-child(n+2),
.uk-grid-divider > [class*='uk-width-7-']:nth-child(n+2),
.uk-grid-divider > [class*='uk-width-8-']:nth-child(n+2),
.uk-grid-divider > [class*='uk-width-9-']:nth-child(n+2) {
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
}
/* Tablet and bigger */
@media (min-width: 768px) {
.uk-grid-divider > [class*='uk-width-medium-']:not(.uk-width-medium-1-1):nth-child(n+2) {
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
}
}
/* Desktop and bigger */
@media (min-width: 960px) {
.uk-grid-divider > [class*='uk-width-large-']:not(.uk-width-large-1-1):nth-child(n+2) {
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
}
}
/* ========================================================================
Component: Panel
========================================================================== */
/*
* 1. Needed for `a` elements
* 2. Create position context for badges
*/
.uk-panel {
/* 1 */
display: block;
/* 2 */
position: relative;
}
/*
* Allow panels to be anchors
*/
.uk-panel,
.uk-panel:hover {
text-decoration: none;
}
/*
* Micro clearfix to make panels more robust
*/
.uk-panel:before,
.uk-panel:after {
content: "";
display: table;
}
.uk-panel:after {
clear: both;
}
/*
* Remove margin from the last-child if not `uk-widget-title`
*/
.uk-panel > :not(.uk-panel-title):last-child {
margin-bottom: 0;
}
/* Sub-object: `uk-panel-title`
========================================================================== */
.uk-panel-title,
.uk-module-title {
margin-top: 0;
margin-bottom: 15px;
font-size: 20px;
line-height: 27px;
font-weight: normal;
text-transform: uppercase;
color: #393939;
padding-bottom: 15px;
display: table;
font-weight: 300;
letter-spacing: 1px;
border-bottom: 1px solid #ec3b00;
}
/* ========================================================================
Component: Icon
========================================================================== */
@font-face {
font-family: 'FontAwesome';
src: url("../warp/vendor/uikit/fonts/fontawesome-webfont.eot");
src: url("../warp/vendor/uikit/fonts/fontawesome-webfontd41d.eot?#iefix") format("embedded-opentype"), url("../warp/vendor/uikit/fonts/fontawesome-webfont.woff2") format('woff2'), url("../warp/vendor/uikit/fonts/fontawesome-webfont.woff") format("woff"), url("../warp/vendor/uikit/fonts/fontawesome-webfont.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
/*
* 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-'] {
font-family: FontAwesome;
/* 1 */
display: inline-block;
/* 2 */
font-weight: normal;
font-style: normal;
/* 4 */
line-height: 1;
/* 5 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 6 */
[class*='uk-icon-'],
[class*='uk-icon-']:hover,
[class*='uk-icon-']:focus {
text-decoration: none;
}
/* Size modifiers
========================================================================== */
.uk-icon-small {
font-size: 150%;
vertical-align: -10%;
}
.uk-icon-medium {
font-size: 200%;
vertical-align: -16%;
}
.uk-icon-large {
font-size: 250%;
vertical-align: -22%;
}
/* Modifier: `uk-icon-justify`
========================================================================== */
.uk-icon-justify {
width: 1em;
text-align: center;
}
/* Modifier: `uk-icon-spin`
========================================================================== */
.uk-icon-spin {
display: inline-block;
-webkit-animation: uk-rotate 2s infinite linear;
animation: uk-rotate 2s infinite linear;
}
/* Modifier: `uk-icon-hover`
========================================================================== */
.uk-icon-hover {
color: #3c3c3c;
}
/*
* Hover
*/
.uk-icon-hover:hover {
color: #ec3b00;
}
/* Modifier: `uk-icon-button`
========================================================================== */
.uk-icon-button {
box-sizing: border-box;
display: inline-block;
width: 35px;
height: 35px;
border-radius: 100%;
background: rgba(0, 0, 0, 0);
line-height: 35px;
color: #3c3c3c;
font-size: 18px;
text-align: center;
height: 20px;
line-height: 32px;
width: 20px;
margin-left: 5px;
}
/*
* Hover
* 1. Apply hover style also to focus state
* 2. Remove default focus style
*/
.uk-icon-button:hover,
.uk-icon-button:focus {
background-color: rgba(0, 0, 0, 0);
color: #ec3b00;
/* 2 */
outline: none;
}
/* Active */
.uk-icon-button:active {
background-color: rgba(0, 0, 0, 0);
color: #ec3b00;
}
/* ========================================================================
Component: Close
========================================================================== */
/*
* Removes inner padding and border in Firefox 4+.
*/
.uk-close::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
* 1. Correct inability to style clickable `input` types in iOS.
* 2. Remove margins in Chrome, Safari and Opera.
* 3. Remove borders for `button`.
* 4. Address `overflow` set to `hidden` in IE 8/9/10/11.
* 5. Correct `font` properties and `color` not being inherited for `button`.
* 6. Address inconsistent `text-transform` inheritance which is only inherit in Firefox and IE
* 7. Remove default `button` padding and background color
* 8. Style
*/
.uk-close {
/* 1 */
-webkit-appearance: none;
/* 2 */
margin: 0;
/* 3 */
border: none;
/* 4 */
overflow: visible;
/* 5 */
font: inherit;
color: inherit;
/* 6 */
text-transform: none;
/* 7. */
padding: 0;
background: transparent;
/* 8 */
display: inline-block;
box-sizing: content-box;
width: 20px;
line-height: 20px;
text-align: center;
vertical-align: middle;
opacity: 0.3;
}
/* Icon */
.uk-close:after {
display: block;
content: "\f00d";
font-family: FontAwesome;
}
/*
* Hover
* 1. Apply hover style also to focus state
* 2. Remove default focus style
* 3. Required for `a` elements
*/
.uk-close:hover,
.uk-close:focus {
opacity: 0.5;
/* 2 */
outline: none;
/* 3 */
color: inherit;
text-decoration: none;
cursor: pointer;
}
/* Modifier
========================================================================== */
.uk-close-alt {
padding: 2px;
border-radius: 50%;
background: #eeeeee;
opacity: 1;
}
/* Hover */
.uk-close-alt:hover,
.uk-close-alt:focus {
opacity: 1;
}
/* Icon */
.uk-close-alt:after {
opacity: 0.5;
}
.uk-close-alt:hover:after,
.uk-close-alt:focus:after {
opacity: 0.8;
}
/* ========================================================================
Component: Overlay
========================================================================== */
/*
* 1. Container width fits its content
* 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. 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 {
/* 1 */
display: inline-block;
/* 2 */
position: relative;
/* 3 */
max-width: 100%;
/* 4 */
vertical-align: middle;
/* 5 */
overflow: hidden;
/* 6 */
-webkit-transform: translateZ(0);
/* 7 */
margin: 0;
}
/* 6 for Safari */
.uk-overlay.uk-border-circle {
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
/*
* Remove margin from content
*/
.uk-overlay > :first-child {
margin-bottom: 0;
}
/* 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;
}
/*
* Remove margin from the last-child
*/
.uk-overlay-panel > :last-child,
.uk-overlay-panel.uk-flex > * > :last-child {
margin-bottom: 0;
}
/*
* Keep color for headings if the default heading color is changed
*/
.uk-overlay-panel h1,
.uk-overlay-panel h2,
.uk-overlay-panel h3,
.uk-overlay-panel h4,
.uk-overlay-panel h5,
.uk-overlay-panel h6 {
color: inherit;
text-align:center;
background:#333;
padding:5px 1px;
}
.uk-overlay-panel a:not([class]) {
color: inherit;
text-decoration: underline;
}
.uk-overlay-panel a[class*='uk-icon-']:not(.uk-icon-button) {
color: inherit;
}
/* Sub-object `uk-overlay-hover` and `uk-overlay-active`
========================================================================== */
.uk-overlay-hover:not(:hover):not(.uk-hover) .uk-overlay-panel:not(.uk-ignore) {
opacity: 0;
}
.uk-overlay-active :not(.uk-active) > .uk-overlay-panel:not(.uk-ignore) {
opacity: 0;
}
/* Modifier `uk-overlay-background`
========================================================================== */
.uk-overlay-background {
background: rgba(236, 59, 0, 0.5);
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.05) inset, 0 0 0 6px rgba(255, 255, 255, 0.3) inset;
background: -webkit-linear-gradient(265deg, rgba(236, 118, 0, 0.5) 0%, rgba(236, 0, 0, 0.5) 100%) rgba(236, 59, 0, 0.5);
background: -moz-linear-gradient(265deg, rgba(236, 118, 0, 0.5) 0%, rgba(236, 0, 0, 0.5) 100%) rgba(236, 59, 0, 0.5);
background: -o-linear-gradient(265deg, rgba(236, 118, 0, 0.5) 0%, rgba(236, 0, 0, 0.5) 100%) rgba(236, 59, 0, 0.5);
background: -ms-linear-gradient(265deg, rgba(236, 118, 0, 0.5) 0%, rgba(236, 0, 0, 0.5) 100%) rgba(236, 59, 0, 0.5);
background: linear-gradient(185deg, rgba(236, 118, 0, 0.5) 0%, rgba(236, 0, 0, 0.5) 100%) rgba(236, 59, 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: "\e038";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px;
font-size: 40px;
line-height: 1;
font-family: FontAwesome;
text-align: center;
color: #ffffff;
font-family: "Simple-Line-Icons";
top: auto;
bottom: 20px;
left: auto;
right: 20px;
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}
/* 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-active .uk-overlay-scale,
.uk-overlay-active .uk-overlay-spin,
.uk-overlay-active [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);
height:240px;
}
.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);
}
[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
* 2. Set style
* 3. Fade-in transition
*/
.uk-overlay-area {
/* 1 */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* 2 */
background: rgba(0, 0, 0, 0.3);
/* 3 */
opacity: 0;
-webkit-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
-webkit-transform: translate3d(0, 0, 0);
}
/*
* Hover
* 1. `uk-hover` to support touch devices
* 2. Use optional `uk-overlay-toggle` to trigger the overlay earlier
*/
.uk-overlay:hover .uk-overlay-area,
.uk-overlay.uk-hover .uk-overlay-area,
.uk-overlay-toggle:hover .uk-overlay-area,
.uk-overlay-toggle.uk-hover .uk-overlay-area {
opacity: 1;
}
/*
* Icon
*/
.uk-overlay-area:empty: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;
}
/* DEPRECATED
* Sub-object `uk-overlay-area-content`
========================================================================== */
/*
* Remove whitespace between child elements when using `inline-block`
* Needed for Firefox
*/
.uk-overlay-area:not(:empty) {
font-size: 0.001px;
}
/*
* 1. Needed for vertical alignment
*/
.uk-overlay-area:not(:empty):before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
/*
* 1. Set vertical alignment
* 2. Reset whitespace hack
* 3. Set horizontal alignment
* 4. Set style
*/
.uk-overlay-area-content {
/* 1 */
display: inline-block;
box-sizing: border-box;
width: 100%;
vertical-align: middle;
/* 2 */
font-size: 1rem;
/* 3 */
text-align: center;
/* 4 */
padding: 0 15px;
color: #ffffff;
}
/*
* Remove margin from the last-child
*/
.uk-overlay-area-content > :last-child {
margin-bottom: 0;
}
/*
* Links in overlay area
*/
.uk-overlay-area-content a:not([class]),
.uk-overlay-area-content a:not([class]):hover {
color: inherit;
}
/* DEPRECATED
* Sub-object `uk-overlay-caption`
========================================================================== */
/*
* 1. Set position
* 2. Set style
* 3. Fade-in transition
*/
.uk-overlay-caption {
/* 1 */
position: absolute;
bottom: 0;
left: 0;
right: 0;
/* 2 */
padding: 15px;
background: rgba(0, 0, 0, 0.5);
color: #ffffff;
/* 3 */
opacity: 0;
-webkit-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
-webkit-transform: translate3d(0, 0, 0);
}
/*
* Hover
* 1. `uk-hover` to support touch devices
* 2. Use optional `uk-overlay-toggle` to trigger the overlay earlier
*/
.uk-overlay:hover .uk-overlay-caption,
.uk-overlay.uk-hover .uk-overlay-caption,
.uk-overlay-toggle:hover .uk-overlay-caption,
.uk-overlay-toggle.uk-hover .uk-overlay-caption {
opacity: 1;
}
.uk-overlay > img.uk-thumbnail {
max-width: 95%;
max-width: calc(100% - 10px);
margin: 5px;
}
.uk-modal-dialog.uk-modal-dialog-small {
width: 350px;
}
.uk-overlay-background.tm-overlay-secondary {
background: -webkit-linear-gradient(265deg, rgba(75, 75, 75, 0.5) 0%, rgba(75, 75, 75, 0.5) 100%) rgba(75, 75, 75, 0.5);
background: -moz-linear-gradient(265deg, rgba(75, 75, 75, 0.5) 0%, rgba(75, 75, 75, 0.5) 100%) rgba(75, 75, 75, 0.5);
background: -o-linear-gradient(265deg, rgba(75, 75, 75, 0.5) 0%, rgba(75, 75, 75, 0.5) 100%) rgba(75, 75, 75, 0.5);
background: -ms-linear-gradient(265deg, rgba(75, 75, 75, 0.5) 0%, rgba(75, 75, 75, 0.5) 100%) rgba(75, 75, 75, 0.5);
background: linear-gradient(185deg, rgba(75, 75, 75, 0.5) 0%, rgba(75, 75, 75, 0.5) 100%) rgba(75, 75, 75, 0.5);
}
.uk-overlay-active .uk-overlay-fade,
.uk-overlay-active .uk-overlay-scale,
.uk-overlay-active .uk-overlay-spin,
.uk-overlay-active [class*='uk-overlay-slide'] {
transition-duration: 0.4s;
}
.uk-overlay-blur {
-webkit-filter: blur(2px);
filter: blur(2px);
}
.uk-overlay-slide-top {
-webkit-transform: translateY(-20%);
transform: translateY(-20%);
}
.uk-overlay-slide-bottom {
-webkit-transform: translateY(20%);
transform: translateY(20%);
}
.uk-overlay-slide-left {
-webkit-transform: translateX(-5%);
transform: translateX(-5%);
}
.uk-overlay-slide-right {
-webkit-transform: translateX(5%);
transform: translateX(5%);
}
/* ========================================================================
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;
}
/* Hide animated element if scrollspy is used */
@media screen {
[data-uk-scrollspy*='uk-animation-']:not([data-uk-scrollspy*='target']) {
opacity: 0;
}
}
/*
* Fade
* Higher specificity (!important) needed because of reverse modifier
*/
.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 !important;
animation-timing-function: linear !important;
}
/*
* Fade with 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;
}
/*
* Fade with 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;
}
/*
* Scale
*/
.uk-animation-scale {
-webkit-animation-name: uk-scale-12;
animation-name: uk-scale-12;
}
/*
* Shake
*/
.uk-animation-shake {
-webkit-animation-name: uk-shake;
animation-name: uk-shake;
}
/* Direction modifiers
========================================================================== */
.uk-animation-reverse {
-webkit-animation-direction: reverse;
animation-direction: reverse;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
/* Duration modifiers
========================================================================== */
.uk-animation-15 {
-webkit-animation-duration: 15s;
animation-duration: 15s;
}
/* Origin modifiers
========================================================================== */
.uk-animation-top-left {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.uk-animation-top-center {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.uk-animation-top-right {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.uk-animation-middle-left {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.uk-animation-middle-right {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.uk-animation-bottom-left {
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.uk-animation-bottom-center {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.uk-animation-bottom-right {
-webkit-transform-origin: 100% 100%;
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-animation-hover:not(:hover) [class*='uk-animation-'],
.uk-touch .uk-animation-hover:not(.uk-hover),
.uk-touch .uk-animation-hover:not(.uk-hover) [class*='uk-animation-'] {
-webkit-animation-name: none;
animation-name: none;
}
/* Keyframes: Fade
* Used by dropdown, datepicker and slideshow component
========================================================================== */
@-webkit-keyframes uk-fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes uk-fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Keyframes: Fade with slide
========================================================================== */
/*
* Top
*/
@-webkit-keyframes uk-fade-top {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes uk-fade-top {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/*
* Bottom
*/
@-webkit-keyframes uk-fade-bottom {
0% {
opacity: 0;
-webkit-transform: translateY(100%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes uk-fade-bottom {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/*
* Left
*/
@-webkit-keyframes uk-fade-left {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@keyframes uk-fade-left {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/*
* Right
*/
@-webkit-keyframes uk-fade-right {
0% {
opacity: 0;
-webkit-transform: translateX(100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@keyframes uk-fade-right {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* Keyframes: Fade with scale
========================================================================== */
/*
* Scale by 0.2
*/
@-webkit-keyframes uk-fade-scale-02 {
0% {
opacity: 0;
-webkit-transform: scale(0.2);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
}
}
@keyframes uk-fade-scale-02 {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/*
* Scale by 1.5
* Used by slideshow component
*/
@-webkit-keyframes uk-fade-scale-15 {
0% {
opacity: 0;
-webkit-transform: scale(1.5);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
}
}
@keyframes uk-fade-scale-15 {
0% {
opacity: 0;
transform: scale(1.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/*
* Scale by 1.8
*/
@-webkit-keyframes uk-fade-scale-18 {
0% {
opacity: 0;
-webkit-transform: scale(1.8);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
}
}
@keyframes uk-fade-scale-18 {
0% {
opacity: 0;
transform: scale(1.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* Keyframes: Slide
* Used by slideshow component
========================================================================== */
/*
* Left
*/
@-webkit-keyframes uk-slide-left {
0% {
-webkit-transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0);
}
}
@keyframes uk-slide-left {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
/*
* Right
*/
@-webkit-keyframes uk-slide-right {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(0);
}
}
@keyframes uk-slide-right {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
/*
* Left third
*/
@-webkit-keyframes uk-slide-left-33 {
0% {
-webkit-transform: translateX(33%);
}
100% {
-webkit-transform: translateX(0);
}
}
@keyframes uk-slide-left-33 {
0% {
transform: translateX(33%);
}
100% {
transform: translateX(0);
}
}
/*
* Right third
*/
@-webkit-keyframes uk-slide-right-33 {
0% {
-webkit-transform: translateX(-33%);
}
100% {
-webkit-transform: translateX(0);
}
}
@keyframes uk-slide-right-33 {
0% {
transform: translateX(-33%);
}
100% {
transform: translateX(0);
}
}
/* Keyframes: Scale
========================================================================== */
@-webkit-keyframes uk-scale-12 {
0% {
-webkit-transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
}
}
@keyframes uk-scale-12 {
0% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
/* Keyframes: Rotate
* Used by icon component
========================================================================== */
@-webkit-keyframes uk-rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
@keyframes uk-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
/* Keyframes: Shake
========================================================================== */
@-webkit-keyframes uk-shake {
0%,
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);
}
}
@keyframes uk-shake {
0%,
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);
}
}
/* Keyframes: Fade with slide fixed
* Used by dropdown and search component
========================================================================== */
/*
* Top fixed
*/
@-webkit-keyframes uk-slide-top-fixed {
0% {
opacity: 0;
-webkit-transform: translateY(-10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes uk-slide-top-fixed {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/*
* Bottom fixed
*/
@-webkit-keyframes uk-slide-bottom-fixed {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes uk-slide-bottom-fixed {
0% {
opacity: 0;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Grid and panel in dropdown
========================================================================== */
/*
* Vertical gutter
*/
/*
* Grid
* Higher specificity to override large gutter
*/
.uk-grid .uk-dropdown-grid + .uk-dropdown-grid {
margin-top: 25px;
}
/* ========================================================================
Component: Modal
========================================================================== */
/*
* This is the modal overlay and modal dialog container
* 1. Hide by default
* 2. Set fixed position
* 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 {
/* 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 */
background: rgba(0, 0, 0, 0.6);
/* 5 */
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);
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}
/*
* Open state
*/
.uk-modal.uk-open {
opacity: 1;
}
/*
* Prevents duplicated scrollbar caused by 4.
*/
.uk-modal-page,
.uk-modal-page body {
overflow: hidden;
}
/* Sub-object: `uk-modal-dialog`
========================================================================== */
/*
* 1. Create position context for caption, spinner and close button
* 2. Set box sizing
* 3. Set style
* 4. Slide-in transition
*/
.uk-modal-dialog {
/* 1 */
position: relative;
/* 2 */
box-sizing: border-box;
margin: 50px auto;
padding: 20px;
width: 600px;
max-width: 100%;
max-width: calc(100% - 20px);
/* 3 */
background: #ffffff;
/* 4 */
opacity: 0;
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
-webkit-transition: opacity 0.3s linear, -webkit-transform 0.3s ease-out;
transition: opacity 0.3s linear, transform 0.3s ease-out;
padding: 40px;
}
/* Phone landscape and smaller */
@media (max-width: 767px) {
/*
* Fit in small screen
*/
.uk-modal-dialog {
width: auto;
margin: 10px auto;
}
}
/*
* Open state
*/
.uk-open .uk-modal-dialog {
/* 4 */
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
/*
* Remove margin from the last-child
*/
.uk-modal-dialog > :not([class*='uk-modal-']):last-child {
margin-bottom: 0;
}
/* Close in modal
========================================================================== */
.uk-modal-dialog > .uk-close:first-child {
margin: -10px -10px 0 0;
float: right;
}
/*
* Remove margin from adjacent element
*/
.uk-modal-dialog > .uk-close:first-child + :not([class*='uk-modal-']) {
margin-top: 0;
}
/* Modifier: `uk-modal-dialog-lightbox`
========================================================================== */
.uk-modal-dialog-lightbox {
margin: 15px auto;
padding: 0;
max-width: 95%;
max-width: calc(100% - 30px);
}
/*
* Close button
*/
.uk-modal-dialog-lightbox > .uk-close:first-child {
position: absolute;
top:0px;
right: 0px;
margin: 0px;
float: none;
}
/* Phone landscape and smaller */
@media (max-width: 767px) {
.uk-modal-dialog-lightbox > .uk-close:first-child {
top: -7px;
right: -7px;
}
}
/* Modifier: `uk-modal-dialog-large`
========================================================================== */
/* Tablet and bigger */
@media (min-width: 768px) {
.uk-modal-dialog-large {
width: 930px;
}
}
/* Large screen and bigger */
@media (min-width: 1700px) {
.uk-modal-dialog-large {
width: 1130px;
}
}
/* 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;
}
.uk-modal-spinner:after {
content: "\f110";
font-family: FontAwesome;
-webkit-animation: uk-rotate 2s infinite linear;
animation: uk-rotate 2s infinite linear;
}
/* ========================================================================
Component: Off-canvas
========================================================================== */
/*
* This is the offcanvas overlay and bar container
* 1. Hide by default
* 2. Set fixed position
* 3. Deactivate browser touch actions in IE11
* 4. Mask the background page
*/
.uk-offcanvas {
/* 1 */
display: none;
/* 2 */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
/* 3 */
touch-action: none;
/* 4 */
background: rgba(0, 0, 0, 0.3);
}
.uk-offcanvas.uk-active {
display: block;
}
/* Sub-object `uk-offcanvas-page`
========================================================================== */
/*
* Prepares the whole HTML page to slide-out
* 1. Fix the main page and disallow scrolling
* 2. Side-out transition
*/
.uk-offcanvas-page {
/* 1 */
position: fixed;
/* 2 */
-webkit-transition: margin-left 0.3s ease-in-out;
transition: margin-left 0.3s ease-in-out;
}
/* Sub-object `uk-offcanvas-bar`
========================================================================== */
/*
* This is the offcanvas bar
* 1. Set fixed position
* 2. Size and style
* 3. Allow scrolling
* 4. Side-out transition
* 5. Deactivate scroll chaining in IE11
*/
.uk-offcanvas-bar {
/* 1 */
position: fixed;
top: 0;
bottom: 0;
left: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
z-index: 1001;
/* 2 */
width: 250px;
max-width: 100%;
background: #4b4b4b;
/* 3 */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* 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 {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
/* Modifier `uk-offcanvas-bar-flip`
========================================================================== */
.uk-offcanvas-bar-flip {
left: auto;
right: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
/* Panel in offcanvas
========================================================================== */
.uk-offcanvas .uk-panel {
margin: 20px;
color: #ffffff;
}
.uk-offcanvas .uk-panel-title,
.uk-offcanvas .uk-module-title {
color: #ffffff;
}
.uk-offcanvas .uk-panel a:not([class]) {
color: #ec3b00;
}
.uk-offcanvas .uk-panel a:not([class]):hover {
color: #bbbbbb;
}
@media (min-width: 960px) {
.uk-offcanvas-page {
margin-left: 0 !important;
}
}
.uk-offcanvas-bar:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
box-shadow: none;
}
.uk-offcanvas-bar-flip:after {
right: auto;
left: 0;
box-shadow: none;
}
.uk-nav-offcanvas ul.uk-nav-sub {
background: rgba(255, 255, 255, 0.03);
}
.uk-clearfix:before {
content: "";
display: table-cell;
}
.uk-clearfix:after {
content: "";
display: table;
clear: both;
}
/*
* Create a new block formatting context
*/
.uk-nbfc {
overflow: hidden;
}
.uk-nbfc-alt {
display: table-cell;
width: 10000px;
}
/* Alignment of block elements
========================================================================== */
/*
* Float blocks
* 1. Prevent content overflow on small devices
*/
.uk-float-left {
float: left;
}
.uk-float-right {
float: right;
}
/* 1 */
[class*='uk-float-'] {
max-width: 100%;
}
/* Alignment of images and objects
========================================================================== */
/*
* Alignment
*/
[class*='uk-align-'] {
display: block;
margin-bottom: 15px;
}
.uk-align-left {
margin-right: 15px;
float: left;
}
.uk-align-right {
margin-left: 15px;
float: right;
}
/* Tablet and bigger */
@media (min-width: 768px) {
.uk-align-medium-left {
margin-right: 15px;
margin-bottom: 15px;
float: left;
}
.uk-align-medium-right {
margin-left: 15px;
margin-bottom: 15px;
float: right;
}
}
.uk-align-center {
margin-left: auto;
margin-right: auto;
}
/* Vertical alignment
========================================================================== */
/*
* Remove whitespace between child elements when using `inline-block`
*/
.uk-vertical-align {
font-size: 0.001px;
}
/*
* The `uk-vertical-align` container needs a specific height
*/
.uk-vertical-align:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
/*
* Sub-object which can have any height
* 1. Reset whitespace hack
*/
.uk-vertical-align-middle,
.uk-vertical-align-bottom {
display: inline-block;
max-width: 100%;
/* 1 */
font-size: 1rem;
}
.uk-vertical-align-middle {
vertical-align: middle;
}
.uk-vertical-align-bottom {
vertical-align: bottom;
}
/* Height
========================================================================== */
/*
* More robust if padding and border are used
*/
[class*='uk-height'] {
box-sizing: border-box;
}
/*
* Useful to extend the `html` and `body` element to the full height of the page.
*/
.uk-height-1-1 {
height: 100%;
}
/*
* Useful to create image teasers
*/
.uk-height-viewport {
height: 100vh;
min-height: 600px;
}
/* Responsive objects
* Note: Images are already responsive by default, see Base component
========================================================================== */
/*
* 1. Corrects `max-width` and `max-height` behavior if padding and border are used
*/
.uk-responsive-width,
.uk-responsive-height {
box-sizing: border-box;
}
/*
* 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% !important;
height: auto;
}
/*
* Responsiveness: Sets a maximum height relative to the parent and auto scales the width
* Only works if the parent element has a fixed height.
*/
.uk-responsive-height {
max-height: 100%;
width: auto;
}
/* Margin
========================================================================== */
/*
* Create a block with the same margin of a paragraph
* Add margin if adjacent element
*/
.uk-margin {
margin-bottom: 15px;
}
* + .uk-margin {
margin-top: 15px;
}
.uk-margin-top {
margin-top: 15px !important;
}
.uk-margin-bottom {
margin-bottom: 15px !important;
}
.uk-margin-left {
margin-left: 15px !important;
}
.uk-margin-right {
margin-right: 15px !important;
}
/*
* Larger margins
*/
.uk-margin-large {
margin-bottom: 50px;
}
* + .uk-margin-large {
margin-top: 50px;
}
.uk-margin-large-top {
margin-top: 50px !important;
}
.uk-margin-large-bottom {
margin-bottom: 50px !important;
}
.uk-margin-large-left {
margin-left: 50px !important;
}
.uk-margin-large-right {
margin-right: 50px !important;
}
/*
* Smaller margins
*/
.uk-margin-small {
margin-bottom: 5px;
text-align:center;
}
* + .uk-margin-small {
margin-top: 5px;
text-align:center;
}
.uk-margin-small-top {
margin-top: 5px !important;
}
.uk-margin-small-bottom {
margin-bottom: 5px !important;
}
.uk-margin-small-left {
margin-left: 5px !important;
}
.uk-margin-small-right {
margin-right: 5px !important;
}
/*
* Remove margins
*/
.uk-margin-remove {
margin: 0 !important;
}
.uk-margin-top-remove {
margin-top: 0 !important;
}
.uk-margin-bottom-remove {
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
========================================================================== */
.uk-border-circle {
border-radius: 50%;
}
.uk-border-rounded {
border-radius: 5px;
}
/* Headings
========================================================================== */
.uk-heading-large {
font-size: 36px;
line-height: 42px;
}
/* Tablet and bigger */
@media (min-width: 768px) {
.uk-heading-large {
font-size: 52px;
line-height: 64px;
}
}
/* Link
========================================================================== */
/*
* Let links appear in default text color
*/
.uk-link-muted,
.uk-link-muted a {
color: #3c3c3c;
}
.uk-link-muted:hover,
.uk-link-muted a:hover {
color: #3c3c3c;
}
/*
* Reset link style
*/
.uk-link-reset,
.uk-link-reset a,
.uk-link-reset:hover,
.uk-link-reset a:hover,
.uk-link-reset:focus,
.uk-link-reset a:focus {
color: inherit;
text-decoration: none;
}
/* Scrollable
========================================================================== */
/*
* Enable scrolling for preformatted text
*/
.uk-scrollable-text {
height: 300px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
resize: both;
}
/*
* Box with scrolling enabled
*/
.uk-scrollable-box {
box-sizing: border-box;
height: 170px;
padding: 10px;
border: 1px solid rgba(0, 0, 0, 0.1);
overflow: auto;
-webkit-overflow-scrolling: touch;
resize: both;
}
.uk-scrollable-box > :last-child {
margin-bottom: 0;
}
/* Overflow
========================================================================== */
.uk-overflow-hidden {
overflow: hidden;
}
/*
* Enable scrollbars if content is clipped
*/
.uk-overflow-container {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.uk-overflow-container > :last-child {
margin-bottom: 0;
}
/* Position
========================================================================== */
.uk-position-absolute,
[class*='uk-position-top'],
[class*='uk-position-bottom'] {
position: absolute !important;
}
/* 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-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;
bottom: 0;
left: 0;
right: 0;
}
/*
* Relative
*/
.uk-position-relative {
position: relative !important;
}
/*
* Z-index
*/
.uk-position-z-index {
z-index: 1;
}
/* Display
========================================================================== */
/*
* Display
*/
.uk-display-block {
display: block !important;
}
.uk-display-inline {
display: inline !important;
}
.uk-display-inline-block {
display: inline-block !important;
}
.uk-slidenav {
/* 1 */
display: inline-block;
/* 2 */
box-sizing: border-box;
width: 50px;
height: 50px;
/* 3 */
line-height: 50px;
color: rgba(60, 60, 60, 0.3);
font-size: 50px;
text-align: center;
-webkit-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
/*
* Hover
* 1. Apply hover style also to focus state
* 2. Remove default focus style
* 3. Required for `a` elements
* 4. Style
*/
.uk-slidenav:hover,
.uk-slidenav:focus {
/* 2 */
outline: none;
/* 3 */
text-decoration: none;
/* 4 */
color: rgba(60, 60, 60, 0.5);
cursor: pointer;
}
/* Active */
.uk-slidenav:active {
color: #3c3c3c;
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
/*
* Icons
*/
.uk-slidenav-previous:before {
content: "\f104";
font-family: FontAwesome;
}
.uk-slidenav-next:before {
content: "\f105";
font-family: FontAwesome;
}
/* Sub-object: `uk-slidenav-position`
========================================================================== */
/*
* Create position context
*/
.uk-slidenav-position {
position: relative;
}
/*
* Center vertically
*/
.uk-slidenav-position .uk-slidenav {
display: none;
position: absolute;
top: 50%;
z-index: 1;
margin-top: -25px;
}
.uk-slidenav-position:hover .uk-slidenav {
display: block;
}
.uk-slidenav-position .uk-slidenav-previous {
left: 40px;
}
.uk-slidenav-position .uk-slidenav-next {
right: 40px;
}
/* Modifier: `uk-slidenav-contrast`
========================================================================== */
.uk-slidenav-contrast {
color: #ffffff;
}
/*
* Hover
* 1. Apply hover style also to focus state
*/
.uk-slidenav-contrast:hover,
.uk-slidenav-contrast:focus {
color: rgba(60, 60, 60, 0.7);
}
/* Active */
.uk-slidenav-contrast:active {
color: rgba(60, 60, 60, 0.9);
}