/*! UIkit 2.27.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
/* ========================================================================
   Component: Dotnav
 ========================================================================== */
/*
 * 1. Gutter
 * 2. Remove default list style
 */
.uk-dotnav {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    /* 1 */
    margin-left: -15px;
    margin-top: -15px;
    /* 2 */
    padding: 0;
    list-style: none;
}

/*
 * 1. Space is allocated solely based on content dimensions
 * 2. Horizontal gutter is using `padding` so `uk-width-*` classes can be applied
 */
.uk-dotnav > * {
    /* 1 */
    -ms-flex: none;
    -webkit-flex: none;
    flex: none;
    /* 2 */
    padding-left: 15px;
    margin-top: 15px;
}

/*
 * DEPRECATED IE9 Support
 */
.uk-dotnav:before,
.uk-dotnav:after {
    content: "";
    display: block;
    overflow: hidden;
}

.uk-dotnav:after {
    clear: both;
}

.uk-dotnav > * {
    float: left;
}

/* Items
 ========================================================================== */
/*
 * Items
 * 1. Hide text if present
 */
.uk-dotnav > * > * {
    display: block;
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(50, 50, 50, 0.1);
    /* 1 */
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
}

/*
 * Hover
 * 1. Apply hover style also to focus state
 * 2. Remove default focus style
 */
.uk-dotnav > * > :hover,
.uk-dotnav > * > :focus {
    background: rgba(50, 50, 50, 0.4);
    /* 2 */
    outline: none;
}

/* OnClick */
.uk-dotnav > * > :active {
    background: rgba(50, 50, 50, 0.6);
}

/* Active */
.uk-dotnav > .uk-active > * {
    background: rgba(50, 50, 50, 0.4);
}

/* Modifier: `uk-dotnav-contrast`
 ========================================================================== */
.uk-dotnav-contrast > * > * {
    background: rgba(255, 255, 255, 0.4);
}

/*
 * Hover
 * 1. Apply hover style also to focus state
 */
.uk-dotnav-contrast > * > :hover,
.uk-dotnav-contrast > * > :focus {
    background: rgba(255, 255, 255, 0.7);
}

/* OnClick */
.uk-dotnav-contrast > * > :active {
    background: rgba(255, 255, 255, 0.9);
}

/* Active */
.uk-dotnav-contrast > .uk-active > * {
    background: rgba(255, 255, 255, 0.9);
}

/* Modifier: 'uk-dotnav-vertical'
 ========================================================================== */
/*
 * DEPRECATED
 */
.uk-dotnav-vertical {
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/*
 * DEPRECATED IE9 Support
 */
.uk-dotnav-vertical > * {
    float: none;
}