@charset "UTF-8";
/******************************************************************
Site Name: Northern Light Health
Author: Chrystine Muncherian

Stylesheet: Main Stylesheet

******************************************************************/
/*************** RESETS ***************/
/*************** ABSTRACTS ***************/
/******************************************************************
Site Name: Northern Light Health
Author: Chrystine Muncherian

Stylesheet: Sass Functions

You can do a lot of really cool things in Sass. Functions help you
make repeated actions a lot easier. They are really similar to mixins,
but can be used for so much more.

Anyway, keep them all in here so it's easier to find when you're
looking for one.

For more info on functions, go here:
http://sass-lang.com/documentation/Sass/Script/Functions.html

******************************************************************/
/*********************
COLOR FUNCTIONS
These are helpful when you're working
with shadows and such things. It's essentially
a quicker way to write RGBA.

Example:
box-shadow: 0 0 4px black(0.3);
compiles to:
box-shadow: 0 0 4px rgba(0,0,0,0.3);
*********************/
/*********************
LIGHTEN A COLOR
@access public
@param {Color} $color - color to shade
@param {Number} $percentage - percentage of `$color` in returned color
@return {Color}
*********************/
/*********************
DARKEN A COLOR
@access public
@param {Color} $color - color to shade
@param {Number} $percentage - percentage of `$color` in returned color
@return {Color}
*********************/
/*********************
RESPONSIVE HELPER FUNCTION
If you're creating a responsive site, then
you've probably already read
Responsive Web Design: http://www.abookapart.com/products/responsive-web-design

Here's a nice little helper function for calculating
target / context
as mentioned in that book.

Example:
width: cp(650px, 1000px);
or
width: calc-percent(650px, 1000px);
both compile to:
width: 65%;
*********************/
/****************************************************************
Tint & Shade Colors
https://css-tricks.com/snippets/sass/tint-shade-functions/
*****************************************************************/
/******************************************************************
Site Name: Northern Light Health
Author: Chrystine Muncherian

Stylesheet: Mixins Stylesheet

This is where you can take advantage of Sass' great features: Mixins.
I won't go in-depth on how they work exactly,
there are a few articles below that will help do that. What I will
tell you is that this will help speed up simple changes like
changing a color or adding CSS3 techniques gradients.

A WORD OF WARNING: It's very easy to overdo it here. Be careful and
remember less is more.

Helpful:
http://sachagreif.com/useful-sass-mixins/
http://thesassway.com/intermediate/leveraging-sass-mixins-for-cleaner-code
http://web-design-weekly.com/blog/2013/05/12/handy-sass-mixins/

******************************************************************/
/*********************
Add Flex In Styles
https://w3bits.com/sass-mixins/
*********************/
/*********************
CLEARFIX
https://w3bits.com/sass-mixins/
*********************/
/*********************
TRANSITION
*********************/
/*********************
CSS3 GRADIENTS
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/*********************
BOX SIZING
*********************/
/* @include box-sizing(border-box); */
/*****************************
VENDOR PREFIXING
https://w3bits.com/sass-mixins/
******************************/
/* @include prefix('box-sizing', 'inherit', moz webkit); */
/*****************************
CSS3 KEYFRAMES
https://w3bits.com/sass-mixins/
******************************/
/*****************************
BACKGROUND GRADIENT
https://w3bits.com/sass-mixins/
******************************/
/*****************************
REM UNITS
https://w3bits.com/sass-mixins/
******************************/
/* @include font-size(16); */
/*****************************
List Styles Reset
******************************/
/*****************************
Spacing Resets
******************************/
/****************************************************************
Qualify a Selector
https://css-tricks.com/snippets/sass/mixin-to-qualify-a-selector/
*****************************************************************/
/****************************************************************
HEXADECIMAL TO RGBA CONVERSION 
https://newmediadenver.com/hexadecimal-to-rgba-conversion-with-sass/
*****************************************************************/
/*-- EX: @include rgba-background(#333333, 0.5); --*/
/****************************************************************
SECTION PADDING
*****************************************************************/
/****************************************************************
CONTENT PADDING
*****************************************************************/
/****************************************************************
CONTENT MARGIN  
*****************************************************************/
/****************************************************************
TRANSITION
*****************************************************************/
/*************** BASE ***************/
/*
Color Classes 
-------------------------*/
.color--white {
  color: #FFFFFF;
}

