/*===============================================
              HEADER TEXT SIZES
================================================*/

.title-xxs,
.title-xs,
.title-sm,
.title-md,
.title-lg,
.title-xlg {
    line-height: 1.3em;
}

.title-xxs {
    font-size: 1.6rem
}

.title-xs {
    font-size: 1.9rem
}

.title-sm {
    font-size: 2.2rem
}

.title-md {
    font-size: 2.5rem
}

.title-lg {
    font-size: 2.8rem
}

.title-xlg {
    font-size: 3rem;
}


/*===============================================
              PARAGRAPH TEXT SIZES
================================================*/

.text-xxs,
.text-xs,
.text-sm,
.text-md,
.text-lg,
.text-xlg {
    line-height: 1.65em;
}

.text-xxs {
    font-size: .75rem
}

.text-xs {
    font-size: .8rem
}

.text-sm {
    font-size: .9rem
}

.text-md {
    font-size: 1rem
}

.text-lg {
    font-size: 1.15rem
}

.text-xlg {
    font-size: 1.2rem;
}


/*===============================================
                TEXT WEIGHTS
================================================*/

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

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

.font-w500 {
    font-weight: 500;
}

.font-w600,
.semi-bold {
    font-weight: 600;
}

.font-w700, 
.bold {
    font-weight: 700;
}

.font-w800 {
    font-weight: 800;
}

.font-w900, 
.black {
    font-weight: 900;
}

/*===============================================
                TEXT COLORS
================================================*/

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

.text-light {
  color: #fff;
}
.text-light.simple-hover:hover, .text-light.simple-hover:active, .text-light.simple-hover:focus {
  color: #10b5b0;
}

.text-dark {
  color: #4b4b4b;
}
.text-dark.simple-hover:hover, .text-dark.simple-hover:active, .text-dark.simple-hover:focus {
  color: #009590;
}


/*===============================================
              BUTTON STYLES
================================================*/

a[class*="btn-"],
button[class*="btn-"] {
    padding: 14px 26px;
    display: inline-block;
    border: none;
    outline: none;
    border-radius: 3px;
}

.btn-bg-light {
    background: #fff;
}

.btn-bg-light:hover,
.btn-bg-light:focus,
.btn-bg-light:active {
    color: #4b4b4b;
}

.btn-bg-dark {
    background: #4b4b4b;
}

.btn-bg-dark:hover,
.btn-bg-dark:focus,
.btn-bg-dark:active {
    color: #fff;
}


.btn-bg-blue {
    background: #2da2ec;
}

.btn-bg-blue:hover,
.btn-bg-blue:focus,
.btn-bg-blue:active {
    color: #fff;
}

.btn-bg-yellow {
    background: #ffd900;
}

.btn-bg-yellow:hover,
.btn-bg-yellow:focus,
.btn-bg-yellow:active {
    color: #222;
    background: #ffec82;
}

.btn-bg-green {
    background: #24c2b5;
}

.btn-bg-green:hover,
.btn-bg-green:focus,
.btn-bg-green:active {
    color: #fff;
}

.btn-bg-red {
    background: #fa5f6a;
}

.btn-bg-red:hover,
.btn-bg-red:focus,
.btn-bg-red:active {
    background: #eb515c;
}

.btn-bg-red:hover {
    color: #fff;
}

.btn-color-light {
    color: #fff;
}

.btn-color-dark {
    color: #4b4b4b;
}

.btn-color-blue {
    color: #2da2ec;
}

.btn-color-yellow {
    color: #ffd900;
}

.btn-color-green {
    color: #24c2b5;
}

.btn-color-red {
    color: #fa5f6a;
}

.btn-text-xxs {
    color: #fff;
}

.btn-text-xs {
    font-size: 11px;
}

.btn-text-sm {
    font-size: 12px;
}

.btn-text-md {
    font-size: 14px;
}

.btn-text-lg {
    font-size: 15px;
}

.btn-text-xlg {
    font-size: 16px;
}


/*===============================================
                TEXT ALIGNMENT
================================================*/

.valign-center,
.valign-top,
.valign-bottom,
.halign-left, 
.halign-right {
    position: absolute;
}

.valign-center {
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.valign-top {
  top: 10%;
}

.valign-bottom {
  bottom: 10%;
}

.halign-left {
  left: 5%;
  right: auto;
  text-align: left;
}

@media only screen and (min-width: 1024px) {
  .halign-left {
    left: 10%;
  }
}

.halign-right {
  right: 5%;
  left: auto;
  text-align: left;
}

@media only screen and (min-width: 1024px) {
  .halign-right {
    right: 10%;
  }
}