body {
  font-family: $font-sans;
  font-weight: 400;
  margin: 0;
  color: $black;
  overflow-x: hidden;
}


ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

a,
input,
button {
  text-decoration: none;
  outline: none;
  &:active,
  &:visited,
  &:hover,
  &:focus{
    outline: none;
    text-decoration: none;
  }
}

.font-serif {
  font-family: $font-serif;
}

.font-sans {
  font-family: $font-sans;
}

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

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

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

@each $bp in $grid-breakpoints {
  $key: nth($bp, 1);
  $value: nth($bp, 2);

  @media (min-width: $value) {
    .text-#{$key}-center{
      text-align: center;
    }
    .text-#{$key}-left {
      text-align: left;
    }
    .text-#{$key}-right {
      text-align: right;
    }
  }
}

.text-white {
  color: $white;
}

.text-black {
  color: $black;
}

.text-gray {
  color: $gray;
}

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

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

.middle {
  @include middle();
}

.full-middle {
  @include full-middle();
}

// Font size
@each $size in 10, 12, 13, 14, 15, 16, 18, 20, 22, 24, 25, 26, 28, 30, 32, 34, 36, 38, 40, 42, 46, 48, 50, 52, 54, 60, 72 {
  .font-#{$size} {font-size: #{$size/16}rem !important;}
}

.main-content {

  min-height: calc(100vh - #{$header-height} - #{$footer-height} - 50px);
  padding: $header-height 40px 0 40px;

  &.container-fluid {
    &.full-width {
      padding-left: 0;
      padding-right: 0;
      overflow-x: hidden;
    }
  }

  section {
    margin: 50px auto;
    &.container-full {
      padding: 0;
      max-width: initial;
    }
  }
}


.debug-border {
  border: 1px solid red;
}