.color--midnight {
  color: #3D4543;
}

.color--space {
  color: #002e36;
}

.color--spruce {
  color: #006877;
}

.color--tourmaline {
  color: #19909B;
}

.color--tourmaline-lightest {
  color: #fafdfd;
}

.color--tourmaline-dark {
  color: #14737c;
}

/*
Type
-------------------------*/
/* Font Awesome */
.fa, .fas, .far, .fal, .fad {
  line-height: normal;
}

/* Duotone Opacity */
.fad:after {
  opacity: 0.2;
  opacity: var(--fa-secondary-opacity, 0.2);
}

.text-md {
  font-size: 1.25rem;
  line-height: 1.5;
}

.text-lg {
  font-size: 1.5rem;
  line-height: 1.5;
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.125rem;
}

/*
Animations
-------------------------*/
@-webkit-keyframes border-bottom-animation_default {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 100%;
    opacity: 100%;
  }
}
@keyframes border-bottom-animation_default {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 100%;
    opacity: 100%;
  }
}
@-webkit-keyframes border-bottom-animation_hover {
  from {
    width: 100%;
    opacity: 100%;
  }
  to {
    width: 0;
    opacity: 0;
  }
}
@keyframes border-bottom-animation_hover {
  from {
    width: 100%;
    opacity: 100%;
  }
  to {
    width: 0;
    opacity: 0;
  }
}
/*
Style Helper Classes
-------------------------*/
.border--rounded, img.body-image {
  border-radius: 0.25rem;
}

/*************** COMPONENTS ***************/
/*
Background Classes
-------------------------*/
/* Background Color */
.bg--white {
  background-color: #FFFFFF;
}

.bg--midnight {
  background-color: #3D4543;
}

.bg--space {
  background-color: #002e36;
}

.bg--spruce {
  background-color: #006877;
}

.bg--tourmaline {
  background-color: #19909B;
}

.bg--tourmaline-light {
  background-color: #d1e9eb;
}

.bg--tourmaline-lighter {
  background-color: #e8f4f5;
}

.bg--tourmaline-lightest {
  background-color: #fafdfd;
}

.bg--amber {
  background-color: #e87722;
}

section.bg--tourmaline-lightest {
  border-top: solid 1px #e8f4f5;
  border-bottom: solid 1px #e8f4f5;
}

.card.bg--tourmaline-lightest {
  border: solid 1px #e8f4f5;
}

/* Background Image */
.bg--image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 1rem;
}

.bg-position-x--left {
  background-position-x: left;
}

.bg-position-x--center {
  background-position-x: center;
}

.bg-position-x--right {
  background-position-x: right;
}

.bg-position-y--top {
  background-position-y: top;
}

.bg-position-y--center {
  background-position-y: center;
}

.bg-position-y--bottom {
  background-position-y: bottom;
}

/*
Buttons
-------------------------*/
.btn {
  text-decoration: none;
}
.btn:hover, .btn:focus, .btn:active {
  text-decoration: none;
}

.btn-primary:hover {
  color: #FFFFFF;
}

.btn--small {
  font-size: 0.9rem;
}

