.uk-dotnav {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  
  margin-left: -15px;
  margin-top: -15px;
  
  padding: 0;
  list-style: none;
}

.uk-dotnav > * {
  
  -ms-flex: none;
  -webkit-flex: none;
  flex: none;
  
  padding-left: 15px;
  margin-top: 15px;
}

.uk-dotnav:before,
.uk-dotnav:after {
  content: "";
  display: block;
  overflow: hidden;
}
.uk-dotnav:after {
  clear: both;
}
.uk-dotnav > * {
  float: left;
}


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

.uk-dotnav > * > :hover,
.uk-dotnav > * > :focus {
  background: rgba(50, 50, 50, 0.4);
  
  outline: none;
}

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

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

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

.uk-dotnav-contrast > * > :hover,
.uk-dotnav-contrast > * > :focus {
  background: rgba(255, 255, 255, 0.7);
}

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

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


.uk-dotnav-vertical {
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.uk-dotnav-vertical > * {
  float: none;
}