.relative-pos {
  position: relative;
}

@for $i from 10 through 100 {
  .h-#{$i}p {
    height: $i * 1%;
  }

  .w-#{$i}p {
    width: $i * 1%;
  }

  $i: $i + 10;
}

.text-left {
  text-align: left;
}

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

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

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

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

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

.hidden {
  display: none;
}

@media only screen and (max-width: map-get($base-breakpoints, 'md')) {
  .hidden-sm {
    display: none;
  }
}

@media only screen and (min-width: map-get($base-breakpoints, 'md')) and (max-width: map-get($base-breakpoints, 'lg')) {
  .hidden-md {
    display: none;
  }
}

@media only screen and (min-width: map-get($base-breakpoints, 'lg')) {
  .hidden-lg {
    display: none;
  }
}

.cursor-pointer {
  cursor: pointer;
}

.word-break-all {
  word-break: break-all;
}

.word-break-word {
  word-break: break-word;
}

.white-space-nowrap {
  white-space: nowrap !important;
}