/*
Links
-------------------------*/
.text-link {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  text-decoration: none;
  color: #002e36;
  position: relative;
}
.text-link * {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.text-link:before {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background-color: #19909B;
  -webkit-animation: border-bottom-animation_default 1s;
          animation: border-bottom-animation_default 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.text-link:after {
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  content: "";
  color: transparent;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  position: absolute;
  top: 0.125rem;
}
.text-link:hover {
  cursor: pointer;
  text-decoration: none;
  color: #14737c;
}
.text-link:hover:before {
  -webkit-animation: border-bottom-animation_hover 1s;
          animation: border-bottom-animation_hover 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.text-link:hover:after {
  color: #19909B;
  -webkit-transform: translateX(.5rem);
  transform: translateX(.5rem);
}

/*
Lists
-------------------------*/
.list-group-flush {
  list-style-type: none;
  padding: 0;
}
.list-group-flush li {
  padding: 0;
  padding-bottom: 0.25rem;
  margin-bottom: 0.25rem;
  border-bottom: solid 1px #E6E7E8;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.list-group-flush li a {
  text-decoration: none;
  color: #002e36;
  position: relative;
  display: block;
}
.list-group-flush li:hover {
  border-color: #19909B;
}
.list-group-flush li:hover > a {
  text-decoration: none;
  color: #006877;
}

/*
CTAs
-------------------------*/
.cta {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  text-align: center;
  text-decoration: none !important;
}
.cta * {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  text-decoration: none;
}
.cta .cta__icon {
  color: #19909B;
  display: block;
}
.cta .cta__text {
  text-decoration: none;
  color: #002e36;
  position: relative;
}
.cta .cta__text * {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.cta .cta__text:after {
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  content: "";
  color: transparent;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  position: absolute;
  top: 0.125rem;
}
.cta:hover {
  cursor: pointer;
}
.cta:hover .cta__text {
  cursor: pointer;
  text-decoration: none;
  color: #14737c;
  -webkit-transform: translateX(-.5rem);
  transform: translateX(-.5rem);
}
.cta:hover .cta__text:after {
  color: #19909B;
  -webkit-transform: translateX(.75rem);
  transform: translateX(.75rem);
}

/*
Cards
-------------------------*/
.card,
.card * {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.card {
  border: solid 2px #E6E7E8;
}
.card .card-body {
  padding: 2rem 1.5rem;
}
.card .card-title:hover > a {
  color: #006877;
}

a.card:hover {
  border-color: #19909B;
}

/*
Alerts
-------------------------*/
.alert {
  position: relative;
  padding: 1rem 0;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.alert + .alert {
  border-top: solid 1px;
}
.alert p {
  margin-bottom: 0;
}
.alert.alert-info {
  color: #006877;
  background-color: #D9E8EB;
  border-color: #006877;
}
.alert.alert-danger {
  color: #721C24;
  background-color: #F8D7dA;
  border-color: #8E4950;
}
.alert.alert-danger .btn {
  background-color: #721C24;
  border-color: #721C24;
  color: #FFFFFF;
}
.alert.alert-danger .btn:hover, .alert.alert-danger .btn:active {
  background-color: #5B161D;
  color: #FFFFFF;
}
.alert.alert-notice {
  color: #3D4543;
  background-color: #fff8e6;
  border-color: #ffb600;
}
.alert.alert-notice .btn {
  background-color: #ffc533;
  border-color: #ffb600;
  color: #002e36;
}
.alert.alert-notice .btn:hover, .alert.alert-notice .btn:active {
  background-color: #ffb600;
  color: #002e36;
  border-color: #ffb600;
}

/*
Sub-Page Nav | Mobile
-------------------------*/
@media screen and (max-width: 576px) {
  .left-col {
    padding: 10px 20px;
    margin-bottom: 20px;
  }

  .main-content {
    padding-top: 0;
  }

  .main-content > .container h1 {
    margin-top: 20px;
  }

  .subpage-nav__btn:hover {
    cursor: pointer;
  }

  .subpage-nav__btn .btn__title {
    color: #002E36;
    font-size: 1.25rem;
    position: relative;
    top: 1px;
    padding-right: 2rem;
    margin-bottom: 0;
  }

  .subpage-nav__btn .btn__title:after {
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    content: "";
    position: absolute;
    right: 0;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    color: #002E36;
    opacity: 0.4;
  }

  .subpage-nav__btn:hover .btn__title:after {
    opacity: 1;
  }

  .subpage-nav__btn[aria-expanded=true] .btn__title:after {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

  #collapseleft {
    padding: 20px 0 10px 0;
  }

  #collapseleft ul li {
    padding-bottom: 10px;
    border-bottom: solid 1px rgba(0, 46, 54, 0.2);
    margin-bottom: 10px;
  }

  #collapseleft ul li {
    padding-bottom: 10px;
    border-bottom: solid 1px rgba(0, 46, 54, 0.2);
    margin-bottom: 10px;
  }

  #collapseleft ul li a {
    color: #002E36;
    font-weight: 400;
    position: relative;
    width: 100%;
    display: inline-block;
    border-bottom: 0;
    text-decoration: none;
    margin: 0;
  }

  #collapseleft ul li a:after {
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    content: "";
    position: absolute;
    right: 10px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    color: rgba(0, 46, 54, 0.4);
  }

  #collapseleft ul li:hover {
    border-bottom: solid 1px #002e36;
  }

  #collapseleft ul li:hover a {
    color: #002E36;
    text-decoration: none;
  }

  #collapseleft ul li:hover a:after {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
    color: #002e36;
  }
}
/*
Main Menu
-------------------------*/
#modalMainMenu {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}
#modalMainMenu::-webkit-scrollbar {
  display: none;
}
#modalMainMenu .modal-content {
  padding-bottom: 2rem;
  height: 100%;
}

