//** Background Images **/
.img-background {
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.img-background-100 {
  background-size: 100%;
  background-position: top left;
  background-repeat: no-repeat;
}
.dark-bg {
  color: $white;
  background-color: $black;
  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, small, .small, .legend, output, label, .btn-standard-dark
  {
    color: $white;
  }
  .has-error p,
  .has-error p span {
    color: $brand-danger;

    a {
      color: $brand-danger;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .icon {
    fill: $white;
    color: $white !important;
  }
  .text-muted {
    color: #ccc; //temp until I see it to refine
  }
  .icon-bar {
    background-color: $white;
  }
  a {
    color: $gray-lighter;
    text-decoration: none;
    &:hover,
    &:focus {
      color: $gray-light;
      text-decoration: $link-hover-decoration;
    }
  }
  .btn-standard {
    @include button-variant(black, $gray-lighter, $gray-lighter);
  }
  .panel, .billboard {
    background-color: transparent;
  }
}

/** Font weights **/

.weight-light {
    font-weight: 300;
}

.weight-normal {
    font-weight: 400;
}

.weight-semibold {
    font-weight: 600;
}

.bold {
    font-weight: bold;
}

a.underline,
.underline {
    text-decoration: underline;
}

/** Font styles **/
.black {
  color: $black;
}

.white {
  color: $white;
}

.text-lowercase {
    text-transform: lowercase;
}

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

/** Text overflow **/
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.btn-multi-line {
  white-space:normal;
}

/** Spacing **/

.full-width {
    width: 100%;
}

.overflow-hidden {
  overflow: hidden;
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/** Add/remove margins **/

.push {
    margin: $line-height-computed;
}

.push-top {
    margin-top: $line-height-computed;
}

.push-right {
    margin-right: $line-height-computed;
}

.push-bottom {
    margin-bottom: $line-height-computed;
}

.push-left {
    margin-left: $line-height-computed;
}

.push-ends {
    margin-top: $line-height-computed;
    margin-bottom: $line-height-computed;
}

.push-sides {
    margin-right: $line-height-computed;
    margin-left: $line-height-computed;
}

.push-half {
    margin: $line-height-computed / 2;
}

.push-half-top {
    margin-top: $line-height-computed / 2;
}

.push-half-right {
    margin-right: $line-height-computed / 2;
}

.push-half-bottom {
    margin-bottom: $line-height-computed / 2;
}

.push-half-left {
    margin-left: $line-height-computed / 2;
}

.push-half-ends {
    margin-top: $line-height-computed / 2;
    margin-bottom: $line-height-computed / 2;
}

.push-half-sides {
    margin-right: $line-height-computed / 2;
    margin-left: $line-height-computed / 2;
}

.flush {
    margin: 0;
}

.flush-top {
    margin-top: 0;
}

.flush-right {
    margin-right: 0;
}

.flush-bottom {
    margin-bottom: 0;
}

.flush-left {
    margin-left: 0;
}

.flush-ends {
    margin-top: 0;
    margin-bottom: 0;
}

.flush-sides {
    margin-right: 0;
    margin-left: 0;
}
/** Add/remove paddings **/

.soft {
    padding: $line-height-computed;
}

.soft-top {
    padding-top: $line-height-computed;
}

.soft-right {
    padding-right: $line-height-computed;
}

.soft-right-grid {
    padding-right: $grid-gutter-width/4;
}

.soft-bottom {
    padding-bottom: $line-height-computed;
}

.soft-left {
    padding-left: $line-height-computed;
}

.soft-left-grid {
    padding-left: $grid-gutter-width/4;
}

.soft-ends {
    padding-top: $line-height-computed;
    padding-bottom: $line-height-computed;
}

.soft-sides {
    padding-right: $line-height-computed;
    padding-left: $line-height-computed;
}

.soft-half {
    padding: $line-height-computed / 2;
}

.soft-half-top {
    padding-top: $line-height-computed / 2;
}

.soft-half-right {
    padding-right: $line-height-computed / 2;
}

.soft-half-bottom {
    padding-bottom: $line-height-computed / 2;
}

.soft-half-left {
    padding-left: $line-height-computed / 2;
}

.soft-half-ends {
    padding-top: $line-height-computed / 2;
    padding-bottom: $line-height-computed / 2;
}

.soft-half-sides {
    padding-right: $line-height-computed / 2;
    padding-left: $line-height-computed / 2;
}

.hard {
    padding: 0;
}

.hard-top {
    padding-top: 0;
}

.hard-right {
    padding-right: 0;
}

.hard-bottom {
    padding-bottom: 0;
}

.hard-left {
    padding-left: 0;
}

.hard-ends {
    padding-top: 0;
    padding-bottom: 0;
}

.hard-sides {
    padding-right: 0;
    padding-left: 0;
}
/** Mobile Push to account for stacking **/

@media only screen and (max-width: $screen-sm-min) {
    .mobile-push {
        margin: $line-height-computed;
    }
    .mobile-push-top {
        margin-top: $line-height-computed;
    }
    .mobile-push-right {
        margin-right: $line-height-computed;
    }
    .mobile-push-bottom {
        margin-bottom: $line-height-computed;
    }
    .mobile-push-left {
        margin-left: $line-height-computed;
    }
    .mobile-push-ends {
        margin-top: $line-height-computed;
        margin-bottom: $line-height-computed;
    }
    .mobile-push-sides {
        margin-right: $line-height-computed;
        margin-left: $line-height-computed;
    }
    .mobile-push-half {
        margin: $line-height-computed / 2;
    }

    .mobile-push-half-top {
        margin-top: $line-height-computed / 2;
    }

    .mobile-push-half-right {
        margin-right: $line-height-computed / 2;
    }

    .mobile-push-half-bottom {
        margin-bottom: $line-height-computed / 2;
    }

    .mobile-push-half-left {
        margin-left: $line-height-computed / 2;
    }

    .mobile-push-half-ends {
        margin-top: $line-height-computed / 2;
        margin-bottom: $line-height-computed / 2;
    }

    .mobile-push-half-sides {
        margin-right: $line-height-computed / 2;
        margin-left: $line-height-computed / 2;
    }
    .mobile-flush {
        margin: 0;
    }
    .mobile-flush-top {
        margin-top: 0;
    }
    .mobile-flush-right {
        margin-right: 0;
    }
    .mobile-flush-bottom {
        margin-bottom: 0;
    }
    .mobile-flush-left {
        margin-left: 0;
    }
    .mobile-flush-ends {
        margin-top: 0;
        margin-bottom: 0;
    }
    .mobile-flush-sides {
        margin-right: 0;
        margin-left: 0;
    }
    .mobile-hard {
        padding: 0;
    }
    .mobile-hard-top {
        padding-top: 0;
    }
    .mobile-hard-right {
        padding-right: 0;
    }
    .mobile-hard-bottom {
        padding-bottom: 0;
    }
    .mobile-hard-left {
        padding-left: 0;
    }
    .mobile-hard-ends {
        padding-top: 0;
        padding-bottom: 0;
    }
    .mobile-hard-sides {
        padding-right: 0;
        padding-left: 0;
    }
    .mobile-soft {
        padding: $line-height-computed;
    }

    .mobile-soft-top {
        padding-top: $line-height-computed;
    }

    .mobile-soft-right {
        padding-right: $line-height-computed;
    }

    .mobile-soft-bottom {
        padding-bottom: $line-height-computed;
    }

    .mobile-soft-left {
        padding-left: $line-height-computed;
    }

    .mobile-soft-ends {
        padding-top: $line-height-computed;
        padding-bottom: $line-height-computed;
    }

    .mobile-soft-sides {
        padding-right: $line-height-computed;
        padding-left: $line-height-computed;
    }
    .mobile-soft-half-sides {
        padding-right: $line-height-computed / 2;
        padding-left: $line-height-computed / 2;
    }
}

// Misc helpers
.block {
    display: block;
}

.inline {
    display: inline;
}

.static {
    position: static;
}

.center {
    float: none;
    display: inline-block;
    vertical-align: middle;
}
.vertical-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.vertical-bottom {
  position: absolute;
  left: 50%;
  bottom: 0%;
  transform: translate(-50%, 0%);
  width: 100%;
}
.vertical-10 {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translate(-50%, -10%);
  width: 100%;
}
.vertical-20 {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -20%);
  width: 100%;
}
.vertical-70 {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -70%);
  width: 100%;
}
.vertical-80 {
  position: absolute;
  left: 50%;
  top: 80%;
  transform: translate(-50%, -80%);
  width: 100%;
}

.smaller {
    font-size: 70%;
}

.pointer {
    cursor: pointer;
}

.tight-line-height {
  line-height: 1.5;
}

.sub {
  vertical-align: sub;
}

.or-divider {
    margin-top: -41px;
    span {
        background: #fff; padding: 5px;
        vertical-align: middle;
    }
}

.relative {
  position: relative;
}

.no-borders {
  border: 0px !important;
}

.pull-right {
  &.btn {
    margin-left: 5px;
  }
}

.hide {
  display: none;
}
.show {
  display: block;;
}
.square-corners {
  border-radius: 0;
}

@media (min-width: $screen-lg-min) {
  .lg-pull-right {
    float: right;
    &.btn {
        margin-left: 5px;
    }
  }
  .lg-pull-left {
    float: left;
  }
}

@media (min-width: $screen-md-min) {
  .md-pull-right {
    float: right;
    &.btn {
        margin-left: 5px;
    }
  }
  .md-pull-left {
    float: left;
  }
}

@media (min-width: $screen-sm-min) {
  .sm-pull-right {
    float: right;
    &.btn {
        margin-left: 5px;
    }
  }
  .sm-pull-left {
    float: left;
  }
}

// Empty href attributes for UI Bootstrap
.nav,
.pagination,
.carousel,
.panel-title a {
    cursor: pointer;
}

.img-full-width {
  width: 100%;
  height: auto;
}

.img-full-size {
  width: 100%;
  height: 100%;
}

.absolute-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

// Style normal text link a link
.link-styling {
  color: $link-color;
  cursor: pointer;
  &:hover {
    color: $link-hover-color;
  }
}

// Auto width columns
@media (min-width: $screen-xs-min) {
    .col-xs-auto {
        width: auto;
    }
}

@media (min-width: $screen-sm-min) {
    .col-sm-auto {
        width: auto;
    }
}

@media (min-width: $screen-md-min) {
    .col-md-auto {
        width: auto;
    }
}

@media (min-width: $screen-lg-min) {
    .col-lg-auto {
        width: auto;
    }
}

// Vertical Align
// Note: if the element is blurry, try putting transform-style: preserve-3d; on the parent
// Reference: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
@mixin vertical-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}


// Maintain Aspect Ratio

@mixin aspect-ratio($width, $height) {
    position: relative;

    &:before{
        display: block;
        content: " ";
        width: 100%;
        padding-top: ($height / $width) * 100%;
    }

    > .aspect-content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

.sixteen-nine {
  @include aspect-ratio(16,9);
}