/*******************************************
    Grid breakpoints:
    xs  < 576px
    sm  >= 576
    md  >= 768
    lg  >= 992
    xl  > 1200
********************************************/

/****************************
    Typography
*****************************/
.h1-sm,
.h1-md,
.h1-lg,
.h1-xl,
.h2-sm,
.h2-md,
.h2-lg,
.h2-xl,
.h3-sm,
.h3-md,
.h3-lg,
.h3-xl,
.h4-sm,
.h4-md,
.h4-lg,
.h4-xl,
.h5-sm,
.h5-md,
.h5-lg,
.h5-xl {
  font-size: initial;
}
h1, .h1 { font-size: 1.5rem; }
h2, .h2 { font-size: 1.4rem; }
h3, .h3 { font-size: 1.3rem; }
h4, .h4 { font-size: 1.2rem; }
h5, .h5 { font-size: 1.1rem; }
@media (min-width: 576px) {
  .h1-sm {
    font-size: 1.5rem;
  }
  .h2-sm {
    font-size: 1.5rem;
  }
  .h3-sm {
    font-size: 1.4rem;
  }
  .h4-sm {
    font-size: 1.2rem;
  }
  .h5-sm {
    font-size: 1.1rem;
  }
}
@media (min-width: 768px) {
  .h1-md {
    font-size: 1.5rem;
  }
  .h2-md {
    font-size: 1.5rem;
  }
  .h3-md {
    font-size: 1.4rem;
  }
  .h4-md {
    font-size: 1.2rem;
  }
  .h5-md {
    font-size: 1.1rem;
  }
}
@media (min-width: 992px) {
  .h1-lg {
    font-size: 1.5rem;
  }
  .h2-lg {
    font-size: 1.5rem;
  }
  .h3-lg {
    font-size: 1.4rem;
  }
  .h4-lg {
    font-size: 1.2rem;
  }
  .h5-lg {
    font-size: 1.1rem;
  }
}
@media (min-width: 1200px) {
  .h1-xl {
    font-size: 1.5rem;
  }
  .h2-xl {
    font-size: 1.5rem;
  }
  .h3-xl {
    font-size: 1.4rem;
  }
  .h4-xl {
    font-size: 1.2rem;
  }
  .h5-xl {
    font-size: 1.1rem;
  }
}

/****************************
    Borders
*****************************/
.border-dashed {
  border: dashed 2px #dee2e6;
}
@media (min-width: 576px) {
    .border-sm-0 {
      border: 0 !important;
    }
    .border-top-sm-0 {
      border-top: 0 !important;
    }
    .border-right-sm-0 {
      border-right: 0 !important;
    }
    .border-bottom-sm-0 {
      border-bottom: 0 !important;
    }
    .border-left-sm-0 {
      border-left: 0 !important;
    }
}
@media (min-width: 768px) {
    .border-md-0 {
      border: 0 !important;
    }
    .border-top-md-0 {
      border-top: 0 !important;
    }
    .border-right-md-0 {
      border-right: 0 !important;
    }
    .border-bottom-md-0 {
      border-bottom: 0 !important;
    }
    .border-left-md-0 {
      border-left: 0 !important;
    }
}
@media (min-width: 992px) {
    .border-lg-0 {
      border: 0 !important;
    }
    .border-top-lg-0 {
      border-top: 0 !important;
    }
    .border-right-lg-0 {
      border-right: 0 !important;
    }
    .border-bottom-lg-0 {
      border-bottom: 0 !important;
    }
    .border-left-lg-0 {
      border-left: 0 !important;
    }
}
@media (min-width: 1200px) {
    .border-xl-0 {
      border: 0 !important;
    }
    .border-top-xl-0 {
      border-top: 0 !important;
    }
    .border-right-xl-0 {
      border-right: 0 !important;
    }
    .border-bottom-xl-0 {
      border-bottom: 0 !important;
    }
    .border-left-xl-0 {
      border-left: 0 !important;
    }
}

/****************************
    Flexbox
*****************************/

/* Media Queries */
@media (min-width: 576px) {
  .flex-sm-0 {
    flex: 0 0 0;
  }
}
@media (min-width: 768px) {
  .flex-md-0 {
    flex: 0 0 0;
  }
}
@media (min-width: 992px) {
  .flex-lg-0 {
    flex: 0 0 0;
  }
}
@media (min-width: 1200px) {
  .flex-xl-0 {
    flex: 0 0 0;
  }
}

/****************************
    Screen Reader Only
*****************************/
@media (min-width: 576px) {
  .sm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .sm-sr-only-focusable:active,
  .sm-sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}