/*************** SECTIONS ***************/
/*
Page Header
-------------------------*/
#mainBanner .content-container {
  width: 100%;
  margin: 0;
}
#mainBanner .bg--image {
  min-height: 200px;
}
#mainBanner .list-group-flush {
  padding: 2rem;
}
#mainBanner .list-group-flush li {
  font-size: 1.125rem;
  padding: 1rem 0;
  border-bottom: solid 1px rgba(255, 255, 255, 0.2);
}
#mainBanner .list-group-flush li:first-of-type {
  padding-top: 0;
}
#mainBanner .list-group-flush li a {
  color: #FFFFFF;
  position: relative;
  padding-right: 1rem;
  -webkit-display: flex;
  -ms-display: flex;
  display: -webkit-box;
  display: flex;
  -ms-align-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#mainBanner .list-group-flush li a:after {
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  content: "";
  color: #FFFFFF;
  opacity: 0.6;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  position: absolute;
  right: 1rem;
}
#mainBanner .list-group-flush li a .item-marker {
  font-size: 1.5rem;
  opacity: 0.6;
  position: relative;
  top: 0.125rem;
}
#mainBanner .list-group-flush li:hover {
  cursor: pointer;
  text-decoration: none;
  border-bottom: solid 1px rgba(255, 255, 255, 0.8);
}
#mainBanner .list-group-flush li:hover a:after {
  opacity: 1;
  -webkit-transform: translateX(.5rem);
  transform: translateX(.5rem);
}
#mainBanner .list-group-flush li:hover a .item-marker {
  opacity: 0.9;
}

@media screen and (min-width: 768px) {
  #mainBanner .content-container {
    min-height: 400px;
  }
}
@media screen and (min-width: 1200px) {
  #mainBanner .list-group-flush {
    padding: 3rem;
  }
  #mainBanner .list-group-flush li {
    font-size: 1.5rem;
    padding: 1.25rem 0;
  }
  #mainBanner .list-group-flush li a:after {
    top: 0.5rem;
  }
  #mainBanner .list-group-flush li a .item-marker {
    font-size: 2rem;
  }
}
/*************** TEMPLATES ***************/
/*
Main Master Template
-------------------------*/
/*
Members Master Template
-------------------------*/
#masterMembers #subBannerMembers h2 {
  display: none;
}
#masterMembers #subBannerMembers P {
  font-size: 1.125rem;
  margin: 0;
}
#masterMembers #subBannerMembers address,
#masterMembers #subBannerMembers .phone,
#masterMembers #subBannerMembers .fax {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  display: block;
}
#masterMembers #subBannerMembers address:before,
#masterMembers #subBannerMembers .phone:before,
#masterMembers #subBannerMembers .fax:before {
  font-family: "Font Awesome 6 Pro";
  font-weight: 600;
  color: #19909B;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  position: absolute;
  top: 0.125rem;
  left: 0;
}
#masterMembers #subBannerMembers address:hover,
#masterMembers #subBannerMembers .phone:hover,
#masterMembers #subBannerMembers .fax:hover {
  color: #14737c;
}
#masterMembers #subBannerMembers address:before {
  content: "";
}
#masterMembers #subBannerMembers .phone:before {
  content: "";
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
}
#masterMembers #subBannerMembers .fax:before {
  content: "";
}
#masterMembers #subBannerMembers .search .input {
  position: relative;
}
#masterMembers #subBannerMembers .search .input input {
  width: 100%;
  border: solid 1px #a7a9ab;
  border-radius: 0.25rem;
  font-size: 0.9rem;
  padding: 0.125rem 0.5rem;
  margin-bottom: 1rem;
}
#masterMembers #subBannerMembers .search .icon {
  width: 28px;
  height: 28px;
  padding: 6px;
  position: absolute;
  right: 0.25rem;
}
#masterMembers #subBannerMembers .search .icon svg {
  fill: #19909B;
}/*# sourceMappingURL=main-nlh.css.map */