@use "sass:color";
/*#############################################################################
# BASE
#############################################################################*/


html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html,
body {
  min-height: 100%;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

body {
  background-color: #fff;
  color: $color-text;
}

// =======================
// TYPOGRAPHY
// Headings

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 900;
  margin: 0.5em 0;
  line-height: 1.4em;
}

h1 {
  font-size: rem-calc(30px);

  @include responsive($breakpoint-medium) {
    font-size: rem-calc(38px);
  }
}

h2 {
  font-size: rem-calc(26px);

  @include responsive($breakpoint-medium) {
    font-size: rem-calc(32px);
  }
}

h3 {
  font-size: rem-calc(22px);

  @include responsive($breakpoint-medium) {
    font-size: rem-calc(28px);
  }
}

h4 {
  font-size: rem-calc(18px);

  @include responsive($breakpoint-medium) {
    font-size: rem-calc(22px);
  }
}

h5 {
  font-size: rem-calc(16px);
  // text-transform: uppercase;

  @include responsive($breakpoint-medium) {
    font-size: rem-calc(16px);
  }
}

h6 {
  font-size: rem-calc(16px);

  @include responsive($breakpoint-medium) {
    font-size: rem-calc(16px);
  }
}

// Paragraphs
p {
  margin: 0 0 20px;
}

p, span {
  &.small {
    font-size: rem-calc(14px);
  }

  &.opacity {
    opacity: 0.5;
  }

  &.alert {
    color: $color-alert;
  }

  &.success {
    color: $color-success;
  }

  &.secondary {
    color: $color-secondary;
  }

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

//  Links

a {
  color: $color-primary;
  text-decoration: none;

  @include transition(
    color 0.3s cubic-bezier(.7, 0, .175, 1) 0s,
    background-color 0.3s cubic-bezier(.7, 0, .175, 1) 0s
  );


  &:hover {
    color: color.adjust($color-primary,$lightness: -7%);
  }

  &.secondary {
    color: $color-secondary;

    &:hover {
      color: $color-secondary-dark;
      text-decoration: underline;
    }
  }

  &.alert {
    color: $color-alert;

    &:hover {
      color: $color-alert-dark;
      text-decoration: underline;
    }
  }

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

// Text Modifiers

.text-secondary {
  color: $color-secondary;
}

.text-success {
  color: $color-success;
}

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

.text-underline {
  text-decoration: underline
}

// Horizontal Rule

hr {
  border: none;
  border-bottom: 1px solid $color-secondary-light;
  margin: 30px 0;

  &.translucent {
    opacity: 0.5;
  }

  &.big-push {
    margin: 60px 0;
  }
}

// text sizes

.text-base-size {
  font-size: $rem-base!important;
}

.text-xs {
  font-size: rem-calc($font-size-mini) !important;
}

.text-sm {
  font-size: rem-calc($font-size-small) !important;
}

.text-md {
  font-size: rem-calc($font-size-md) !important;
}

.text-md-large {
  font-size: $font-size-md-large!important;
}

.text-lg {
  font-size: rem-calc($font-size-large) !important;
}

.text-elg {
  font-size: rem-calc($font-size-extra-large) !important;
  line-height: 34px;
}

.text-thin {
  font-weight: $font-weight-thin !important;
}

.text-light {
  font-weight: $font-weight-normal !important;
}

.text-w-normal {
  font-weight: $font-weight-normal!important;
}

.text-w-600 {
  font-weight: 600!important;
}

.text-bold {
  font-weight: $font-weight-bold!important;
}

// Magin Modifiers
.pb-0 {
  padding-bottom: 0 !important;
}

.pb-20 {
  padding-bottom: 20px !important;
}

.pt-20 {
  padding-top: 20px !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-3r {
  margin-top: 3rem !important;
}

.mt-80 {
  margin-top: 80px !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

// =======================