@media (min-width: 768px) {
  .md-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .md-sr-only-focusable:active,
  .md-sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}
@media (min-width: 992px) {
  .lg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .lg-sr-only-focusable:active,
  .lg-sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}
@media (min-width: 1200px) {
  .xl-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .xl-sr-only-focusable:active,
  .xl-sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

/****************************
    Layout
*****************************/
/* height */
.minh-250 { min-height: 250px; }
.h-250 {
  height: 250px;
  overflow-y: scroll;
}
.maxh-250 {
  max-height: 250px;
  overflow-y: scroll;
}
@media (max-width: 767px) {
  .max-mobile-height {
    max-height: 250px;
    overflow-y: scroll;
  }
  .mobile-height {
    height: 250px;
    overflow-y: scroll;
  }
}

/* width */
.minw-0 { min-width: 0; } /* this fixes a weird flexbox overflow bug */
.minw-25 { min-width: 25%; }
.minw-50 { min-width: 50%; }
.minw-75 { min-width: 75%; }
.maxw-25 { max-width: 25%; }
.maxw-50 { max-width: 50%; }
.maxw-75 { max-width: 75%; }
.maxw-100 { max-width: 100%; }
.absolute-w100 {
  left: 0;
  right: 0;
  padding: inherit;
}

/* z-index */
.high-z { z-index: 50; }

/* Media Queries */
@media (max-width: 575px) {
  .position-xs-fixed { position: fixed; }
  .position-xs-relative { position: relative; }
  .position-xs-absolute { position: absolute; }
  .position-xs-static { position: static; }
  .w-xs-100 { width: 100%!important; }
  .h-xs-100 { height: 100%!important; }
  .absolute-xs-w100 {
    left: 0;
    right: 0;
    padding: inherit;
  }
}
@media (min-width: 576px) {
  .position-sm-fixed { position: fixed; }
  .position-sm-relative { position: relative; }
  .position-sm-absolute { position: absolute; }
  .position-sm-static { position: static; }
  .w-sm-auto { width: auto!important; }
  .w-sm-25 { width: 25% !important; }
  .w-sm-50 { width: 50% !important; }
  .w-sm-75 { width: 75% !important; }
  .w-sm-100 { width: 100%!important; }
  .h-sm-100 { height: 100%!important; }
  .absolute-sm-w100 {
    left: 0;
    right: 0;
    padding: inherit;
  }
}
@media (min-width: 768px) {
  .position-md-fixed { position: fixed; }
  .position-md-relative { position: relative; }
  .position-md-absolute { position: absolute; }
  .position-md-static { position: static; }
  .w-md-auto { width: auto!important; }
  .w-md-25 { width: 25% !important; }
  .w-md-50 { width: 50% !important; }
  .w-md-75 { width: 75% !important; }
  .w-md-100 { width: 100%!important; }
  .h-md-100 { height: 100%!important; }
  .absolute-md-w100 {
    left: 0;
    right: 0;
    padding: inherit;
  }
}
@media (min-width: 992px) {
  .position-lg-fixed { position: fixed; }
  .position-lg-relative { position: relative; }
  .position-lg-absolute { position: absolute; }
  .position-lg-static { position: static; }
  .w-lg-auto { width: auto!important; }
  .w-lg-25 { width: 25% !important; }
  .w-lg-50 { width: 50% !important; }
  .w-lg-75 { width: 75% !important; }
  .w-lg-100 { width: 100%!important; }
  .h-lg-100 { height: 100%!important; }
  .absolute-lg-w100 {
    left: 0;
    right: 0;
    padding: inherit;
  }
}
@media (min-width: 1200px) {
  .position-xl-fixed { position: fixed; }
  .position-xl-relative { position: relative; }
  .position-xl-absolute { position: absolute; }
  .position-xl-static { position: static; }
  .w-xl-auto { width: auto!important; }
  .w-xl-25 { width: 25% !important; }
  .w-xl-50 { width: 50% !important; }
  .w-xl-75 { width: 75% !important; }
  .w-xl-100 { width: 100%!important; }
  .h-xl-100 { height: 100%!important; }
  .absolute-xl-w100 {
    left: 0;
    right: 0;
    padding: inherit;
  }
}

/****************************
    Margin & Padding
*****************************/
.p-15 {
  padding: 15px !important;
}
.pt-15 {
  padding-top: 15px !important;
}
.pr-15 {
  padding-right: 15px !important;
}
.pb-15 {
  padding-bottom: 15px !important;
}
.pl-15 {
  padding-left: 15px !important;
}
.px-15 {
  padding-right: 15px !important;
  padding-left: 15px !important;
}
.py-15 {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}
.m-15 {
  margin: 15px !important;
}
.mt-15 {
  margin-top: 15px !important;
}
.mr-15 {
  margin-right: 15px !important;
}
.mb-15 {
  margin-bottom: 15px !important;
}
.ml-15 {
  margin-left: 15px !important;
}
.mx-15 {
  margin-right: 15px !important;
  margin-left: 15px !important;
}
.my-15 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}
@media (min-width: 576px) {
  .p-sm-15 {
    padding: 15px !important;
  }
  .pt-sm-15 {
    padding-top: 15px !important;
  }
  .pr-sm-15 {
    padding-right: 15px !important;
  }
  .pb-sm-15 {
    padding-bottom: 15px !important;
  }
  .pl-sm-15 {
    padding-left: 15px !important;
  }
  .px-sm-15 {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
  .py-sm-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  .m-sm-15 {
    margin: 15px !important;
  }
  .mt-sm-15 {
    margin-top: 15px !important;
  }
  .mr-sm-15 {
    margin-right: 15px !important;
  }
  .mb-sm-15 {
    margin-bottom: 15px !important;
  }
  .ml-sm-15 {
    margin-left: 15px !important;
  }
  .mx-sm-15 {
    margin-right: 15px !important;
    margin-left: 15px !important;
  }
  .my-sm-15 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
}
@media (min-width: 768px) {
  .p-md-15 {
    padding: 15px !important;
  }
  .pt-md-15 {
    padding-top: 15px !important;
  }
  .pr-md-15 {
    padding-right: 15px !important;
  }
  .pb-md-15 {
    padding-bottom: 15px !important;
  }
  .pl-md-15 {
    padding-left: 15px !important;
  }
  .px-md-15 {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
  .py-md-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  .m-md-15 {
    margin: 15px !important;
  }
  .mt-md-15 {
    margin-top: 15px !important;
  }
  .mr-md-15 {
    margin-right: 15px !important;
  }
  .mb-md-15 {
    margin-bottom: 15px !important;
  }
  .ml-md-15 {
    margin-left: 15px !important;
  }
  .mx-md-15 {
    margin-right: 15px !important;
    margin-left: 15px !important;
  }
  .my-md-15 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
}
@media (min-width: 992px) {
  .p-lg-15 {
    padding: 15px !important;
  }
  .pt-lg-15 {
    padding-top: 15px !important;
  }
  .pr-lg-15 {
    padding-right: 15px !important;
  }
  .pb-lg-15 {
    padding-bottom: 15px !important;
  }
  .pl-lg-15 {
    padding-left: 15px !important;
  }
  .px-lg-15 {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
  .py-lg-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  .m-lg-15 {
    margin: 15px !important;
  }
  .mt-lg-15 {
    margin-top: 15px !important;
  }
  .mr-lg-15 {
    margin-right: 15px !important;
  }
  .mb-lg-15 {
    margin-bottom: 15px !important;
  }
  .ml-lg-15 {
    margin-left: 15px !important;
  }
  .mx-lg-15 {
    margin-right: 15px !important;
    margin-left: 15px !important;
  }
  .my-lg-15 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
}
@media (min-width: 1200px) {
  .p-lg-15 {
    padding: 15px !important;
  }
  .pt-lg-15 {
    padding-top: 15px !important;
  }
  .pr-lg-15 {
    padding-right: 15px !important;
  }
  .pb-lg-15 {
    padding-bottom: 15px !important;
  }
  .pl-lg-15 {
    padding-left: 15px !important;
  }
  .px-lg-15 {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
  .py-lg-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  .m-lg-15 {
    margin: 15px !important;
  }
  .mt-lg-15 {
    margin-top: 15px !important;
  }
  .mr-lg-15 {
    margin-right: 15px !important;
  }
  .mb-lg-15 {
    margin-bottom: 15px !important;
  }
  .ml-lg-15 {
    margin-left: 15px !important;
  }
  .mx-lg-15 {
    margin-right: 15px !important;
    margin-left: 15px !important;
  }
  .my-lg-15 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
}
/* Alignment */
.valign-middle {
  vertical-align: middle;
}

/****************************
    Overlay
*****************************/
.overlay {
  position: relative;
}
.overlay:after {
  position: absolute;
  content:"";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .25;
  background-color: #333;
}
#main.overlay:after {
  z-index: 10;
}