.u-border-bottom {
    border-bottom: 1px solid #bbb;
}

.u-uppercase {
    text-transform: uppercase;
}

.u-center {
    margin: 0 auto !important;
}

.u-space-around {
    justify-content: space-around;
}

.u-space-between {
    justify-content: space-between;
}
.u-relative {
    position: relative;
}

.u-flex {
    display: flex;
}

.u-flex-grow {
    flex-grow: 1.0;
}

.u-hbox {
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
}

.u-vbox {
    display: flex;
    flex-direction: column;
}

.u-half-width {
    width: 45%;
    margin-right: 2em;
}
.u-items-end {
    align-items: flex-end;
}

.u-justify-end {
    justify-content: flex-end;
}
.u-items-center {
    align-items: center;
}
.u-items-stretch {
    align-items: stretch;
}

.u-items-start {
    align-items: flex-start;
}
.u-justify-center {
    justify-content: center;
}
.u-justify-space-between {
    justify-content: space-between;
}

.u-hskip-half { width: 0.5rem; height:0; }
.u-hskip   { width: 1rem; height:0; }
.u-hskip-2 { width: 2rem; height:0; }
.u-hskip-3 { width: 3rem; height:0; }
.u-vskip-half { height: 0.5rem; width:0; }
.u-vskip   { height: 1rem; width:0; }
.u-vskip-2 { height: 2rem; width:0; }
.u-vskip-3 { height: 3rem; width:0; }

.u-button {
    color: #fff;
    padding: 0.333em 1em;
    outline: none;
    border-radius: 4px;
    min-width: 128px;
    text-align: center;
    background: #272822;
}
.u-button:hover {
    background: #555;
    color: #fff;
}

.u-input {
    border: none;
    color: #444;
    padding: 0.333em 1em;
    border-radius: 4px;
    min-width: 128px;
    outline:none;
}

.u-regular {
    font-weight: 400;
}

.u-extra-light {
    font-weight: 200;
}
.u-thin {
    font-weight: 300;
}

.u-text-center {
    text-align: center;
}

.u-text-right {
    text-align: right;
}

.u-display-none {
    display: none;
}

.u-bold {
    font-weight: bold;
}
.u-italic {
    font-style: italic;
}

.u-gray-3 {
    color: #333;
}

.u-bordered {
    border: 1px solid #888;
}

.u-flip {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.u-hline {
    height:0;
    border-bottom: 1px solid #fff;
    width: 100%;
}

.u-vline {
    width:0;
    border-right: 1px solid #fff;
    align-self: stretch;
}
.u-self-stretch {
    align-self: stretch;
}

.u-self-end {
    align-self: flex-end;
}

.u-fit-background {
    background-size: cover;
    -moz-background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.u-relative {
    position: relative;
}

.u-bottom {
    position: absolute;
    bottom: 0;
}
.u-zero-margins {
    margin: 0 !important;
}