@charset "UTF-8";
/* ---------------------------------------------------------------------
 Modern Styles
------------------------------------------------------------------------ */
@font-face {
  font-family: "icomoon";
  src: url("../media/fonts/icomoon.eot?-wi62zk");
  src: url("../media/fonts/icomoon.eot?#iefix-wi62zk") format("embedded-opentype"), url("../media/fonts/icomoon.woff?-wi62zk") format("woff"), url("../media/fonts/icomoon.ttf?-wi62zk") format("truetype"), url("../media/fonts/icomoon.svg?-wi62zk#icomoon") format("svg");
  font-weight: normal;
  font-style: normal; }

.isScrollLocked {
  overflow: hidden; }

.isAlignedLeft {
  text-align: left !important; }

.isAlignedCenter {
  text-align: center !important; }

.isAlignedRight {
  text-align: right !important; }

.isVisuallyHidden {
  position: absolute;
  bottom: -10000px;
  left: -10000px;
  text-indent: -10000;
  font-size: 0; }

.isFullWidth {
  width: 100% !important; }

.isOneLine {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.isSquare {
  border-radius: 0; }

.isLocationFilterPrefix:nth-child(2) {
  display: none; }

.util-lead {
  margin-top: 10px; }

.clear {
  clear: both; }

/* ---------------------------------------------------------------------
RESET CSS (thanks Eric Meyer)
------------------------------------------------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  vertical-align: baseline; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

:focus {
  outline: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

/* ---------------------------------------------------------------------
 HTML5 Element Reset
------------------------------------------------------------------------ */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block; }

audio, canvas, video, progress, picture {
  display: inline-block; }

template {
  display: none; }

/* ---------------------------------------------------------------------
 Form Reset Styles
------------------------------------------------------------------------ */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none; }

input[type="search"] {
  -webkit-appearance: none; }

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical; }

::-moz-focus-inner {
  border: 0;
  padding: 0; }

body {
  line-height: 1.22;
  color: #666666;
  font-family: "Neue Helvetica W01", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased; }

body:after {
  position: absolute;
  bottom: -10000px;
  left: -10000px;
  text-indent: -10000;
  font-size: 0;
  content: "sm"; }

img,
picture,
video {
  max-width: 100%; }

img {
  vertical-align: bottom;
  border-radius: 6px; }

.rect {
  border-radius: 0; }

.badge {
  padding: 1px 9px 2px;
  font-size: 12.025px;
  font-weight: bold;
  white-space: nowrap;
  color: #002C77;
  background-color: #E8F3FB;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px; }

a {
  color: #002c77; }

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important; }

fieldset {
  min-width: 0; }

legend {
  max-width: 100%; }

.app {
  overflow-x: hidden; }

.app-menu {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 100%;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 20px;
  width: 250px;
  height: 100vh; }

.app-menu:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
  width: 7px;
  content: " "; }

.app.isMenuActive > * {
  -webkit-transform: translateX(250px) translateZ(0);
  -moz-transform: translateX(250px) translateZ(0);
  -ms-transform: translateX(250px) translateZ(0);
  transform: translateX(250px) translateZ(0); }

.site {
  position: relative;
  overflow: hidden; }

.site-hd {
  position: relative;
  z-index: 10000;
  background-color: #ffffff; }

.site-bd {
  position: static !important; }

.site-shield {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: opacity 0.2s, visibility 0.2s;
  -moz-transition: opacity 0.2s, visibility 0.2s;
  -ms-transition: opacity 0.2s, visibility 0.2s;
  transition: opacity 0.2s, visibility 0.2s;
  visibility: hidden;
  opacity: 0;
  z-index: 10000; }

.site-shield_menu {
  z-index: 9900; }

.site-shield.isActive {
  visibility: visible;
  opacity: 1; }

.siteFt {
  *zoom: 1;
  padding: 32px 0 32px 0;
  color: #ffffff; }
  .siteFt:after, .siteFt:before {
    display: table;
    content: " "; }
  .siteFt:after {
    clear: both; }

.siteHd {
  *zoom: 1;
  position: relative;
  display: table;
  width: 100%;
  text-align: center; }
  .siteHd:after, .siteHd:before {
    display: table;
    content: " "; }
  .siteHd:after {
    clear: both; }

.siteHd-nav {
  text-align: right;
  z-index: 100; }

.siteHd-nav-eyebrow {
  display: none; }

.siteHd-toggle {
  display: table-cell;
  min-width: 27px;
  vertical-align: middle;
  line-height: 1;
  font-size: 27px; }

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

.siteHd-toggle_r {
  position: relative;
  z-index: 1;
  text-align: right; }
  .siteHd-toggle_r:before {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    margin: auto;
    border: 11px solid transparent;
    border-top: 10px solid #ffffff;
    border-bottom: 0;
    width: 0;
    height: 0;
    color: #ffffff;
    content: " "; }
  .siteHd-toggle_r.isActive:before {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }

.siteHd-toggle_r:before {
  right: 2px;
  left: auto; }

.siteHd-logo {
  display: table-cell;
  z-index: 200;
  width: 100%;
  vertical-align: middle; }

/**
* @name Site Logo
* @description Controlls the maximum size of the site's logo accross breakpoints
* @markup
*/
.siteLogo {
  display: inline-block;
  width: 90px; }

/**
@name Site Navigation
@description main site navigation bar with optional dropdowns
@markup
*/
.siteNav {
  margin: 0 -10px;
  font-size: 0; }

.siteNav-item {
  display: inline-block; }

.siteNav-item-hd {
  position: relative;
  z-index: 1;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: none;
  cursor: pointer;
  padding: 12px 10px;
  text-decoration: none;
  color: #002c77; }
  .siteNav-item-hd:before {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    margin: auto;
    border: 11px solid transparent;
    border-top: 10px solid #ffffff;
    border-bottom: 0;
    width: 0;
    height: 0;
    color: #ffffff;
    content: " "; }
  .siteNav-item-hd.isActive:before {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }

.siteNav-item-hd.isActive {
  color: #68ace5; }

.siteNav-item-hd::after {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -9px;
  border-right: 1px solid #cacaca;
  border-right-color: rgba(0, 0, 0, 0.2);
  height: 18px;
  content: " "; }

.siteNav-item-hd_last::after,
.siteNav-item:last-child > .siteNav-item-hd::after {
  display: none; }

.siteNav-item-bd {
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  padding: 20px 0;
  text-align: left; }

.siteNav-item-bd.isActive {
  -webkit-transform: scale(1) translateZ(0);
  -moz-transform: scale(1) translateZ(0);
  -ms-transform: scale(1) translateZ(0);
  transform: scale(1) translateZ(0);
  visibility: visible;
  opacity: 1; }

.alphaList {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding-right: 34px;
  background-color: #ffffff;
  overflow: hidden; }

.alphaList-hd {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 34px;
  height: 100%;
  overflow-y: auto; }

.alphaList-bd {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 34px;
  bottom: 0;
  left: 0;
  z-index: 1;
  padding-top: 12px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto; }

/* hd-tabs */
.alphaList-hd-tab {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  cursor: pointer;
  min-height: 3.8461538462%; }

.alphaList-hd-tab_disabled {
  opacity: 0.3;
  cursor: default; }

.alphaList-hd-tab-text {
  display: block;
  display: flex;
  padding-top: 2px;
  padding-bottom: 2px;
  width: 100%;
  height: 100%;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: #878787;
  font-size: 13px; }

/**
@name Band
@description This is decorative module for adding bands of color behind sections of the site. When two white bands are used in sequence, they are separated by a horizontal divider. While .band could be used inside other modules if needed, it's primary concern is separating main content areas.

@markup
    <div class="band"> Content goes here </div>
    <div class="band band_bright"> Content goes here </div>
    <div class="band band_dark"> Content goes here </div>
    <div class="band band_white"> Content goes here </div>
    <div class="band band_white"> Content goes here </div>
    <div class="band band_nav"> action nav goes here </div>
    <div class="band band_offWhite"> Content goes here </div>
*/
.band {
  *zoom: 1;
  position: relative;
  background-color: #efefef; }
  .band:after, .band:before {
    display: table;
    content: " "; }
  .band:after {
    clear: both; }

.band:before {
  margin-right: 18px;
  margin-left: 18px; }

.band_bright {
  background-color: #0086cf;
  color: #ffffff; }

.band_pale {
  background-color: #e8f3fb; }

.band_dark {
  background-color: #002c77;
  color: #ffffff; }

.band_light {
  background-color: #68ace5;
  color: #ffffff; }

.band_nav {
  background-color: #5fa4e2;
  min-height: 34px;
  color: #ffffff; }

.band_offWhite {
  background-color: #f8f8f8; }

.band_lightGray {
  background-color: #efefef; }

.band_white {
  background-color: #ffffff; }

.band_white + .band_white:before {
  display: block;
  background-color: #efefef;
  height: 3px; }

.band.isFixed {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10; }

/**
@name Blocks
@description Used to split items within a row into columns

@markup
<div class="row">
    <ul class="blocks mix-blocks_smushed">
        <li>breadcrumbs ></li>
        <li>breadcrumbs ></li>
        <li>breadcrumbs</li>
    </ul>
</div>
<div class="row">
    <div class="grid">
        <div class="grid-col grid-col_4of12">
            <div class="box box_blue">
                <ul class="blocks">
                    <li>
                        <div class="box">hList that wraps</div>
                    </li>
                    <li>
                        <div class="box">hList that wraps</div>
                    </li>
                    <li>
                        <div class="box">hList that wraps</div>
                    </li>
                    <li>
                        <div class="box">hList that wraps</div>
                    </li>
                    <li>
                        <div class="box">hList that wraps</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <ul class="blocks blocks_4up">
        <li>
            <div class="box">
                 Here's a long line to show how lines of blocks clear each other. Here's a long line to show how lines of blocks clear each other. Here's a long line to show how lines of blocks clear each other.
            </div>
        </li>
        <li>
            <div class="box">
                Lorem ipsum dolor sit amet, consectetur adipisicing.
            </div>
        </li>
        <li>
            <div class="box">
                Lorem ipsum dolor sit amet, consectetur adipisicing.
            </div>
        </li>
        <li>
            <div class="box">
                Lorem ipsum dolor sit amet, consectetur adipisicing.
            </div>
        </li>
        <li>
            <div class="box">
                Lorem ipsum dolor sit amet, consectetur adipisicing.
            </div>
        </li>
    </ul>
</div>
<div class="row">
    <ul class="blocks mix-blocks_sm1up mix-blocks_md2up mix-blocks_lg4up">
        <li>
            <div class="box">
                 <p>1 up on small, 2 up on medium, and 4 up on large breakpoints.</p>
            </div>
        </li>
        <li>
            <div class="box">
                 <p>1 up on small, 2 up on medium, and 4 up on large breakpoints.</p>
            </div>
        </li>
        <li>
            <div class="box">
                 <p>1 up on small, 2 up on medium, and 4 up on large breakpoints.</p>
            </div>
        </li>
        <li>
            <div class="box">
                 <p>1 up on small, 2 up on medium, and 4 up on large breakpoints.</p>
            </div>
        </li>
    </ul>
</div>

*/
.blocks {
  *zoom: 1;
  margin: -20px 0 0 -20px;
  font-size: 0; }
  .blocks:after, .blocks:before {
    display: table;
    content: " "; }
  .blocks:after {
    clear: both; }
  .blocks > * {
    padding: 20px 0 0 20px; }

.blocks > * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  *display: inline;
  zoom: 1;
  vertical-align: top;
  font-size: 14px; }

.blocks_1up > * {
  width: 100%; }

.blocks_2up > * {
  width: 50%; }

.blocks_3up > * {
  width: 33.3333333333%; }

.blocks_4up > * {
  width: 25%; }

.blocks_5up > * {
  width: 20%; }

.blocks_6up > * {
  width: 16.6666666667%; }

.blocks_7up > * {
  width: 14.2857142857%; }

.blocks_8up > * {
  width: 12.5%; }

/* blocks alignment */
.mix-blocks_baseline > * {
  vertical-align: baseline; }

.mix-blocks_middle > * {
  vertical-align: middle; }

.mix-blocks_justify {
  text-align: justify; }

.mix-blocks_justify:after {
  display: inline-block;
  width: 100%;
  content: " "; }

/* one off sizes */
.blocks_zip > :first-child {
  width: 150px; }

.blocks_zip > :last-child {
  width: 100%; }

.blocks_facility > :first-child {
  min-width: 80px; }

/* gutter sizes */
.mix-blocks_noSpace {
  margin: 0 0 0 0; }
  .mix-blocks_noSpace > * {
    padding: 0 0 0 0; }

.mix-blocks_smushed {
  margin: 0 0 0 -4px; }
  .mix-blocks_smushed > * {
    padding: 0 0 0 4px; }

.mix-blocks_tags {
  margin: -8px 0 0 -8px; }
  .mix-blocks_tags > * {
    padding: 8px 0 0 8px; }

.mix-blocks_tight {
  margin: -12px 0 0 -12px; }
  .mix-blocks_tight > * {
    padding: 12px 0 0 12px; }

.mix-blocks_letters {
  margin: -10px 0 0 -16px; }
  .mix-blocks_letters > * {
    padding: 10px 0 0 16px; }

.mix-blocks_lessLoose {
  margin: -27px 0 0 -27px; }
  .mix-blocks_lessLoose > * {
    padding: 27px 0 0 27px; }

.mix-blocks_loose {
  margin: -34px 0 0 -34px; }
  .mix-blocks_loose > * {
    padding: 34px 0 0 34px; }

.mix-blocks_fit {
  margin: 0 0 0 0; }
  .mix-blocks_fit > * {
    padding: 0 0 0 0; }

.mix-blocks_float > * {
  float: left; }

@media (max-width: 1259px) {
  .mix-blocks_isCarousel {
    margin: 0 0 0 -20px;
    white-space: nowrap; }
    .mix-blocks_isCarousel > * {
      padding: 0 0 0 20px; }
  .mix-blocks_isCarousel > * {
    white-space: normal; } }

.mix-blocks_isCarousel > * > :only-child {
  min-height: 100%; }

.mix-blocks_isEqualCarousel {
  display: -webkit-box;
  display: -webkit-flex;
  /* display: -ms-flexbox; */
  display: flex;
  white-space: nowrap; }

.mix-blocks_isEqualCarousel > * {
  display: -webkit-box;
  display: -webkit-flex;
  /* display: -ms-flexbox; */
  display: flex;
  -ms-flex: 1;
  width: 100%;
  min-width: 100%;
  white-space: normal; }

.mix-blocks_isEqualCarousel > * > :only-child {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1; }

.mix-blocks_piped {
  margin: 0; }

.blocks-block_full {
  width: 100%; }

.mix-blocks_equal {
  display: -webkit-box;
  display: -webkit-flex;
  /* display: -ms-flexbox; */
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.mix-blocks_equal > * {
  display: -webkit-box;
  display: -webkit-flex;
  /* display: -ms-flexbox; */
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  white-space: normal;
  margin-right: -1px; }

.mix-blocks_equal > * > * {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex: 1; }

.mix-blocks_isMobileCarousel > *,
.mix-blocks_isCarousel > * {
  -webkit-transform: translateZ(0.001px);
  -moz-transform: translateZ(0.001px);
  -ms-transform: translateZ(0.001px);
  transform: translateZ(0.001px); }

@media (max-width: 1260px) {
  .hidden-md {
    display: none; } }

.hidden {
  visibility: hidden; }

.blocks .display-inline {
  display: inline; }

@media (min-width: 1260px) {
  .blocks .display-inline {
    display: inline-block; }
  .blocks .display-inline .box {
    height: 100%; }
  .blocks.display-flex {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    white-space: nowrap; }
  .blocks.display-flex .item {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-right: -1px;
    min-width: 25%;
    width: 25%; }
  .blocks.display-flex .item .box {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1; } }

.column {
  margin: 0 10px; }

.column_rightSpace {
  margin: 0 10px 0 0; }

.form {
  width: 100%; }

/**
@name Grid
@description

@markup
<div class="row">
    <div class="grid">
        <div class="grid-col grid-col_4of12">
            <div class="box">
                <h1 class="hdg">1/3</h1>
            </div>
        </div>
        <div class="grid-col grid-col_4of12">
            <div class="box">
                <h1 class="hdg">1/3</h1>
            </div>
        </div>
        <div class="grid-col grid-col_4of12">
            <div class="box">
                <h1 class="hdg">1/3</h1>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="grid">
        <div class="grid-col grid-col_sidebar">
            <div class="box">
                <h1 class="hdg">sidebar</h1>
            </div>
        </div>
        <div class="grid-col grid-col_main">
            <div class="box box_blue">
                <h1 class="hdg">main</h1>
            </div>
        </div>
    </div>
</div>
*/
.grid {
  *zoom: 1;
  margin: -20px 0 0 -20px;
  overflow: hidden; }
  .grid:after, .grid:before {
    display: table;
    content: " "; }
  .grid:after {
    clear: both; }

.grid_results {
  overflow: visible; }

.mix-grid_loose {
  margin: -30px 0 0 -30px; }

.mix-grid_tight {
  margin: -12px 0 0 -12px; }

.grid-col {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  padding: 20px 0 0 20px;
  width: 100%; }

.mix-grid-col_loose {
  padding: 30px 0 0 30px; }

.mix-grid_tight > .grid-col {
  padding: 12px 0 0 12px; }

.grid_footer {
  overflow: visible; }

/**
@name hList
@description a horizontal list of items

@markup
<ul class="hList">
    <li class="hList-item">Item #1</li>
    <li class="hList-item">Item #2</li>
    <li class="hList-item">Item #3</li>
    <li class="hList-item">Item #4</li>
</ul>
*/
.hList_inline {
  display: inline; }

.hList > *,
.hList-item {
  display: inline; }

.hList > * + *,
.hList-item + .hList-item {
  margin-left: 20px; }

.hList_hug > * {
  margin-left: 0; }

/**
@name Label Link
@description Image link with a label in the upper left corner.

@markup
<a class="labelLink">
    <div class="labelLink-label">
        <div class="box box_flag"> <i class="icon icon_childLogo mix-icon_childFlag"></i> </div>
    </div>
    <img class="labelLink-img" src="//placehold.it/200x200">
</a>
*/
.labelLink {
  display: block;
  position: relative; }

.labelLink-label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 10px; }

.labelLink-img {
  position: relative;
  z-index: 0; }

/**
@name Media
@description Image on the left, content on the right.

@markup
<div class="row" style="width: 400px;">
    <div class="media">
        <div class="media-img">
            <div style="line-height: 30px;">
                <i class="icon icon_loc">loc icon</i>
            </div>
        </div>
        <div class="media-bd">
            <p class="txt txt_2">St Luke's Boise Medical Center South Tower - Anderson Center 100 E. Idaho Street, Boise</p>
        </div>
    </div>
</div>
<div style="width: 400px;">
    <div class="media">
        <div class="media-img_right">
            <div style="line-height: 30px;">
                <i class="icon icon_loc">loc icon</i>
            </div>
        </div>
        <div class="media-bd media-bd_right">
            <p class="txt txt_2">St Luke's Boise Medical Center South Tower - Anderson Center 100 E. Idaho Street, Boise</p>
        </div>
    </div>
</div>
*/
.media {
  *zoom: 1; }
  .media:after, .media:before {
    display: table;
    content: " "; }
  .media:after {
    clear: both; }

.media-img {
  float: left;
  margin: 0 10px 0 0; }
  .media-img > * {
    margin: auto; }

.mix-media-img_reg {
  margin: 0 20px 0 0; }

.mix-media-img_loose {
  margin: 0 30px 0 0; }

.media-img_right.mix-media-img_loose {
  margin: 0 0 0 30px; }

.media-img_right {
  float: right;
  margin: 0 0 0 10px; }

.media-bd {
  overflow: hidden; }

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

.mix-media-img_lgOnly {
  display: none; }

.media_padTop {
  padding-top: 20px; }

/**
 * This is a layout module that controls the unique positioning requirements of
 * the provider hub page (note that's a hub about a particular provider, not a
 * hub of providers).
 *
 * The strangest thing going on is that in the header, the square provider image
 * can "peek" out of the area and pushes down the left column in the body area.
 */
.provider {
  *zoom: 1;
  position: relative;
  z-index: 1;
  padding: 10px 0 10px;
  margin-left: -10px;
  margin-right: -10px; }
  .provider:after, .provider:before {
    display: table;
    content: " "; }
  .provider:after {
    clear: both; }

.provider_hd {
  z-index: 2; }

.provider-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px; }

.providerResult {
  *zoom: 1; }
  .providerResult:after, .providerResult:before {
    display: table;
    content: " "; }
  .providerResult:after {
    clear: both; }

.providerResult + .providerResult {
  margin-top: 34px; }

.providerResult-img {
  float: left;
  margin: 20px; }

.providerResult-loc + .providerResult-loc {
  margin-top: 34px;
  border-top: 1px solid #efefef;
  padding-top: 34px; }

.providerResult-info + .providerResult-info > * {
  padding-top: 12px; }

.providerResult-info-hd {
  padding-right: 12px;
  font-weight: 500; }

.providerResult-btn {
  display: none; }

.providerResult-bd {
  clear: both; }

.providerResult-hd-bd {
  display: table-cell; }

/**
@name Results Search
@description Layout module for the search area on the search results page. Very specific layout that stacks on mobile and tablet but has a table layout on desktop.

@markup
<div class="resultsSearch">
    <div class="resultsSearch-l">
        <div class="split">
            <div class="split-item">
                <div class="txt txt_3 mix-txt_medium">We found 211 results for:</div>
            </div>
            <div class="split-item split-item_r isHiddenSm isHiddenLg">
                <div class="txt txt_2 mix-txt_medium mix-txt_up">
                    <a href="#0" class="link mix-link_arrow">Start New Search</a>
                </div>
            </div>
        </div>
    </div>
    <div class="resultsSearch-c">
        <form>
            <label for="searchResultsField" class="isVisuallyHidden">Search by keyword</label>
            <input type="text" class="field mix-field_fullWidth" id="searchResultsField" placeholder="Appointment">
        </form>
    </div>
    <div class="resultsSearch-r isHiddenMd">
        <div class="txt txt_2 mix-txt_medium mix-txt_up">
            <a href="#0" class="link mix-link_arrow">Start New Search</a>
        </div>
    </div>
</div>
*/
.resultsSearch-l {
  margin-bottom: 12px; }

.resultsSearch-c {
  margin-bottom: 22px; }

.resultsSearch-r {
  margin-bottom: 20px; }

/**
@name Row
@description Controls vertical spacing after a row of content.

@markup
<div class="row">
    A standard row.
</div>
<div class="row row_loose">
    A loose row.
</div>
<div class="row row_tight">
    A tight row.
</div>
<div class="band">Some content below so the spacing is visible.</div>
*/
.row {
  margin-bottom: 20px; }

.row_loose {
  margin-bottom: 34px; }

.row_mdPlus {
  margin-bottom: 27px; }

.row_tight {
  margin-bottom: 12px; }

.row_tighter {
  margin-bottom: 5px; }

.row_tightTop {
  margin: 12px 0 0 0; }

.row_top {
  margin: 20px 0 0 0; }

.row_extraLoose {
  margin-bottom: 80px; }

.row_smushed {
  margin-bottom: 6px; }

.row_dbl {
  margin-bottom: 40px; }

.row_zip {
  margin-bottom: 120px; }

.mix-row_line {
  margin-bottom: 0;
  border-bottom: 1px solid #cacaca;
  border-color: rgba(0, 0, 0, 0.05); }

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

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

.mix-row_lead {
  margin-top: 20px; }

.row_resultsFeedback {
  min-height: 34px; }

.searchHd {
  display: block;
  padding: 4px 14px;
  text-transform: uppercase;
  font-size: 11px; }

/**
@name Split
@description Splits content to the left and/or right

@markup
<div class="row">
    <div class="split">
        <div class="split-item split-item_r">
            Content only on the right
        </div>
    </div>
</div>

<div class="row">
    <div class="split">
        <div class="split-item">
            Stuff on the left anddd
        </div>
        <div class="split-item split-item_r">
            the right!
        </div>
    </div>
</div>

<div class="box">
    <div class="split split_middle">
        <div class="split-item">
            <div class="txt">vertically centered</div>
        </div>
        <div class="split-item split-item_r">
            <div class="hdg">vertically centered</div>
        </div>
    </div>
</div>
*/
.split {
  display: table;
  width: 100%; }

.mix-split_thirds > * {
  width: 33.333333%; }

.mix-split_fill {
  height: 100%; }

.split_middle > .split-item {
  vertical-align: middle; }

.split-item {
  display: table-cell;
  vertical-align: baseline;
  text-align: left; }

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

.split-item_r {
  text-align: right;
  white-space: nowrap;
  padding-left: 20px; }

.mix-split-item_alignTop {
  vertical-align: top; }

.mix-split-item_alignMiddle {
  vertical-align: middle; }

.mix-split-item_expand {
  width: 100%; }

.sort {
  position: relative;
  z-index: 1; }

.table {
  display: table;
  width: 100%; }

.table > * {
  display: table-cell;
  vertical-align: top; }

.table_middle > * {
  vertical-align: middle; }

.table_7up > * {
  width: 14.285714%; }

.mix-table_piped > * + * {
  border-left: 1px solid #efefef; }

.table-item_maxSpace {
  width: 100%; }

.mix-table-item_gutterL {
  padding-left: 20px; }

.mix-table-item_gutterLTight {
  padding-left: 10px; }

.mix-table-item_gutterR {
  padding-right: 20px; }

/**
@name Title
@description title bar, contains breadcrumbs, topic, and title of article / post

@markup
<div class="title title_head">
    <div class="wrap">
        <div class="row row_loose isHiddenSm isHiddemMd">
            <ul class="blocks mix-blocks_smushed">
                <li>
                    <div class="txt mix-txt_medium">
                        <a href="#0" class="link link_camo mix-link_arrow">Home</a>
                    </div>
                </li>
                <li>
                    <div class="txt mix-txt_medium">
                        <a href="#0" class="link link_camo mix-link_arrow">Blog</a>
                    </div>
                </li>
                <li>
                    <div class="txt">Search Results</div>
                </li>
            </ul>
        </div>

        <div class="split split_middle">
            <div class="split-item">
                <h1 class="hdg mix-hdg_camo">St. Luke's Blogs</h1>
            </div>
            <div class="split-item split-item_r mix-split-item_insetLeft">
                <ul class="nav nav_title">
                    <li class="nav-item nav-item_title mix-nav-item_center">
                        <div class="nav-item-hd">
                            <i class="icon icon_share-white mix-icon_sm isHiddenMd isHiddenLg"></i>

                            <div class="isHiddenSm">
                                Share
                                <span class="txt txt_arrow">
                                    <span class="arrow arrow_down mix-arrow_looseLeft"></span>
                                </span>
                            </div>
                        </div>
                        <ul class="nav-item-sub nav-item-sub_title">
                            <li>
                                <a href="#" class="listBtn">
                                    <div>
                                        <i class="icon icon_fb-white mix-icon_sm">facebook icon</i>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="listBtn">
                                    <div>
                                        <i class="icon icon_twitter-white mix-icon_sm">twitter icon</i>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="listBtn">
                                    <div>
                                        <i class="icon icon_google-white mix-icon_sm">google plus icon</i>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="listBtn">
                                    <div>
                                        <i class="icon icon_linked-white mix-icon_sm">linked in icon</i>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="listBtn">
                                    <div>
                                        <i class="icon icon_email-white mix-icon_sm">email icon</i>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="title">
    <div class="wrap">
        <div class="split split_middle">
            <div class="split-item">
                <div class="blocks mix-blocks_middle">
                    <div class="isHiddenSm">
                        <i class="icon icon_health mix-icon_xlg"></i>
                    </div>
                    <div>
                        <h1 class="hdg hdg_lg mix-hdg_camo">Health &amp; Wellness</h1>
                    </div>
                </div>
            </div>
            <div class="split-item split-item_r mix-split-item_insetLeft">
                <a href="#0" class="link" data-toggle data-toggle-hover>
                    <div class="blocks blocks_letters mix-blocks_middle">
                        <div class="isHiddenSm">
                            <div class="txt mix-txt_up">RSS</div>
                        </div>
                        <div>
                            <i class="icon icon_rss mix-icon_sm" data-ng-hide="isOn"></i>
                            <i class="icon icon_rss-light mix-icon_sm" data-ng-cloak data-ng-show="isOn"></i>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="title title_channel">
    <div class="wrap">
        <div class="split split_middle mix-split_smStack">
            <div class="split-item">
                <h1 class="hdg hdg_lg mix-hdg_camo">Dr. Pate's Prescription For Change</h1>
                <div class="row row_tightTop">
                    <div class="txt txt_3 mix-txt_light mix-txt_gray">St Luke's Health System’s Journey to Transform Health Care</div>
                </div>
            </div>
            <div class="split-item split-item_r">
                <a href="#0" class="link" data-toggle data-toggle-hover>
                    <div class="blocks blocks_letters mix-blocks_middle">
                        <div class="isHiddenSm">
                            <div class="txt mix-txt_up">RSS</div>
                        </div>
                        <div>
                            <i class="icon icon_rss mix-icon_sm" data-ng-hide="isOn"></i>
                            <i class="icon icon_rss-light mix-icon_sm" data-ng-cloak data-ng-show="isOn"></i>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="title title_head">
    <div class="wrap">
        <div class="row row_loose isHiddenSm isHiddemMd">
            <ul class="blocks mix-blocks_smushed">
                <li>
                    <div class="txt mix-txt_medium">
                        <a href="#0" class="link link_camo mix-link_arrow">Home</a>
                    </div>
                </li>
                <li>
                    <div class="txt mix-txt_medium">
                        <a href="#0" class="link link_camo mix-link_arrow">Services</a>
                    </div>
                </li>
                <li>
                    <div class="txt mix-txt_medium">
                        <a href="#0" class="link link_camo mix-link_arrow">Specialties</a>
                    </div>
                </li>
                <li>
                    <div class="txt">Pediatric Primary Care</div>
                </li>
            </ul>
        </div>

        <div class="split split_middle">
            <div class="split-item">
                <div class="row row_tight">
                    <ul class="blocks blocks_letters mix-blocks_baseline">
                        <li>
                            <div class="txt mix-txt_up mix-txt_medium">Specialty</div>
                        </li>
                        <li>
                            <a href="#0">
                                <div class="box box_flag">
                                    <i class="icon icon_childLogo mix-icon_childFlag"></i>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <h1 class="hdg mix-hdg_camo">St. Luke's Children's</h1>
            </div>
        </div>
    </div>
</div>
*/
.title {
  background-color: #e8f3fb;
  padding: 50px 0 50px 0;
  color: #002c77; }

.title_head {
  background-color: #002c77;
  padding: 20px 0 20px 0;
  color: #ffffff; }

.title_head:first-child {
  border-top: 3px solid #68ace5; }

.title_channel {
  padding: 30px 0 30px 0; }

.title_explore {
  padding: 20px 0 20px 0;
  text-align: center; }

/**
@name Wrap
@description Constrains content width to a page maximum. Keeps a minimum padding on each side of the content that varies by breakpoint. Optionally includes vertical padding via a mixin.
@markup
<div class="band"> <div class="wrap"> shrink wrapped content </div> </div>
<div class="band"> <div class="wrap wrap_nav"> no horizontal padding shrink wrapped content </div> </div>
<div class="band"> <div class="wrap wrap_vPad"> padded shrink wrapped content </div> </div>
<div class="band"> <div class="wrap wrap_vPad mix-wrap_thin"> thinner wrapped content </div> </div>
*/
.wrap {
  *zoom: 1;
  margin: auto;
  padding-right: 18px;
  padding-left: 18px;
  max-width: 1140px; }
  .wrap:after, .wrap:before {
    display: table;
    content: " "; }
  .wrap:after {
    clear: both; }

.wrap_nav {
  position: relative;
  z-index: 3;
  padding-right: 0;
  padding-left: 0; }

.wrap_vPad {
  padding-top: 34px;
  padding-bottom: 34px; }

.wrap_padBottom {
  padding-bottom: 20px; }

/**
@name Lined Sequence
@description When mulple instances of .lines are used in sequence, they will be separated by a horizontal line

@markup
<ul>
    <li class="lined">item 1</li>
    <li class="lined">item 2</li>
</ul>
*/
.lined + .lined {
  margin-top: 27px;
  border-top: 1px solid #cacaca;
  border-color: rgba(0, 0, 0, 0.07);
  padding-top: 27px; }

.lined + .lined_loose {
  margin-top: 34px;
  padding-top: 68px; }

/**
@name Lined Options
@description Similar to lined but with an psuedo element indicating which item is selected.

@markup
<div class="box">
    <div class="box box_blue">
        <div class="txt txt_1">
            <ul class="linedOptions">
                <li>
                    <div class="linedOptions-item">
                        <a href="#0" class="link link_camo">Overview</a>
                    </div>
                </li>
                <li>
                    <div class="linedOptions-item isActive">
                        <a href="#0" class="link link_camo">Health Tools</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

*/
.linedOptions > * {
  padding-bottom: 10px; }

.linedOptions > :last-child {
  padding-bottom: 0; }

.linedOptions > * + * {
  border-top: 1px solid #ffffff;
  padding-top: 10px; }

.linedOptions-item {
  position: relative;
  color: #002c77; }

.linedOptions-item.isActive {
  color: #68ace5; }

.linedOptions-item.isActive:after {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: -40px;
  border: 10px solid transparent;
  border-left-color: #e8f3fb;
  content: ""; }

.menuBtnList {
  position: relative;
  overflow: unset; }
  .menuBtnList:before {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    margin-right: -7px;
    margin-left: -7px;
    height: 7px;
    content: " "; }

.piped {
  font-size: 0; }

.piped > * {
  display: inline-block;
  position: relative;
  margin-right: 12px;
  padding-right: 12px;
  line-height: 1;
  font-size: 14px; }

.piped > *:after {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -0.5em;
  border-right: 1px solid #cacaca;
  height: 1em;
  content: " "; }

.piped > :last-child {
  margin-right: 0;
  padding-right: 0; }

.piped > :last-child:after {
  display: none; }

.piped_tight > * {
  margin-right: 6px;
  padding-right: 6px; }

/**
@name Button
@description Button

@markup
<div class="row">
    <a href="#0" class="btn">
        <div class="btn-text">Link Button</div>
    </a>
</div>
<div class="row">
    <a href="#0" class="btn btn_tight mix-btn_gray mix-btn_sm">
        <div class="btn-text">Filter Button (12) <i class="x x_circle"></i></div>
    </a>
</div>
<div class="row">
    <a href="#0" class="btn btn_iconLeft mix-btn_white">
        <div class="btn-icon">
            <div class="icon icon_health">link to health and wellness blog page</div>
        </div>
        <div class="btn-text">Button with icon</div>
    </a>
</div>
<div class="row">
    <a href="#0" class="btn btn_tight">
        <div class="btn-text">Just some padding</div>
    </a>
</div>
<div class="row">
    <ul class="blocks mix-blocks_sm1up mix-blocks_md1up mix-blocks_lg2up">
        <li>
            <a href="#0" class="btn btn_pair">
                <div class="btn-icon mix-btn-icon_pair">
                    <div class="icon icon_eye-white mix-icon_lg">link to health and wellness blog page</div>
                </div>
                <div class="btn-text btn-text_pair">Sympton Checker</div>
            </a>
        </li>
        <li>
            <a href="#0" class="btn btn_pair">
                <div class="btn-icon mix-btn-icon_pair">
                    <div class="icon icon_eye-white mix-icon_lg">link to health and wellness blog page</div>
                </div>
                <div class="btn-text btn-text_pair">drug interaction checker</div>
            </a>
        </li>
    </ul>
</div>

*/
.btn {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  /* fill horizontal space */
  position: relative;
  border: 0;
  border-radius: 6px;
  background-color: #68ace5;
  cursor: pointer;
  padding: 12px 20px 12px 20px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff; }

.btn_iconLeft {
  text-align: left;
  text-transform: none; }

.btn_pair {
  padding: 36px 20px 36px 20px; }

.btn_search {
  border-radius: inherit;
  height: 40px;
  width: 100%; }

.btn_submit {
  padding-right: 0;
  padding-left: 0;
  white-space: nowrap;
  width: 100%; }

.btn[disabled] {
  background-color: #cacaca !important;
  cursor: default !important; }

.mix-btn_white {
  background-color: #ffffff;
  color: #002c77; }

.mix-btn_gray {
  background-color: #e5e5e5;
  color: #666666; }

.mix-btn_darkGray {
  background-color: #666666; }

.mix-btn_lighter {
  background-color: #7db7e8; }

.mix-btn_sm {
  padding: 6px 12px 6px 12px; }

.btn_tight {
  display: inline-block;
  width: auto; }

.mix-btn_min {
  width: auto;
  min-width: 55px; }

.mix-btn_fill {
  width: 100%; }

/* content */
.btn-text {
  overflow: hidden;
  vertical-align: middle;
  text-align: left;
  line-height: 1.375;
  letter-spacing: 0.05em;
  font-size: 16px; }

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

.btn-text_pair {
  display: block;
  text-align: center;
  letter-spacing: 0; }

.mix-btn-text_uppercase {
  text-transform: uppercase; }

.mix-btn-text_lg {
  font-size: 16px; }

.mix-btn_sm > .btn-text {
  font-size: 11px; }

.btn_iconLeft > .btn-text {
  letter-spacing: 0;
  font-size: 14px; }

.btn-icon {
  float: left;
  margin-right: 10px;
  vertical-align: middle; }

.btn-icon_pair {
  display: block;
  margin: 0 0 15px 0; }

.mix-btn_fullWidth_atSm {
  width: 100%; }

/* decoration */
.mix-btn_inheritCorners {
  border-radius: inherit; }

.btn_iconBar {
  border-radius: 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset, 0 -1px 0 rgba(255, 255, 255, 0.15) inset, -1px 0 0 rgba(255, 255, 255, 0.15) inset, 1px 0 0 rgba(0, 0, 0, 0.15) inset;
  background-color: #002c77;
  padding-top: 11px;
  padding-bottom: 11px;
  text-align: left;
  font-size: 16px; }

.btn_iconBar > .btn-icon {
  margin-right: 8px; }

:checked + .btn {
  background-color: #002c77; }

/* base for button state overlays */
.btn:before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  text-align: center;
  color: #ffffff;
  font-size: 14px; }

/* loading overlay */
@-webkit-keyframes fade-forever {
  0%, 100% {
    opacity: 0.25; }
  50% {
    opacity: 1; } }

@-moz-keyframes fade-forever {
  0%, 100% {
    opacity: 0.25; }
  50% {
    opacity: 1; } }

@keyframes fade-forever {
  0%, 100% {
    opacity: 0.25; }
  50% {
    opacity: 1; } }

.mix-btn_loading {
  -webkit-animation: fade-forever 2s infinite ease-in-out;
  animation: fade-forever 2s infinite ease-in-out;
  position: relative;
  background-color: #b3b3b3 !important; }

.mix-btn_loading > .btn-text {
  visibility: hidden; }

.mix-btn_loading:before {
  content: "loading\2026"; }

/* success indicator */
.mix-btn_success {
  background-color: #66bd2b !important; }

.mix-btn_success > .btn-text {
  visibility: hidden; }

.mix-btn_success:before {
  content: "success!"; }

/* button top */
.btn_iconTop {
  padding-left: 5%;
  padding-right: 5%;
  text-align: center; }

.btn_iconTop > * {
  display: block;
  float: none;
  margin: 10px 0;
  text-align: center; }

.mix-btn_title {
  text-transform: none; }

/**
@name Link
@description Text links with hover states. By default links present with no underline (which isn't very accessible) but show an underline on hover.

@markup
<ul class="txt txt_2" style="color: red">
    <li><a href="#0" class="link">Learn more about cheetos.</a></li>
    <li><a href="#0" class="link link_camo">Camo extension inherits color.</a></li>
    <li><a href="#0" class="link link_dkBlue">Dark blue link.</a></li>
    <li><a href="#0" class="link link_ltBlue">Light blue link.</a></li>
    <li><a href="#0" class="link link_ltBlue">White link.</a></li>
    <li><a href="#0" class="link mix-link_arrow">Link with arrowj</a></li>
    <li><a href="#0" class="link mix-link_caps mix-link_arrow">Capitalized Link with arrow.</a></li>
</ul>
*/
/**
 * [1] remove link underline in IE
 */
.link {
  -webkit-transition: 0.1s;
  -moz-transition: 0.1s;
  -ms-transition: 0.1s;
  transition: 0.1s;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  color: #002c77; }

/* colors */
.link_camo {
  color: inherit; }

.link_dkBlue {
  color: #002c77; }

.link_white {
  color: #ffffff; }

.link_ltBlue {
  color: #68ace5; }

.mix-link_url {
  display: inline-block;
  max-width: 100%;
  word-break: break-word;
  word-wrap: break-word; }

/* state */
:checked + .link,
.link.isOn {
  color: #68ace5; }

[disabled] + .link {
  color: #cacaca !important;
  cursor: default; }

/* decoration */
.mix-link_arrow::after {
  display: inline-block;
  font-family: "icomoon";
  content: "\e600";
  margin-left: 0.5em;
  font-size: 0.7em;
  display: inline-block;
  text-decoration: none; }

.mix-link_arrowLeft::before {
  display: inline-block;
  font-family: "icomoon";
  content: "\e600";
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
  margin-right: 0.5em;
  font-size: 0.7em;
  display: inline-block;
  text-decoration: none; }

.mix-link_up {
  text-transform: capitalize; }

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

.mix-link_md {
  font-weight: 500; }

.mix-link_nobreak {
  display: inline-block; }

.mix-link_wrapper {
  position: relative; }

/* simplified styles for the more link */
.link_more {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 500; }
  .link_more::after {
    display: inline-block;
    font-family: "icomoon";
    content: "\e600";
    margin-left: 0.5em;
    font-size: 0.7em;
    display: inline-block;
    text-decoration: none; }

/**
@name List Button
@description A button style for sequential vertical buttons in a menu. Can contain an option icon.

@markup
<ul class="vList vList_buttons">
    <li>
        <a href="#" class="listBtn">
            <div class="listBtn-l">
                <i class="icon icon_search"></i>
            </div>
            <div class="listBtn-txt">
                Button text
            </div>
            <div class="listBtn-r">
                <div class="count">5</div>
            </div>
        </a>
    </li>
    <li>
        <a href="#" class="listBtn listBtn_dark">
            <div class="listBtn-l">
                <i class="icon icon_search"></i>
            </div>
            <div class="listBtn-txt">
                Button text
            </div>
            <div class="listBtn-r">
                <div class="count">5</div>
            </div>
        </a>
    </li>
</ul>
*/
.listBtn {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: background-color 0.2s, border-color 0.2s;
  -moz-transition: background-color 0.2s, border-color 0.2s;
  -ms-transition: background-color 0.2s, border-color 0.2s;
  transition: background-color 0.2s, border-color 0.2s;
  background-color: #68ace5;
  border-top-color: #74baec;
  border-bottom-color: #529ee1;
  display: table;
  border-width: 1px 0 1px 0;
  border-style: solid;
  border-radius: inherit;
  cursor: pointer;
  width: 100%;
  height: 48px;
  text-decoration: none;
  color: #ffffff; }

/* color variations */
.listBtn_dark {
  background-color: #002c77;
  border-top-color: #004392;
  border-bottom-color: #00236c; }

/* submodules */
.listBtn > * {
  display: table-cell;
  padding: 0 16px 0 16px;
  vertical-align: middle; }

.listBtn-txt {
  width: 100%;
  text-transform: uppercase; }

.mix-listBtn-txt_none {
  text-transform: none; }

.listBtn-l {
  padding-right: 0;
  padding-left: 10px; }

.listBtn-l + .listBtn-txt {
  padding-left: 10px; }

.listBtn-r {
  padding-left: 0; }

.menuBtn {
  display: block;
  border: 1px solid #efefef;
  padding: 16px;
  text-decoration: none;
  color: #002c77; }

.menuBtn_alt {
  background-color: #e8f3fb; }

.phone {
  cursor: default;
  text-decoration: none;
  white-space: nowrap;
  color: inherit; }

/**
@name Arrow Icon
@description Shows an arrow icon inline that can point different directions.

@markup
text followed by arrow <i class="arrow"></i>
<i class="arrow arrow_left"></i>
<i class="arrow arrow_down"></i>
<i class="arrow arrow_up"></i>
*/
.arrow {
  display: inline-block;
  position: relative;
  width: 1em;
  height: 1em;
  text-align: center; }

.arrow::before {
  display: inline-block;
  font-family: "icomoon";
  content: "\e600"; }

.mix-arrow_solid {
  vertical-align: middle; }

.mix-arrow_solid::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-left: 0.45em solid;
  border-top: 0.45em solid transparent;
  border-bottom: 0.45em solid transparent;
  width: 0;
  height: 0;
  content: " "; }

.arrow_down {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg); }

.arrow_up {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg); }

.arrow_left {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1); }

.arrow_crumb {
  -webkit-transform: scaleY(0.5);
  -moz-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  margin-top: -1em; }

.mix-arrow_looseLeft {
  margin-left: 6px; }

.arrow.isOn::before {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1); }

.mix-arrow_inline {
  font-size: 0.7em; }

.mix-arrow_lg {
  font-size: 20px; }

.mix-arrow_block {
  display: block;
  margin: auto; }

/**
@name Icon
@description This is an inline icon used for accompanying text items. Used primarily for action nav items.

@markup
<div class="box box_blue">
    <div class="row"><h2 class="hdg">Icon Library</h2></div>
    <ul class="blocks">
        <li><i class="icon icon_article"></i></li>
        <li><i class="icon icon_bill"></i></li>
        <li><i class="icon icon_calculator"></i></li>
        <li><i class="icon icon_calendar"></i></li>
        <li><i class="icon icon_clinic"></i></li>
        <li><i class="icon icon_clinical"></i></li>
        <li><i class="icon icon_community"></i></li>
        <li><i class="icon icon_computer"></i></li>
        <li><i class="icon icon_criteria"></i></li>
        <li><i class="icon icon_cross"></i></li>
        <li><i class="icon icon_directions"></i></li>
        <li><i class="icon icon_donation"></i></li>
        <li><i class="icon icon_download"></i></li>
        <li><i class="icon icon_eye"></i></li>
        <li><i class="icon icon_folder"></i></li>
        <li><i class="icon icon_geo"></i></li>
        <li><i class="icon icon_group"></i></li>
        <li><i class="icon icon_health"></i></li>
        <li><i class="icon icon_list"></i></li>
        <li><i class="icon icon_loc"></i></li>
        <li><i class="icon icon_menu"></i></li>
        <li><i class="icon icon_pencil"></i></li>
        <li><i class="icon icon_person"></i></li>
        <li><i class="icon icon_phone"></i></li>
        <li><i class="icon icon_pills"></i></li>
        <li><i class="icon icon_price"></i></li>
        <li><i class="icon icon_provider"></i></li>
        <li><i class="icon icon_search"></i></li>
        <li><i class="icon icon_services"></i></li>
        <li><i class="icon icon_share"></i></li>
        <li><i class="icon icon_specialty"></i></li>
        <li><i class="icon icon_star"></i></li>
        <li><i class="icon icon_stories"></i></li>
        <li><i class="icon icon_volunteer"></i></li>

        <!-- social -->
        <li><i class="icon icon_google"></i></li>
        <li><i class="icon icon_fb"></i></li>
        <li><i class="icon icon_twitter"></i></li>
        <li><i class="icon icon_yt"></i></li>
        <li><i class="icon icon_rss"></i></li>
        <li><i class="icon icon_twitter"></i></li>
        <li><i class="icon icon_linked"></i></li>
    </ul>
</div>
<div class="box box_blue">
    <div class="row"><h2 class="hdg">Light Icon Library</h2></div>
    <ul class="blocks">
        <li><i class="icon icon_article-light"></i></li>
        <li><i class="icon icon_bill-light"></i></li>
        <li><i class="icon icon_calculator-light"></i></li>
        <li><i class="icon icon_calendar-light"></i></li>
        <li><i class="icon icon_clinic-light"></i></li>
        <li><i class="icon icon_clinical-light"></i></li>
        <li><i class="icon icon_community-light"></i></li>
        <li><i class="icon icon_computer-light"></i></li>
        <li><i class="icon icon_criteria-light"></i></li>
        <li><i class="icon icon_cross-light"></i></li>
        <li><i class="icon icon_directions-light"></i></li>
        <li><i class="icon icon_donation-light"></i></li>
        <li><i class="icon icon_download-light"></i></li>
        <li><i class="icon icon_eye-light"></i></li>
        <li><i class="icon icon_folder-light"></i></li>
        <li><i class="icon icon_geo-light"></i></li>
        <li><i class="icon icon_group-light"></i></li>
        <li><i class="icon icon_health-light"></i></li>
        <li><i class="icon icon_list-light"></i></li>
        <li><i class="icon icon_loc-light"></i></li>
        <li><i class="icon icon_menu-light"></i></li>
        <li><i class="icon icon_pencil-light"></i></li>
        <li><i class="icon icon_person-light"></i></li>
        <li><i class="icon icon_phone-light"></i></li>
        <li><i class="icon icon_pills-light"></i></li>
        <li><i class="icon icon_price-light"></i></li>
        <li><i class="icon icon_provider-light"></i></li>
        <li><i class="icon icon_search-light"></i></li>
        <li><i class="icon icon_services-light"></i></li>
        <li><i class="icon icon_share-light"></i></li>
        <li><i class="icon icon_specialty-light"></i></li>
        <li><i class="icon icon_star-light"></i></li>
        <li><i class="icon icon_stories-light"></i></li>
        <li><i class="icon icon_volunteer-light"></i></li>

        <!-- social -->
        <li><i class="icon icon_google-light"></i></li>
        <li><i class="icon icon_fb-light"></i></li>
        <li><i class="icon icon_twitter-light"></i></li>
        <li><i class="icon icon_yt-light"></i></li>
        <li><i class="icon icon_rss-light"></i></li>
        <li><i class="icon icon_twitter-light"></i></li>
        <li><i class="icon icon_linked-light"></i></li>

    </ul>
</div>
<div class="box box_maroon">
    <div class="row"><h2 class="hdg mix-hdg_camo">White Icon Library</h2></div>
    <ul class="blocks">
        <li><i class="icon icon_article-white"></i></li>
        <li><i class="icon icon_bill-white"></i></li>
        <li><i class="icon icon_calculator-white"></i></li>
        <li><i class="icon icon_calendar-white"></i></li>
        <li><i class="icon icon_clinic-white"></i></li>
        <li><i class="icon icon_clinical-white"></i></li>
        <li><i class="icon icon_community-white"></i></li>
        <li><i class="icon icon_computer-white"></i></li>
        <li><i class="icon icon_criteria-white"></i></li>
        <li><i class="icon icon_cross-white"></i></li>
        <li><i class="icon icon_directions-white"></i></li>
        <li><i class="icon icon_donation-white"></i></li>
        <li><i class="icon icon_download-white"></i></li>
        <li><i class="icon icon_eye-white"></i></li>
        <li><i class="icon icon_folder-white"></i></li>
        <li><i class="icon icon_geo-white"></i></li>
        <li><i class="icon icon_group-white"></i></li>
        <li><i class="icon icon_health-white"></i></li>
        <li><i class="icon icon_list-white"></i></li>
        <li><i class="icon icon_loc-white"></i></li>
        <li><i class="icon icon_menu-white"></i></li>
        <li><i class="icon icon_pencil-white"></i></li>
        <li><i class="icon icon_person-white"></i></li>
        <li><i class="icon icon_phone-white"></i></li>
        <li><i class="icon icon_pills-white"></i></li>
        <li><i class="icon icon_price-white"></i></li>
        <li><i class="icon icon_provider-white"></i></li>
        <li><i class="icon icon_search-white"></i></li>
        <li><i class="icon icon_services-white"></i></li>
        <li><i class="icon icon_share-white"></i></li>
        <li><i class="icon icon_specialty-white"></i></li>
        <li><i class="icon icon_star-white"></i></li>
        <li><i class="icon icon_stories-white"></i></li>
        <li><i class="icon icon_volunteer-white"></i></li>

        <!-- social -->
        <li><i class="icon icon_google-white"></i></li>
        <li><i class="icon icon_fb-white"></i></li>
        <li><i class="icon icon_twitter-white"></i></li>
        <li><i class="icon icon_yt-white"></i></li>
        <li><i class="icon icon_rss-white"></i></li>
        <li><i class="icon icon_twitter-white"></i></li>
        <li><i class="icon icon_linked-white"></i></li>

    </ul>
</div>
*/
.icon {
  font-size: 28px;
  overflow: hidden;
  text-align: left;
  line-height: 10000;
  text-indent: -10000px;
  display: inline-block;
  position: relative;
  top: -0.05em;
  border-radius: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  width: 1em;
  max-width: initial;
  height: 1em;
  vertical-align: middle; }

.icon_childLogo {
  width: 304px;
  height: 62px; }

.mix-icon_sm {
  font-size: 20px; }

.mix-icon_md {
  font-size: 24px; }

.mix-icon_lg {
  font-size: 40px; }

.mix-icon_xlg {
  font-size: 50px; }

.mix-icon_xsm {
  font-size: 14px; }

.mix-icon_em {
  font-size: 1em; }

.mix-icon_2em {
  font-size: 2em;
  top: 0; }

.mix-icon_left {
  margin-right: 0.25em; }

.mix-icon_nav {
  font-size: 17px;
  margin: 0;
  vertical-align: baseline; }

.mix-icon_childHub {
  width: 114px;
  height: 24px; }

.mix-icon_childFlag {
  width: 98px;
  height: 20px; }

[class*=icon_pills] {
  width: 2.4055em; }

/**
@name Info
@description Circle that surrounds a character

@markup
<div class="box">
    <i class="info"></i>
</div>
<div class="box box_maroon">
    <i class="info"></i>
</div>
*/
.info {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  border: 1px solid;
  border-radius: 100%;
  padding-top: 1px;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  text-align: center;
  text-transform: none;
  font-family: serif;
  font-size: 11px;
  font-weight: 600; }

.info:after {
  position: relative;
  top: -1px;
  content: "i"; }

.info_dkBlue {
  color: #002c77; }

/**
@name Accordion
@description contains a series of collapsible panels that can be individually opened.
@markup
<div class="row" data-toggle-group="accordion">
    <ul class="piped">
        <li><a class="link mix-link_up" href="#0" data-ng-click="off()"><span class="txt">collapse all</span></a></li>
        <li><a class="link mix-link_up" href="#0" data-ng-click="on()"><span class="txt">expand all</span></a></li>
    </ul>
</div>

<div class="accordion">
    <div class="accordion-item" data-toggle="accordion">
        <div class="accordion-item-hd isActive" data-toggle-class data-toggle-trigger>
            Item 1
        </div>
        <div class="accordion-item-bd isActive" data-toggle-class>
            Accordion Body
        </div>
    </div>
    <div class="accordion-item" data-toggle="accordion">
        <div class="accordion-item-hd" data-toggle-class data-toggle-trigger>
            Item 2
        </div>
        <div class="accordion-item-bd" data-toggle-class>
            Accordion Body
        </div>
    </div>
</div>
*/
.accordion-item-hd {
  cursor: pointer; }

.accordion-item-hd:after {
  display: inline-block;
  font-family: "icomoon";
  content: "\e600";
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  color: #002c77; }

.accordion-item-hd.isOn {
  font-weight: 600; }

.accordion-item-hd.isOn:after {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg); }

.accordion-item-bd {
  display: none;
  background-color: #f9f9f9; }

.accordion-item-bd.isOn {
  display: block; }

.browsePanel {
  display: none;
  overflow: hidden; }

.browsePanel.isOn,
.browsePanel.isActive {
  display: block; }

.browsePanel-hd {
  position: relative;
  z-index: 2; }

.browsePanel-bd {
  position: relative;
  z-index: 2; }

/**
@name Checkbox
@description Native checkbox that has allows label text to wrap nicely (not under the checkbox)

@markup
<div class="box box_blue" style="width: 200px">
    <div class="row">
        <label for="ugly">
            <input type="checkbox" id="ugly">
            Normal unstyled ugly wrapping
        </label>
    </div>
    <label for="pretty" class="checkbox">
        <input type="checkbox" id="pretty">
        Nice and pretty wrapping :)
    </label>
    <label for="prettier" class="checkbox">
        <input type="checkbox" id="pretty">
        <span class="checkbox-label">Nice and pretty wrapping with custom checkbox</span>
    </label>
</div>
*/
.checkbox {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *zoom: 1;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: block;
  position: relative;
  z-index: 0;
  padding-left: 34px;
  font-size: 14px; }
  .checkbox:after, .checkbox:before {
    display: table;
    content: " "; }
  .checkbox:after {
    clear: both; }

.checkbox > input {
  position: absolute;
  left: 0;
  z-index: -10000; }

.checkbox_textLg {
  font-size: 16.8px; }

/* label */
.checkbox-label {
  display: inline-block;
  cursor: pointer;
  padding-top: 0.15em; }

.checkbox_textLg > .checkbox-label {
  padding-top: 0; }

.checkbox-label:before,
.checkbox-label:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: " "; }

.checkbox-label:before {
  z-index: 2;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  box-shadow: inset 0 10px 10px #ffffff;
  background-color: #f3f3f3; }

.isOn > .checkbox-label:after,
:checked + .checkbox-label:after {
  z-index: 3;
  background-image: url("../media/images/check.png");
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 14px 14px; }

[disabled] + .checkbox-label {
  opacity: 0.5;
  cursor: default; }

/* text size alignment */
.checkbox-label_menu {
  padding-top: 0.05em; }

/* radio */
.checkbox-label_radio:before,
.checkbox-label_radio:after,
[type=radio] + .checkbox-label:before,
[type=radio] + .checkbox-label:after {
  border-radius: 50%; }

.isOn > .checkbox-label_radio:after,
[type=radio]:checked + .checkbox-label:after {
  margin: 3px;
  background-color: #68ace5;
  background-image: none;
  width: 14px;
  height: 14px; }

/**
@name Cloakbox
@description A hidden checkbox element that can optionally hide the content that follows it.

@markup
<label>
    <input class="cloakbox" type="checkbox" />
    <span> I toggle a hidden checkbox </span>
</label>
<label>
    <input class="cloakbox cloakbox_hideLabel" type="checkbox" checked />
    <span> Click me and I vanish </span>
</label>

*/
.cloakbox {
  display: block;
  position: relative;
  visibility: hidden;
  opacity: 0;
  z-index: -10000;
  margin: 0;
  height: 0; }

.cloakbox_hideLabel + * {
  display: none; }

.cloakbox_hideLabel:checked + * {
  display: block; }

.datePicker {
  position: relative;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center; }
  .datePicker.isOn {
    z-index: 5000; }
  .datePicker.isDisabled {
    opacity: 0.5; }

.datePicker-pop {
  display: none;
  position: absolute;
  top: 0;
  left: 0; }
  .isOn > .datePicker-pop {
    display: block; }

/**
@name Dropdown
@description custom select box
*/
.dropdown {
  width: 100%;
  position: relative;
  border: 1px solid #efefef;
  border-radius: 6px;
  background: #ffffff url("../media/images/dropdown-bg.png") 100% 50% repeat-y;
  height: 34px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-transform: uppercase;
  line-height: 32px;
  color: #002c77; }

.dropdown_blog {
  min-width: 155px; }

.dropdown-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  z-index: 2;
  cursor: pointer;
  padding-right: 48px;
  padding-left: 12px;
  width: 100%;
  min-height: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: left; }

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  border-top: 1px solid #b3b3b3;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background-color: #ffffff;
  padding: 12px;
  text-align: left;
  text-transform: none;
  line-height: 1.22;
  color: #666666;
  font-size: 14px; }

/* open state */
.dropdown.isOn {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.dropdown.isOn::after {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg); }

.dropdown-menu.isOn {
  position: relative;
  display: block;
  z-index: 5000; }

/**
@name Form Field
@description custom styled form fields

@markup
<input class="field" type="text" placeholder="Placeholder text"/>
<input class="field mix-field_isInvalid" type="text" placeholder="Placeholder text"/>
<input class="field mix-field_fullWidth" type="text" placeholder="Placeholder text"/>
<input class="field mix-field_inset" type="text" placeholder="Placeholder text"/>
*/
.field {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  border: 1px solid #efefef;
  border-radius: 6px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  padding-left: 12px;
  height: 35px;
  font-size: 16px; }
  .field::-webkit-input-placeholder {
    color: #cacaca; }
  .field:-moz-placeholder {
    /* Firefox 18- */
    color: #cacaca; }
  .field::-moz-placeholder {
    /* Firefox 19+ */
    color: #cacaca; }
  .field:-ms-input-placeholder {
    color: #cacaca; }

.field:focus {
  border-color: #7db7e8 !important; }

.field::-ms-clear {
  display: none; }

.field::-webkit-calendar-picker-indicator {
  display: none; }

.mix-field_fill {
  width: 100%; }

.mix-field_tall {
  height: 45px; }

.field_area {
  width: 665px;
  min-height: 230px;
  max-width: 100%; }

.field_search {
  border-radius: inherit;
  box-shadow: none;
  padding-left: 14px;
  width: 100%;
  height: 40px;
  color: #002c77;
  font-family: "Neue Helvetica W01", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 300; }

.mix-field_inset {
  box-shadow: inset 0 0 10px rgba(239, 239, 239, 0.75); }

.mix-field_fullWidth {
  width: 100%; }

.mix-field_isInvalid {
  border: 2px solid #cd012f; }

/* decoration */
.mix-field_inheritCorners {
  border-radius: inherit; }

/* input states */
.field[disabled] {
  color: #666666 !important;
  opacity: 0.5; }

/* angular validation styles */
.field.ng-invalid,
.field.input-validation-error {
  border: 2px solid #cd012f; }

.field.ng-untouched:not(.input-validation-error) {
  border: 1px solid #efefef; }

/**
@name Grid Carousel
@description A grid on desktop that condenses to a carousel on tablet and mobile
@markup
<div class="gridCarousel" data-grid-carousel>
    <div class="gridCarousel-bd">
    <ul data-grid-carousel-grid class="blocks mix-blocks_isCarousel mix-blocks_sm1up mix-blocks_md2up mix-blocks_lg4up">
        <li> <div class="box"> item 1 </div> </li>
        <li> <div class="box"> item 2 </div> </li>
        <li> <div class="box"> item 3 </div> </li>
        <li> <div class="box"> item 4 </div> </li>
    </ul>
    </div>
    <ul class="gridCarousel-ft" data-grid-carousel-ft></ul>
</div>

<div class="gridCarousel" data-grid-carousel data-grid-carousel-up="1,1">
    <div class="gridCarousel-bd">
        <ul data-grid-carousel-grid class="blocks mix-blocks_isCarousel mix-blocks_sm1up mix-blocks_md1up mix-blocks_lg4up">
            <li> <div class="box"> item 1 </div> </li>
            <li> <div class="box"> item 2 </div> </li>
            <li> <div class="box"> item 3 </div> </li>
            <li> <div class="box"> item 4 </div> </li>
        </ul>
    </div>
    <ul class="gridCarousel-ft" data-grid-carousel-ft></ul>
</div>

*/
.gridCarousel {
  position: relative;
  z-index: 1; }

.gridCarousel-bd {
  overflow: visible; }

.gridCarousel-ft {
  margin-top: 22px;
  min-height: 27px;
  text-align: center;
  font-size: 0; }

.gridCarousel-ft > * {
  display: inline-block;
  border-radius: 10000px;
  cursor: pointer;
  padding: 9px; }

.gridCarousel-ft > *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
  display: block;
  border: 2px solid #cacaca;
  border-radius: inherit;
  background-color: #ffffff;
  cursor: pointer;
  width: 9px;
  height: 9px;
  content: " "; }

.gridCarousel-ft > .isActive:before {
  -webkit-transform: scale(1.2222222222);
  -moz-transform: scale(1.2222222222);
  -ms-transform: scale(1.2222222222);
  transform: scale(1.2222222222);
  border-width: 0;
  background-color: #68ace5; }

/* ---------------------------------------------------------------------
 Home Hero
 Hero landmark layout for the homepage
------------------------------------------------------------------------ */
.homeHero {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  position: relative;
  background-color: #efefef;
  overflow: hidden; }

.homeHero-slides {
  display: block;
  position: relative;
  z-index: 10;
  margin: 0 auto;
  padding-top: 83.75%;
  width: 100%;
  max-width: 1680px; }

.homeHero-slides > * {
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  width: 100%;
  height: 100%; }

.homeHero-slides > .isActive {
  opacity: 1; }

.homeHero-nav {
  position: relative;
  z-index: 20; }

.homeHeroSlide {
  display: block;
  width: 100%; }

.homeHeroSlide-img {
  display: block;
  border-radius: 0;
  width: 100%; }

.locationMenu {
  display: inline-block;
  position: relative;
  z-index: 1; }

.locationMenu_dark {
  color: #002c77;
  font-weight: 500; }

.locationMenu-selected {
  display: inline;
  position: relative;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  padding: 0.25em 0.3em;
  padding-right: 1.8em;
  color: #68ace5; }

.locationMenu-selected:hover,
.locationMenu-selected.isOn {
  border-color: rgba(104, 172, 229, 0.2); }

.locationMenu-selected:after,
.locationMenu-selected:before {
  -webkit-transform: skewY(-42deg);
  -moz-transform: skewY(-42deg);
  -ms-transform: skewY(-42deg);
  transform: skewY(-42deg);
  position: absolute;
  top: 0;
  right: 0.3em;
  bottom: 0;
  margin: auto;
  border-bottom: 1px solid;
  width: 0.4em;
  height: 0;
  content: " "; }

.locationMenu-selected:after {
  -webkit-transform: skewY(42deg);
  -moz-transform: skewY(42deg);
  -ms-transform: skewY(42deg);
  transform: skewY(42deg);
  right: 0.7em; }

.locationMenu-list {
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 0;
  display: none;
  position: absolute;
  left: 50%;
  margin: 10px 0;
  border-radius: 6px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
  padding: 20px;
  text-align: left;
  white-space: nowrap; }

.siteHd-nav-eyebrow .locationMenu-list {
  bottom: unset; }

.locationMenu-list.isOn {
  display: block; }

.locationMenu-list_footer {
  top: auto;
  bottom: 100%; }

.locationMenu-list_footer:before {
  -webkit-transform: translateX(-50%) scaleX(2);
  -moz-transform: translateX(-50%) scaleX(2);
  -ms-transform: translateX(-50%) scaleX(2);
  transform: translateX(-50%) scaleX(2);
  top: 100%;
  bottom: auto; }

.locationMenu-selected_bold {
  color: #002c77; }

.locationMenu-selected_bold:hover,
.locationMenu-selected_bold.isOn {
  border-color: rgba(0, 44, 119, 0.1); }

.miniCal {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border: 1px solid #efefef;
  border-radius: 6px;
  background-color: #ffffff;
  overflow: hidden;
  width: 238px;
  line-height: 34px;
  text-align: center;
  text-transform: uppercase; }

.miniCal-hd {
  overflow: hidden;
  background-color: #002c77;
  color: #ffffff;
  line-height: 32px; }

.miniCal-hd-prev,
.miniCal-hd-next {
  position: absolute;
  top: 0;
  cursor: pointer;
  width: 34px;
  height: 32px; }

.miniCal-hd-prev {
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
  left: 0; }

.miniCal-hd-next {
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
  right: 0; }

.miniCal-hd-text {
  font-size: 14px;
  font-weight: 600; }

.miniCal-bd > * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  width: 34px;
  line-height: 34px;
  font-size: 10px;
  font-weight: 500; }

.miniCal-bd_dates > * {
  cursor: pointer;
  border-top: 1px solid #efefef;
  border-right: 1px solid #efefef; }
  .miniCal-bd_dates > *:nth-child(7n) {
    border-right: 0; }

.miniCal-bd-i_out {
  color: #cacaca; }

.miniCal-bd-i_highlight {
  background-color: #68ace5;
  color: #ffffff; }

.miniCal-bd-i_softHighlight {
  background-color: #7db7e8;
  color: #ffffff; }

.miniCal-bd-i.isDisabled {
  background-color: #f8f8f8;
  color: #cacaca;
  cursor: default; }

/**
@name Modal
@description Popup modal triggered by a link. Can contain arbitrary html content which is pulled directly from a url. Without JS enabled, it falls back to being a standard link.

@markup
<a class="link mix-link_arrow"
href="https://www.youtube.com/watch?v=J---aiyznGQ"
title="Excepteur Sint Occaecat Cupidatat Non Proident"
data-modal-trigger="modal_video.html"
> modal trigger link </a>

<!-- actual modal markup should appear once per page near bottom of <body> -->
<div class="modal" data-modal>
    <div class="modal-bd">
        <div class="row row_loose" data-ng-click="close()">
            <div class="split">
                <div class="split-item split-item_l mix-split-item_alignTop">
                    <h1 class="txt txt_2 mix-txt_bold mix-txt_dkBlue" data-ng-bind="title"></h1>
                </div>
                <div class="split-item split-item_r mix-split-item_alignTop">
                    <i class="x x_lg"></i>
                </div>
            </div>
        </div>
        <div data-ng-bind-html="html"> </div>
    </div>
</div>
*/
/**
* [1] centered
* [2] hidden by default
*/
.modal {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
  overflow-y: auto; }

.modal.isOn {
  display: block; }

.modal.isOff {
  display: none !important; }

.modal:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 1;
  content: " "; }

.modal-bd {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  margin: auto;
  border-radius: 12px;
  box-shadow: 0 0 34px rgba(0, 0, 0, 0.5);
  background: #ffffff;
  padding: 34px;
  width: 90%;
  width: calc(100% - 40px);
  max-width: 950px; }

.modal.isVerticallyCentered {
  display: -webkit-box;
  display: -webkit-flex;
  /* display: -ms-flexbox; */
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center; }

.modal-bd_alpha {
  max-width: 1024px; }

/**
@name Native Select
@description Styling for the native select element.

@markup
<div class="row">
    <select class="nativeSelect">
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
</div>
<div class="row">
    <select class="nativeSelect mix-nativeSelect_fullWidth">
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
</div>
<div class="row">
    <select class="nativeSelect mix-nativeSelect_isInvalid">
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
</div>
*/
.nativeSelect {
  display: block;
  border: 1px solid #efefef;
  background: #ffffff;
  height: 38px;
  color: #002c77;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase; }

.nativeSelect[disabled] {
  color: #666666 !important;
  opacity: 0.5; }

.mix-nativeSelect_fullWidth {
  width: 100%; }

.mix-nativeSelect_fullWidthAtSm {
  width: 100%; }

.mix-nativeSelect_isInvalid {
  border: 2px solid #cd012f; }

/* angular validation styles */
.nativeSelect.ng-invalid {
  border: 2px solid #cd012f; }

.nativeSelect.ng-untouched {
  border: 1px solid #efefef; }

.partnerPopup {
  position: relative;
  z-index: 10; }

.partnerPopup-popup {
  display: none;
  position: absolute;
  margin-top: 20px;
  border-radius: 6px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  background-color: #e8f3fb;
  padding: 20px; }

.partnerPopup-popup.isOn {
  display: block; }

.partnerPopup-popup:before {
  -webkit-transform: scaleY(-1) translateX(-50%) scaleX(2);
  -moz-transform: scaleY(-1) translateX(-50%) scaleX(2);
  -ms-transform: scaleY(-1) translateX(-50%) scaleX(2);
  transform: scaleY(-1) translateX(-50%) scaleX(2);
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin: auto;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  line-height: 0.7;
  color: #e8f3fb;
  content: "\25BC"; }

.radioBtn {
  position: relative; }

.radioBtn-radio {
  position: absolute;
  visibility: hidden;
  z-index: -10000; }

/**
@name Readmore Area
@description contains a vertically truncated box of content that can be toggled to show the full content. Optionally, this module can be used without the footer or the data attributes to simply limit an area of text to a max height without any scripting involved.
@markup
<div class="row">
    <section class="box">
        <div class="readmore" data-toggle data-toggle-class>

            <div class="readmore-bd" data-readmore>
                <div class="userContent">
                    <h1>Readmore areas are designed to be placed in a white box. The fade at the bottom is done using a white overlay.</h1>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor.</p>
                    <p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor.</p>
                    <p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue.</p>
                </div>
            </div>

            <div class="readmore-ft" data-readmore-ft></div>
        </div>
    </section>
</div>
<div class="row">
    <section class="box">
        <div class="readmore readmore_short" data-toggle data-toggle-class>

            <div class="readmore-bd" data-readmore>
                <div class="userContent">
                    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor.</p>
                    <p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor.</p>
                    <p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue.</p>
                </div>
            </div>

            <div class="readmore-ft" data-readmore-ft></div>
        </div>
    </section>
</div>
<section class="box">
    <div class="readmore" data-toggle data-toggle-class>

        <div class="readmore-bd" data-readmore>
            <div class="userContent">
                <h1> Short readmore areas will hide the toggle footer if appropriate.</h1>
                <p>Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
            </div>
        </div>

        <div class="readmore-ft" data-readmore-ft></div>
    </div>
</section>
*/
.readmore {
  position: relative;
  overflow: hidden; }
  .readmore:after {
    position: absolute;
    right: 0;
    top: 218px;
    left: 0;
    height: 20px;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, white));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
    /* IE6-9 */
    content: " "; }

.readmore.isOn:after {
  display: none; }

.readmore-bd {
  position: relative;
  margin-bottom: 20px;
  max-height: 238px;
  overflow: hidden; }

.readmore-ft {
  position: absolute;
  top: 238px;
  right: 0;
  left: 0;
  background: #ffffff;
  height: 20px;
  line-height: 20px; }
  .isOn > .readmore-ft {
    position: static; }

.isOn > .readmore-bd {
  max-height: none !important; }

.readmore_short:after {
  top: 58px; }

.readmore_short > .readmore-bd {
  max-height: 78px; }

.readmore_short > .readmore-ft {
  top: 78px; }

.resultsPanel {
  display: none; }

.resultsPanel.isOn,
.resultsPanel.isActive {
  display: block; }

/**
@name Custom Select Box
@description A custom skin for select boxes using Angular directives.

@markup

<span class="select" data-select>
    <span class="select-txt" data-ng-bind="text"></span>
    <select class="select-list" data-select-list>
        <option> Cats vs. Dogs -- which is best? </option>
        <option value="0"> Felines are fur superior to canines </option>
        <option value="1"> Dogs are great! </option>
    </select>
</span>
*/
.select {
  display: block;
  position: relative;
  cursor: pointer; }

.select-txt {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid #efefef;
  border-radius: 6px;
  background-color: #ffffff;
  padding-right: 36px;
  padding-left: 12px;
  height: 38px;
  line-height: 38px;
  color: #002c77;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase; }
  .select-txt:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
    background: #ffffff url("../media/images/dropdown-bg.png") 100% 50% repeat;
    width: 36px;
    content: " "; }

:focus ~ .select-txt {
  border-color: #68ace5 !important; }

.select-list {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  width: 100%;
  height: 100%; }

.shield {
  -webkit-transition: opacity 0.2s, visibility 0.2s;
  -moz-transition: opacity 0.2s, visibility 0.2s;
  -ms-transition: opacity 0.2s, visibility 0.2s;
  transition: opacity 0.2s, visibility 0.2s;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 10000;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.5); }

.shield_isActive {
  visibility: visible;
  opacity: 1; }

/**
@name Textarea
@description Styling for the native textarea

@markup
<div class="row">
    <textarea class="textarea"></textarea>
</div>
<div class="row">
    <textarea class="textarea mix-textarea_nonResizable"></textarea>
</div>
<div class="row">
    <textarea class="textarea mix-textarea_fullWidth"></textarea>
</div>
<div class="row">
    <textarea class="textarea mix-textarea_isInvalid"></textarea>
</div>
*/
.textarea {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #efefef;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  background: #ffffff;
  padding: 10px;
  height: 220px;
  font-size: 14px; }

.mix-textarea_nonResizable {
  resize: none; }

.mix-textarea_fullWidth {
  width: 100%; }

.mix-textarea_isInvalid {
  border: 2px solid #cd012f; }

/* angular validation styles */
.textarea.ng-invalid {
  border: 2px solid #cd012f; }

.textarea.ng-untouched {
  border: 1px solid #efefef; }

/**
@name X icon
@description An icon of an x. Built with CSS to inherit color.
@markup
<div class="hdg">
<a href="#0" class="link">Close me <i class="x"></i></a>
</div>
<div class="txt">
<a href="#0" class="link">Close me <i class="x x_circle"></i></a>
</div>

*/
.x {
  display: inline-block;
  position: relative;
  top: 0.15em;
  cursor: pointer;
  width: 1em;
  height: 1em;
  vertical-align: baseline;
  color: inherit; }

.x_lg {
  font-size: 20px; }

.mix-x_blue {
  color: #002c77; }

.x:before,
.x:after {
  -webkit-transition: all 0.08s;
  -moz-transition: all 0.08s;
  -ms-transition: all 0.08s;
  transition: all 0.08s;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-top: 0.1em solid;
  height: 0;
  content: " "; }

.x:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }

.x:after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg); }

.x:active:before {
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0); }

.x:active:after {
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0); }

.x_circle {
  border: 0.1em solid;
  border-radius: 50%; }

.x_circle:before,
.x_circle:after {
  width: 74%; }

/**
@name Ajax Loader
@description Search Loading GIF

@markup
<span class="ajaxLoader">
    <img class="ajaxLoader-spinner" src="/assets/media/images/ajax-loader.gif" alt="">
</span>

<div class="ajaxLoader ajaxLoader_center">
    <img class="ajaxLoader-spinner" src="/assets/media/images/ajax-loader.gif" alt="">
</div>
*/
.ajaxLoader_center {
  padding: 1em 0;
  text-align: center; }

.ajaxLoader-spinner {
  display: inline-block;
  min-width: 20px;
  vertical-align: middle; }

/**
@name Alert
@description Announcement / alert area

@markup
<div class="row">
    <div class="alert">
        <div class="alert-hd">Announcement:</div>
        <div class="alert-bd">
            <p class="txt txt_2 mix-txt_medium">We will be closed Friday, June 13 for Facility Maintenance. If you have a
            medical emergency, please call 911.</p>
        </div>
    </div>
</div>

<div class="row">
    <div class="alert">
        <div class="alert-hd alert-hd_red">Announcement:</div>
        <div class="alert-bd alert-bd_red">
            <p class="txt txt_2 mix-txt_medium">We will be closed Friday, June 13 for Facility Maintenance. If you have a
            medical emergency, please call 911.</p>
        </div>
    </div>
</div>

<div class="row">
    <div class="alert">
        <div class="alert-hd alert-hd_critical">In case of emergency:</div>
        <div class="alert-bd alert-bd_critical">
            <p class="txt txt_2 mix-txt_medium">Please call 911.</p>
        </div>
    </div>
</div>

<div class="row">
    <div class="row row_tight">
        <div class="hdg">Body only</div>
    </div>
    <div class="alert">
        <div class="alert-bd">
            <p class="txt txt_2 mix-txt_medium">We will be closed Friday, June 13 for Facility Maintenance. If you have a
            medical emergency, please call 911.</p>
        </div>
    </div>
</div>

*/
.alert {
  border-radius: 6px;
  box-shadow: 0 0 4px rgba(112, 112, 112, 0.1);
  background-color: #ffffff;
  color: #666666; }

.alert-hd {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 6px 6px 0 0;
  background-color: #f5d654;
  padding: 0 20px 0 20px;
  height: 42px;
  line-height: 42px;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500; }

.alert-bd {
  border: 1px solid rgba(0, 0, 0, 0.03);
  border-radius: 0 0 6px 6px;
  background-color: #f8e490;
  padding: 20px 20px 15px 20px; }

.alert-hd_red {
  background-color: #cd012f;
  color: #ffffff; }

.alert-bd_red {
  border-color: #cd012f;
  background-color: rgba(205, 1, 47, 0.65);
  color: #ffffff; }

.alert-hd_critical {
  background-color: #cd012f;
  text-transform: capitalize;
  color: #ffffff; }

.alert-bd_critical {
  border-color: #e70033;
  background-color: #e70033;
  color: #ffffff; }

.alert-hd_good {
  background-color: #66bd2b;
  color: #ffffff; }

.alert-bd_good {
  border-color: #66bd2b;
  background-color: rgba(102, 189, 43, 0.65);
  color: #ffffff; }

/**
@name Alpha Browse
@description

@markup
<div class="row isHiddenSm">
    <ul class="alphaBrowse">
        <li>
            <div class="alphaBrowse-item isActive">Top Searches</div>
        </li>
        <li>
            <div class="alphaBrowse-item alphaBrowse-item_disabled">A</div>
        </li>
        <li>
            <div class="alphaBrowse-item">B</div>
        </li>
        <li>
            <div class="alphaBrowse-item">C</div>
        </li>
        <li>
            <div class="alphaBrowse-item">D</div>
        </li>
        <li>
            <div class="alphaBrowse-item">E</div>
        </li>
        <li>
            <div class="alphaBrowse-item">F</div>
        </li>
        <li>
            <div class="alphaBrowse-item">G</div>
        </li>
        <li>
            <div class="alphaBrowse-item">H</div>
        </li>
        <li>
            <div class="alphaBrowse-item">I</div>
        </li>
        <li>
            <div class="alphaBrowse-item">J</div>
        </li>
        <li>
            <div class="alphaBrowse-item">K</div>
        </li>
        <li>
            <div class="alphaBrowse-item">L</div>
        </li>
        <li>
            <div class="alphaBrowse-item">M</div>
        </li>
        <li>
            <div class="alphaBrowse-item">N</div>
        </li>
        <li>
            <div class="alphaBrowse-item">O</div>
        </li>
        <li>
            <div class="alphaBrowse-item">P</div>
        </li>
        <li>
            <div class="alphaBrowse-item">Q</div>
        </li>
        <li>
            <div class="alphaBrowse-item">R</div>
        </li>
        <li>
            <div class="alphaBrowse-item">S</div>
        </li>
        <li>
            <div class="alphaBrowse-item">T</div>
        </li>
        <li>
            <div class="alphaBrowse-item">U</div>
        </li>
        <li>
            <div class="alphaBrowse-item">V</div>
        </li>
        <li>
            <div class="alphaBrowse-item">W</div>
        </li>
        <li>
            <div class="alphaBrowse-item">X</div>
        </li>
        <li>
            <div class="alphaBrowse-item">Y</div>
        </li>
        <li>
            <div class="alphaBrowse-item">Z</div>
        </li>
    </ul>
</div>

<div class="row isHiddenSm">
    <ul class="alphaBrowse alphaBrowse_bar">
        <li>
            <div class="alphaBrowse-item isActive">Common</div>
        </li>
        <li>
            <div class="alphaBrowse-item alphaBrowse-item_disabled">A</div>
        </li>
        <li>
            <div class="alphaBrowse-item">B</div>
        </li>
        <li>
            <div class="alphaBrowse-item">C</div>
        </li>
        <li>
            <div class="alphaBrowse-item">D</div>
        </li>
        <li>
            <div class="alphaBrowse-item">E</div>
        </li>
        <li>
            <div class="alphaBrowse-item">F</div>
        </li>
        <li>
            <div class="alphaBrowse-item">G</div>
        </li>
        <li>
            <div class="alphaBrowse-item">H</div>
        </li>
        <li>
            <div class="alphaBrowse-item">I</div>
        </li>
        <li>
            <div class="alphaBrowse-item">J</div>
        </li>
        <li>
            <div class="alphaBrowse-item">K</div>
        </li>
        <li>
            <div class="alphaBrowse-item">L</div>
        </li>
        <li>
            <div class="alphaBrowse-item">M</div>
        </li>
        <li>
            <div class="alphaBrowse-item">N</div>
        </li>
        <li>
            <div class="alphaBrowse-item">O</div>
        </li>
        <li>
            <div class="alphaBrowse-item">P</div>
        </li>
        <li>
            <div class="alphaBrowse-item">Q</div>
        </li>
        <li>
            <div class="alphaBrowse-item">R</div>
        </li>
        <li>
            <div class="alphaBrowse-item">S</div>
        </li>
        <li>
            <div class="alphaBrowse-item">T</div>
        </li>
        <li>
            <div class="alphaBrowse-item">U</div>
        </li>
        <li>
            <div class="alphaBrowse-item">V</div>
        </li>
        <li>
            <div class="alphaBrowse-item">W</div>
        </li>
        <li>
            <div class="alphaBrowse-item">X</div>
        </li>
        <li>
            <div class="alphaBrowse-item">Y</div>
        </li>
        <li>
            <div class="alphaBrowse-item">Z</div>
        </li>
    </ul>
</div>
*/
.alphaBrowse {
  display: none; }

.bold {
  font-weight: 600; }

/**
@name Box
@description Container with some padding, background color, and border radius.

@markup
<div class="box">
    <h1 class="hdg mix-hdg_camo">Default box</h1>
    <p class="txt txt_1">I just contain some content and stufff.</p>
</div>
<div class="box box_trans">
    <h1 class="hdg mix-hdg_camo">Transparent box</h1>
    <p class="txt txt_1">I just contain some content and stufff.</p>
</div>
<div class="box box_blue">
    <h1 class="hdg mix-hdg_camo">Blue box</h1>
    <p class="txt txt_1">I just contain some content and stufff.</p>
</div>
<div class="box box_maroon">
    <h1 class="hdg mix-hdg_camo">Maroon box</h1>
    <p class="txt txt_1">I just contain some content and stufff.</p>
</div>
<div class="box box_olive">
    <h1 class="hdg mix-hdg_camo">Olive box</h1>
    <p class="txt txt_1">I just contain some content and stufff.</p>
</div>
<div class="box box_page">
    <div class="wrap">
         <div class="row row_loose">
             <h1 class="hdg">Page box</h1>
             <p class="txt txt_1">This box is meant to wrap the main area between the header and footer. It has a transparent background, no border-radius, and only has top padding.</p>
         </div>
    </div>
</div>
*/
.box {
  *zoom: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  position: relative;
  border: 1px solid transparent;
  border-radius: 6px;
  background-color: #ffffff;
  padding: 20px; }
  .box:after, .box:before {
    display: table;
    content: " "; }
  .box:after {
    clear: both; }

.box_page {
  border-radius: 0;
  background-color: transparent;
  padding: 30px 0 0 0; }

.box_explore {
  padding: 12px 8px 12px 8px; }

.box_lightBlue {
  background-color: #68ace5; }

.box_date {
  border-left: 1px solid #efefef;
  border-radius: 0;
  background-color: #f2f2f2;
  padding: 0 8px 0 8px;
  min-height: 20px;
  color: #666666; }

.box_date.isActive {
  background-color: #68ace5;
  color: #ffffff; }

.box_day {
  border-radius: 0;
  padding: 10px;
  min-height: 116px; }

.box_menu {
  padding: 25px 31px; }

.box_flag {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 4px 8px 4px 8px; }

.box_filter {
  border-radius: 0;
  background-color: #ffffff;
  padding: 20px; }

.box_filterControls {
  border-radius: 0;
  background-color: #68ace5;
  padding: 10px 16px 10px 16px;
  color: #ffffff; }

.box_view {
  border-top: 3px solid #68ace5;
  border-bottom: 1px solid #eeeeee;
  border-radius: 0;
  padding: 12px 16px 12px 16px; }

.mix-box_series {
  border-radius: 0;
  background-color: #e8f3fb;
  padding: 16px; }

.mix-box_pointy {
  border-radius: 0 !important; }

/* colors */
.box_trans {
  border: 1px solid #efefef;
  background-color: transparent; }

.box_blue {
  background-color: #e8f3fb; }

.box_offwhite {
  background-color: #f8f8f8; }

.box_maroon {
  background-color: #86244e;
  color: #ffffff; }

.box_olive {
  background-color: #697f11;
  color: #ffffff; }

/* padding */
.mix-box_space {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  padding: 30px 0; }

.mix-box_spaceLg {
  padding: 40px 0 80px; }

.mix-box_shadow {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); }

/* space for the actions menu */
.box-menu {
  position: absolute;
  top: 0;
  right: 0;
  margin: 20px; }

.mix-box_hasCarousel {
  padding: 20px;
  overflow: hidden; }

/**
@name Browse
@description 'Browse By:' bar. Used to sort specialties, classes / events, etc.

@markup
<div class="row">
    <div class="txt txt_2 mix-txt_medium mix-txt_up">
        <ul class="browse browse_fullWidth">
            <li class="isActive">common</li>
            <li>specialties &amp; health services</li>
            <li>locations</li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="hdg hdg_sm">Tight example with content tied to the tabs</div>
</div>
<div data-bar>
    <div class="row row_loose">
        <div class="txt txt_2 mix-txt_medium mix-txt_up">
            <ul class="browse">
                <li class="isActive" data-bar-tab="0">common</li>
                <li data-bar-tab="1">specialties &amp; health services</li>
                <li data-bar-tab="2">locations</li>
            </ul>
        </div>
    </div>
    <div class="browsePanel" data-bar-panel="0">
        <h4 class="browsePanel-hd" data-bar-panel-hd>
            Common
        </h4>
        <div class="browsePanel-bd">
            Common content
        </div>
    </div>
    <div class="browsePanel" data-bar-panel="1">
        <h4 class="browsePanel-hd" data-bar-panel-hd>
            Specialties &amp; Health Services
        </h4>
        <div class="browsePanel-bd">
            Specialties &amp; Health Services content
        </div>
    </div>
    <div class="browsePanel" data-bar-panel="2">
        <h4 class="browsePanel-hd" data-bar-panel-hd>
            Locations
        </h4>
        <div class="browsePanel-bd">
            Locations content
        </div>
    </div>
</div>

*/
.browse {
  border-radius: 6px;
  color: #ffffff; }

.browse > * {
  position: relative;
  border-bottom: 1px solid #4b9be2;
  background-color: #68ace5;
  padding: 14px;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 500; }

.browse > *:after {
  display: inline-block;
  font-family: "icomoon";
  content: "\e600";
  position: absolute;
  top: 50%;
  right: 14px;
  margin-top: -0.5em;
  font-size: 1em; }

.browse > :first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit; }

.browse > :last-child {
  border-bottom: none;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit; }

.browse > * + * {
  border-top: 1px solid #7ac0ef; }

/**
@name Calendar
@description Styles the main container and navigation area for the calendar.

@markup
<div class="calendar">
    <div class="calendar-hd">
        <div class="row">
            <div class="split mix-split_thirds">
                <div class="split-item">
                    <div class="txt txt_2 mix-txt_up mix-txt_medium">
                        <div class="link mix-link_arrowLeft">September 2014</div>
                    </div>
                </div>
                <div class="split-item split-item_center">
                    <div class="hdg hdg_sm">October 2014</div>
                </div>
                <div class="split-item isAlignedRight">
                    <div class="txt txt_2 mix-txt_up mix-txt_medium">
                        <div class="link mix-link_arrow">November 2014</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="calendar-bd">
        <div class="row row_tight">
            <ol class="blocks blocks_7up mix-blocks_noSpace">
                <li>
                    <div class="txt txt_1 mix-txt_light isAlignedCenter">Sunday<span></span></div>
                </li>
                <li>
                    <div class="txt txt_1 mix-txt_light isAlignedCenter">Monday<span></span></div>
                </li>
                <li>
                    <div class="txt txt_1 mix-txt_light isAlignedCenter">Tuesday<span></span></div>
                </li>
                <li>
                    <div class="txt txt_1 mix-txt_light isAlignedCenter">Wednesday<span></span></div>
                </li>
                <li>
                    <div class="txt txt_1 mix-txt_light isAlignedCenter">Thursday<span></span></div>
                </li>
                <li>
                    <div class="txt txt_1 mix-txt_light isAlignedCenter">Friday<span></span></div>
                </li>
                <li>
                    <div class="txt txt_1 mix-txt_light isAlignedCenter">Saturday<span></span></div>
                </li>
            </ol>
        </div>
        <ol class="table table_7up mix-table_piped">
            <li>
                <div class="box box_date">
                    <div class="txt txt_1"></div>
                </div>
                <div class="box box_day">

                </div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1"></div>
                </div>
                <div class="box box_day">

                </div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">1</div>
                </div>
                <div class="box box_day">
                    <div class="txt txt_calendar">
                        <ol class="vList vList_tight">
                            <li>
                                <a href="#0" class="link link_camo">
                                    <div class="tool">
                                        <div class="tool-txt">
                                            <div class="link">Happiest Baby On The Block</div>
                                        </div>
                                        <div class="tool-tip tool-tip_topLeft mix-tool-tip_pale">
                                           <div class="box box_blue">
                                               <div class="row row_tight">
                                                    <div class="txt txt_1 mix-txt_medium">
                                                        <div class="link">Happiest Baby On The Block</div>
                                                    </div>
                                               </div>
                                               <div class="row row_tight">
                                                   <div class="txt txt_1">
                                                       Thursday, October 22nd, 2014 2:00PM - 3:00PM (1 of 4 Sessions)
                                                   </div>
                                               </div>
                                               <div class="row row_tight">
                                                   <p class="txt txt_1">
                                                       St. Luke's Boise Anderson Center, 5th Floor, South Tower, 100 E. Idaho Street, Boise
                                                   </p>
                                               </div>
                                               <div class="txt txt_1">Free, No Registration Required</div>
                                           </div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ol>
                    </div>
                </div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">2</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">3</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">4</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">5</div>
                </div>
                <div class="box box_day"></div>
            </li>
        </ol>
        <ol class="table table_7up mix-table_piped">
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">6</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">7</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date isActive">
                    <div class="txt txt_1">8</div>
                </div>
                <div class="box box_day">

                </div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">9</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">10</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">11</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">12</div>
                </div>
                <div class="box box_day"></div>
            </li>
        </ol>
        <ol class="table table_7up mix-table_piped">
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">13</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">14</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">15</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">16</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">17</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">18</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">19</div>
                </div>
                <div class="box box_day"></div>
            </li>
        </ol>
        <ol class="table table_7up mix-table_piped">
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">20</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">21</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">22</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">23</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">24</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">25</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">26</div>
                </div>
                <div class="box box_day"></div>
            </li>
        </ol>
        <ol class="table table_7up mix-table_piped">
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">27</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">28</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">29</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">30</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">31</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1"></div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1"></div>
                </div>
                <div class="box box_day"></div>
            </li>
        </ol>
    </div>
</div>
*/
.calendar {
  *zoom: 1;
  border: 1px solid #efefef;
  border-radius: 6px;
  background-color: #ffffff; }
  .calendar:after, .calendar:before {
    display: table;
    content: " "; }
  .calendar:after {
    clear: both; }

.calendar-hd {
  padding: 30px 30px 10px 30px; }

.calendar-bd-days {
  display: -webkit-box;
  display: -webkit-flex;
  /* display: -ms-flexbox; */
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.calendar-bd-days > * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  float: left;
  border-right: 1px solid #efefef;
  width: 14.2857142857%; }

.calendar-bd-days > :nth-child(7n) {
  border-right: 0; }

.calendar-bd-days > :nth-child(7n + 1) {
  clear: both; }

/**
@name Calendar
@description Styles the main container and navigation area for the calendar.

@markup
<div class="calendar">
    <div class="calendar-hd">
        <div class="row">
            <div class="split mix-split_thirds">
                <div class="split-item">
                    <div class="txt txt_2 mix-txt_up mix-txt_medium">
                        <div class="link mix-link_arrowLeft">September 2014</div>
                    </div>
                </div>
                <div class="split-item split-item_center">
                    <div class="hdg hdg_sm">October 2014</div>
                </div>
                <div class="split-item isAlignedRight">
                    <div class="txt txt_2 mix-txt_up mix-txt_medium">
                        <div class="link mix-link_arrow">November 2014</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="calendar-bd">
        <div class="row row_tight">
            <ol class="blocks blocks_7up mix-blocks_noSpace">
                <li>
                    <div class="txt txt_1 mix-txt_light isAlignedCenter">Sunday<span></span></div>
                </li>
                <li>
                    <div class="txt txt_1 mix-txt_light isAlignedCenter">Monday<span></span></div>
                </li>
                <li>
                    <div class="txt txt_1 mix-txt_light isAlignedCenter">Tuesday<span></span></div>
                </li>
                <li>
                    <div class="txt txt_1 mix-txt_light isAlignedCenter">Wednesday<span></span></div>
                </li>
                <li>
                    <div class="txt txt_1 mix-txt_light isAlignedCenter">Thursday<span></span></div>
                </li>
                <li>
                    <div class="txt txt_1 mix-txt_light isAlignedCenter">Friday<span></span></div>
                </li>
                <li>
                    <div class="txt txt_1 mix-txt_light isAlignedCenter">Saturday<span></span></div>
                </li>
            </ol>
        </div>
        <ol class="table table_7up mix-table_piped">
            <li>
                <div class="box box_date">
                    <div class="txt txt_1"></div>
                </div>
                <div class="box box_day">

                </div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1"></div>
                </div>
                <div class="box box_day">

                </div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">1</div>
                </div>
                <div class="box box_day">
                    <div class="txt txt_calendar">
                        <ol class="vList vList_tight">
                            <li>
                                <a href="#0" class="link link_camo">
                                    <div class="tool">
                                        <div class="tool-txt">
                                            <div class="link">Happiest Baby On The Block</div>
                                        </div>
                                        <div class="tool-tip tool-tip_topLeft mix-tool-tip_pale">
                                           <div class="box box_blue">
                                               <div class="row row_tight">
                                                    <div class="txt txt_1 mix-txt_medium">
                                                        <div class="link">Happiest Baby On The Block</div>
                                                    </div>
                                               </div>
                                               <div class="row row_tight">
                                                   <div class="txt txt_1">
                                                       Thursday, October 22nd, 2014 2:00PM - 3:00PM (1 of 4 Sessions)
                                                   </div>
                                               </div>
                                               <div class="row row_tight">
                                                   <p class="txt txt_1">
                                                       St. Luke's Boise Anderson Center, 5th Floor, South Tower, 100 E. Idaho Street, Boise
                                                   </p>
                                               </div>
                                               <div class="txt txt_1">Free, No Registration Required</div>
                                           </div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ol>
                    </div>
                </div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">2</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">3</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">4</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">5</div>
                </div>
                <div class="box box_day"></div>
            </li>
        </ol>
        <ol class="table table_7up mix-table_piped">
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">6</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">7</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date isActive">
                    <div class="txt txt_1">8</div>
                </div>
                <div class="box box_day">

                </div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">9</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">10</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">11</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">12</div>
                </div>
                <div class="box box_day"></div>
            </li>
        </ol>
        <ol class="table table_7up mix-table_piped">
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">13</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">14</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">15</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">16</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">17</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">18</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">19</div>
                </div>
                <div class="box box_day"></div>
            </li>
        </ol>
        <ol class="table table_7up mix-table_piped">
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">20</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">21</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">22</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">23</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">24</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">25</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">26</div>
                </div>
                <div class="box box_day"></div>
            </li>
        </ol>
        <ol class="table table_7up mix-table_piped">
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">27</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">28</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">29</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">30</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1">31</div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1"></div>
                </div>
                <div class="box box_day"></div>
            </li>
            <li>
                <div class="box box_date">
                    <div class="txt txt_1"></div>
                </div>
                <div class="box box_day"></div>
            </li>
        </ol>
    </div>
</div>
*/
.calendar {
  *zoom: 1;
  border: 1px solid #efefef;
  border-radius: 6px;
  background-color: #ffffff; }
  .calendar:after, .calendar:before {
    display: table;
    content: " "; }
  .calendar:after {
    clear: both; }

.calendar-hd {
  padding: 30px 30px 10px 30px; }

.calendar-bd-days {
  display: -webkit-box;
  display: -webkit-flex;
  /* display: -ms-flexbox; */
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.calendar-bd-days > * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  float: left;
  border-right: 1px solid #efefef;
  width: 14.2857142857%; }

.calendar-bd-days > :nth-child(7n) {
  border-right: 0; }

.calendar-bd-days > :nth-child(7n + 1) {
  clear: both; }

.commaList {
  display: inline;
  font-size: 0; }

.commaList > * {
  display: inline;
  font-size: 14px; }

.commaList > * + ::before {
  content: ", "; }

.commaList > :last-child::before {
  content: ", and "; }

.commaList > :first-child::before {
  content: ""; }

/**
@name Count Tag
@description A boxed number with a white background and large text.

@markup
<ul class="blocks">
    <li>
        <div class="count"> 5 </div>
    </li>
    <li>
        <div class="count"> 15 </div>
    </li>
    <li>
        <div class="count"> 115 </div>
    </li>
    <li>
        <div class="count"> 1115 </div>
    </li>
</ul>
*/
.count {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid #cacaca;
  border-radius: 6px;
  background-color: #ffffff;
  padding: 0 5px;
  min-width: 32px;
  height: 32px;
  vertical-align: middle;
  text-align: center;
  line-height: 32px;
  color: #666666;
  font-size: 24px;
  font-weight: 100; }

/**
@name Call to Action
@description A layout module that contains a blurb of text and a button. On desktop, the 2 elements appear inline, centered, and side-by-side. On all other breakpoints they appear stacked verticaly.

@markup
<div class="band band_offWhite">
    <div class="box mix-box_space">
        <div class="wrap">
            <div class="cta">
                <div class="cta-l">
                    <div class="hdg hdg_sm">See What St. Luke's Has To Offer For Prenatal Care Services, This is a Very Long Title That Wraps</div>
                </div>
                <div class="cta-r">
                    <a href="#0" class="link link_camo">
                        <div class="btn btn_tight">
                            <div class="btn-text">go to prenatal services</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
*/
.cta {
  text-align: center; }

.cta-l {
  margin-bottom: 30px; }

.disqus.isActive {
  display: none; }

/**
@name Error
@description form field validation errors

@markup
<div class="error">Please enter a valid email address.</div>
*/
.error {
  display: inline-block;
  margin-top: 10px;
  color: #cd012f;
  font-size: 14px;
  font-style: italic; }

/* angular validation */
.ng-valid ~ .error,
.ng-untouched ~ .error {
  display: none; }

.ng-valid-required ~ .error_required {
  display: none; }

.ng-valid-email ~ .error_email {
  display: none; }

.ng-valid-pattern ~ .error_pattern,
.ng-invalid-email ~ .error_pattern {
  display: none; }

.flow {
  display: block; }

.mix-flow_bottomSpaceAtSm {
  margin-bottom: 10px; }

/**
@name Full
@description makes element stretch to the full width of its container

@markup
<div class="box" style="width: 320px;">
    <img src="//placehold.it/150x150" alt="" class="full">
</div>
*/
.full {
  width: 100%; }

/**
@name Text Headings
@description additional simple text module for styling headings. Default color is blue, but it can be set to inherit color from it's area.
@markup
<div> <span class="hdg hdg_sm"> A small heading </span> </div>
<div> <span class="hdg"> A standard heading </span> </div>
<div> <span class="hdg hdg_lg"> A large heading </span> </div>
<div> <span class="hdg mix-hdg_camo"> A heading that inherits color </span> </div>
*/
.hdg {
  line-height: 1.1666666667;
  letter-spacing: 1px;
  color: #002c77;
  font-size: 24px;
  font-weight: 200; }

.mix-hdg_camo {
  color: inherit; }

.hdg_sm {
  line-height: 1.3;
  font-size: 20px;
  font-weight: 300; }

.hdg_xsm {
  font-size: 16px;
  font-weight: 300; }

.hdg_lg {
  line-height: 1.1538461538;
  font-size: 26px;
  font-weight: 200; }

.hdg_explore {
  line-height: 1.2142857143;
  font-size: 14px;
  color: inherit; }

.mix-hdg_caps {
  text-transform: capitalize; }

/**
@name Hero
@description hero image (full width of viewport, varying height)

@markup
<div class="row">
    <div class="hero">
         <img src="//placehold.it/1680x300" alt="city" class="hero-img">
    </div>
</div>

<div class="hero mix-hero_video">
     <img src="//placehold.it/1680x300" alt="city" class="hero-img">
</div>

*/
.hero {
  display: block;
  position: relative; }

.mix-hero_video {
  cursor: pointer; }

.mix-hero_video:before {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 50%;
  z-index: 1;
  margin-left: -25px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.25);
  width: 45px;
  height: 45px;
  content: ""; }

.mix-hero_video:after {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 50%;
  margin-left: -5px;
  border: 8px solid #002c77;
  border-left-width: 15px;
  border-color: transparent;
  border-left-color: #ffffff;
  width: 0;
  height: 0;
  content: ""; }

/**
* [1] center the image
* [2] always maintain original image size
*/
.hero-img {
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  display: block;
  position: relative;
  left: 50%;
  margin: 0;
  border-radius: 0;
  max-width: none; }

/**
@name Hide
@description Wrapper that hides its contents on the specified breakpoint

@markup
<div class="hide mix-hide_sm mix-hide_lg">
    <div class="txt txt_3">hide on small and large</div>
</div>
<div class="hide mix-hide_md">
    <div class="txt txt_3">hide only on medium</div>
</div>
<div class="hide mix-hide_lg">
    <div class="txt txt_3">hide only on large</div>
</div>
*/
.hr {
  border: none;
  background-color: #efefef;
  height: 3px;
  color: #efefef; }

.hr_short {
  height: 1px; }

.mix-hr_white {
  background-color: #ffffff; }

/**
@name Indicator
@description Downward facing triangle indicating that the item is active. (Used on search results view selection bar)

@markup
<div class="row">
    <div class="box box_view">
        <div class="split split_middle">
            <div class="split-item">
                <div class="txt txt_2 mix-txt_dkBlue mix-txt_medium">5 Clinics</div>
            </div>
            <div class="split-item split-item_r">
                <ul class="blocks mix-blocks_middle mix-blocks_letters">
                    <li class="indicator indicator_white isActive">
                        <i class="icon icon_menu"></i>
                    </li>
                    <li class="indicator indicator_white">
                        <i class="icon icon_directions"></i>
                    </li>
                    <li>
                        <div class="txt mix-txt_medium mix-txt_dkBlue mix-txt_up">
                            <div class="link mix-link_arrow">Refine</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="box box_blue mix-box_series">
    <div class="split split_middle mix-split_thirds">
        <div class="split-item">
            <a href="#0" class="link">
                <div class="arrow arrow_left"></div>
            </a>
        </div>
        <div class="split-item isAlignedCenter">
            <div class="indicator indicator_blue isActive">
                <div class="txt txt_3 mix-txt_medium mix-txt_dkBlue">
                    Overview
                </div>
            </div>
        </div>
        <div class="split-item isAlignedRight">
            <a href="#0" class="link">
                <div class="arrow arrow_right"></div>
            </a>
        </div>
    </div>
</div>
*/
.indicator {
  position: relative;
  z-index: 1; }

.indicator.isActive:after {
  position: absolute;
  top: 50px;
  right: -1px;
  background: url("../media/images/active-indicator.png");
  background-size: 100%;
  width: 30px;
  height: 11px;
  content: ""; }

.indicator_blue.isActive:after {
  top: auto;
  bottom: -37px;
  left: 50%;
  margin-left: -14px;
  border: 10px solid transparent;
  border-right-width: 14px;
  border-left-width: 14px;
  border-top-color: #e8f3fb;
  background: transparent;
  width: 0;
  height: 0; }

.map {
  position: relative; }

.map-canvas {
  position: relative;
  padding-top: 30px;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden; }

.map-canvas iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.map img {
  border-radius: none;
  max-width: none; }

.map-directions {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  margin: 12px;
  border-radius: 6px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); }

.map-directions > * {
  display: table-cell;
  border-radius: 6px;
  vertical-align: top; }

.map-directions-field {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }

.map-directions-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0; }

/**
@name In-Page Navigation
@description Page specific navigation

@markup
<div style="height: 275px;">
    <div class="band band_nav">
        <div class="wrap wrap_nav">
            <ul class="nav">
                <li class="nav-item mix-nav-item_wide">
                    <div class="nav-item-hd">
                        On This Page
                        <span class="txt txt_arrow">
                            <span class="arrow arrow_down mix-arrow_looseLeft"></span>
                        </span>
                    </div>
                    <ul class="nav-item-sub">
                        <li>
                            <a href="#0" class="listBtn">
                                <div class="listBtn-txt mix-listBtn-txt_none">Overview</div>
                            </a>
                        </li>
                        <li>
                            <a href="#0" class="listBtn">
                                <div class="listBtn-txt mix-listBtn-txt_none">Highlights</div>
                            </a>
                        </li>
                        <li>
                            <a href="#0" class="listBtn">

                                <div class="listBtn-txt mix-listBtn-txt_none">Facilities &amp; Locations</div>
                                <div class="listBtn-r">
                                    <div class="count">25</div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#0" class="listBtn">

                                <div class="listBtn-txt mix-listBtn-txt_none">Providers</div>
                                <div class="listBtn-r">
                                    <div class="count">68</div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item mix-nav-item_wide">
                    <div class="nav-item-hd">
                        Actions
                        <span class="txt txt_arrow">
                            <span class="arrow arrow_down mix-arrow_looseLeft"></span>
                        </span>
                    </div>
                    <ul class="nav-item-sub">
                        <li>
                            <a href="#0" class="listBtn">
                                <div class="listBtn-l">
                                    <i class="icon icon_computer-white"></i>
                                </div>
                                <div class="listBtn-txt mix-listBtn-txt_none">Register Online</div>
                            </a>
                        </li>
                        <li>
                            <a href="#0" class="listBtn">
                                <div class="listBtn-l">
                                    <i class="icon icon_phone-white"></i>
                                </div>
                                <div class="listBtn-txt mix-listBtn-txt_none">Register By Phone</div>
                            </a>
                        </li>
                        <li>
                            <a href="#0" class="listBtn">
                                <div class="listBtn-l">
                                    <i class="icon icon_directions-white"></i>
                                </div>
                                <div class="listBtn-txt mix-listBtn-txt_none">Get Directions</div>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item mix-nav-item_center">
                    <div class="nav-item-hd">
                        <div class="hide mix-hide_md mix-hide_lg">
                            <i class="icon icon_share-white mix-icon_sm"></i>
                        </div>
                        <div class="hide mix-hide_sm">
                            Share
                            <span class="txt txt_arrow">
                                <span class="arrow arrow_down mix-arrow_looseLeft"></span>
                            </span>
                        </div>
                    </div>
                    <ul class="nav-item-sub nav-item-sub_share">
                        <li>
                            <a href="#" class="listBtn">
                                <div>
                                    <i class="icon icon_fb-white mix-icon_sm">facebook icon</i>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="listBtn">
                                <div>
                                    <i class="icon icon_twitter-white mix-icon_sm">twitter icon</i>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="listBtn">
                                <div>
                                    <i class="icon icon_google-white mix-icon_sm">google plus icon</i>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="listBtn">
                                <div>
                                    <i class="icon icon_linked-white mix-icon_sm">linked in icon</i>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="listBtn">
                                <div>
                                    <i class="icon icon_email-white mix-icon_sm">email icon</i>
                                </div>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
*/
.nav {
  display: table;
  position: relative;
  z-index: 6;
  width: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.nav_title {
  display: inline-block;
  margin-bottom: 0 !important;
  width: auto; }

.nav-item {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: table-cell;
  z-index: 6;
  border-bottom: 1px solid #4b96de;
  background-color: #5fa4e2;
  cursor: pointer;
  font-size: 14px; }

.nav-item + .nav-item {
  border-left: 1px solid #4b96de; }

.nav-item-hd {
  font-size: 14px;
  padding: 8px 18px 8px 18px;
  white-space: nowrap; }

.mix-nav-item_center {
  text-align: center; }

.nav-item-sub {
  position: absolute;
  top: 100%;
  left: 0;
  visibility: hidden;
  z-index: 1;
  cursor: default;
  width: 100%; }

.nav-item-sub-text {
  font-size: 14px; }

.nav-item-sub.isOn {
  visibility: visible; }

.nav-item-sub.isOff {
  visibility: hidden; }

.nav-item-sub_share {
  text-align: center; }

.nav-item_title {
  position: relative;
  border-left: none;
  border-radius: 6px;
  border-color: transparent; }

.nav-item_title.isOn {
  border-radius: 6px 6px 0 0; }

.nav-item_title.isOff {
  border-radius: 6px !important; }

.nav-item-sub_title {
  text-align: center; }

.nav-item-sub_title > :last-child {
  border-radius: 0 0 6px 6px; }

.nav-item_loc {
  min-width: 270px;
  max-width: 500px; }

.nav-item-hd-txt {
  float: left;
  overflow: hidden;
  text-overflow: ellipsis; }

.mix-nav-item_wide > * > .nav-item-hd-txt {
  max-width: 220px; }

/**
@name Pill
@description Icon with related number and label. 1-3 wide with separators

@markup
<div class="box">
    <div class="row">
        <div class="row">
            <div class="hdg hdg_sm">1 item</div>
        </div>
        <div class="pill">
            <a href="#0" class="pill-item" data-toggle="" data-toggle-hover="">
                <div class="pill-item-icon">
                    <i class="icon icon_provider mix-icon_md" data-ng-hide="isOn"></i>
                    <i class="icon icon_provider-light mix-icon_md" data-ng-cloak data-ng-show="isOn"></i>
                    <div class="pill-item-icon-num">
                        <div class="hdg hdg_sm mix-hdg_camo">50</div>
                    </div>
                </div>
                <div class="txt mix-txt_medium">Providers</div>
            </a>
        </div>
    </div>

    <div class="row">
        <div class="row">
            <div class="hdg hdg_sm">2 items</div>
        </div>
        <div class="pill pill_2">
            <a href="#0" class="pill-item" data-toggle="" data-toggle-hover="">
                <div class="pill-item-icon">
                    <i class="icon icon_provider mix-icon_md" data-ng-hide="isOn"></i>
                    <i class="icon icon_provider-light mix-icon_md" data-ng-cloak data-ng-show="isOn"></i>
                    <div class="pill-item-icon-num">
                        <div class="hdg hdg_sm mix-hdg_camo">50</div>
                    </div>
                </div>
                <div class="txt mix-txt_medium">Providers</div>
            </a>
            <a href="#0" class="pill-item" data-toggle="" data-toggle-hover="">
                <div class="pill-item-icon">
                    <i class="icon icon_loc mix-icon_md" data-ng-hide="isOn"></i>
                    <i class="icon icon_loc-light mix-icon_md" data-ng-cloak data-ng-show="isOn"></i>
                    <div class="pill-item-icon-num">
                        <div class="hdg hdg_sm mix-hdg_camo">12</div>
                    </div>
                </div>
                <div class="txt mix-txt_medium">Locations</div>
            </a>
        </div>
    </div>

    <div class="row">
        <div class="row">
            <div class="hdg hdg_sm">2 Items, No number, Wrap to 2 lines</div>
        </div>
        <div class="pill pill_2">
            <a href="#0" class="pill-item" data-toggle="" data-toggle-hover="">
                <div class="pill-item-icon">
                    <i class="icon icon_donation mix-icon_md" data-ng-hide="isOn"></i>
                    <i class="icon icon_donation-light mix-icon_md" data-ng-cloak data-ng-show="isOn"></i>
                </div>
                <div class="txt mix-txt_medium">Ways To Donate</div>
            </a>
            <a href="#0" class="pill-item" data-toggle="" data-toggle-hover="">
                <div class="pill-item-icon">
                    <i class="icon icon_volunteer mix-icon_md" data-ng-hide="isOn"></i>
                    <i class="icon icon_volunteer-light mix-icon_md" data-ng-cloak data-ng-show="isOn"></i>
                </div>
                <div class="txt mix-txt_medium">Become a Volunteer</div>
            </a>
        </div>
    </div>

    <div class="row">
        <div class="row">
            <div class="hdg hdg_sm">Centered</div>
        </div>
        <div class="pill pill_3 mix-pill_center">

            <a href="#0" class="pill-item" data-toggle="" data-toggle-hover="">
                <div class="pill-item-icon">
                    <i class="icon icon_provider mix-icon_md" data-ng-hide="isOn"></i>
                    <i class="icon icon_provider-light mix-icon_md" data-ng-cloak data-ng-show="isOn"></i>
                    <div class="pill-item-icon-num">
                        <div class="hdg hdg_sm mix-hdg_camo">50</div>
                    </div>
                </div>
                <div class="txt mix-txt_medium">Providers</div>
            </a>

            <a href="#0" class="pill-item" data-toggle="" data-toggle-hover="">
                <div class="pill-item-icon">
                    <i class="icon icon_specialty mix-icon_md" data-ng-hide="isOn"></i>
                    <i class="icon icon_specialty-light mix-icon_md" data-ng-cloak data-ng-show="isOn"></i>
                    <div class="pill-item-icon-num">
                        <div class="hdg hdg_sm mix-hdg_camo">89</div>
                    </div>
                </div>
                <div class="txt mix-txt_medium">Specialties</div>
            </a>

            <a href="#0" class="pill-item" data-toggle="" data-toggle-hover="">
                <div class="pill-item-icon">
                    <i class="icon icon_article mix-icon_md" data-ng-hide="isOn"></i>
                    <i class="icon icon_article-light mix-icon_md" data-ng-cloak data-ng-show="isOn"></i>
                    <div class="pill-item-icon-num">
                        <div class="hdg hdg_sm mix-hdg_camo">321</div>
                    </div>
                </div>
                <div class="txt mix-txt_medium">Articles</div>
            </a>

        </div>
    </div>

    <div class="row">
        <div class="row">
            <div class="hdg hdg_sm">Dark (no border, white separator) / Full Width</div>
        </div>
        <div class="box box_blue">
            <div class="pill pill_3 mix-pill_fullWidth mix-pill_dark">

                <a href="#0" class="pill-item" data-toggle="" data-toggle-hover="">
                    <div class="pill-item-icon">
                        <i class="icon icon_provider mix-icon_md" data-ng-hide="isOn"></i>
                        <i class="icon icon_provider-light mix-icon_md" data-ng-cloak data-ng-show="isOn"></i>
                        <div class="pill-item-icon-num">
                            <div class="hdg hdg_sm mix-hdg_camo">50</div>
                        </div>
                    </div>
                    <div class="txt mix-txt_medium">Providers</div>
                </a>

                <a href="#0" class="pill-item" data-toggle="" data-toggle-hover="">
                    <div class="pill-item-icon">
                        <i class="icon icon_specialty mix-icon_md" data-ng-hide="isOn"></i>
                        <i class="icon icon_specialty-light mix-icon_md" data-ng-cloak data-ng-show="isOn"></i>
                        <div class="pill-item-icon-num">
                            <div class="hdg hdg_sm mix-hdg_camo">89</div>
                        </div>
                    </div>
                    <div class="txt mix-txt_medium">Specialties</div>
                </a>

                <a href="#0" class="pill-item" data-toggle="" data-toggle-hover="">
                    <div class="pill-item-icon">
                        <i class="icon icon_article mix-icon_md" data-ng-hide="isOn"></i>
                        <i class="icon icon_article-light mix-icon_md" data-ng-cloak data-ng-show="isOn"></i>
                        <div class="pill-item-icon-num">
                            <div class="hdg hdg_sm mix-hdg_camo">321</div>
                        </div>
                    </div>
                    <div class="txt mix-txt_medium">Articles</div>
                </a>

            </div>
        </div>
    </div>

</div>
*/
.pill {
    display: none;
  /*display: table;*/
  border: 1px solid #efefef;
  border-radius: 6px;
  width: 100%;
  max-width: 95px;
  text-align: center;
  color: #002c77; }

.mix-pill_center {
  margin: 0 auto; }

.mix-pill_dark {
  border: 1px solid transparent; }

.pill_2 {
  max-width: 190px; }

.pill_2 > * {
  width: 50%; }

.pill_3 {
  max-width: 280px; }

.mix-pill_fullWidth {
  max-width: none; }

.pill-item {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: table-cell;
  position: relative;
  padding: 4px 0 4px 0;
  width: 33%;
  color: #002c77;
  text-decoration: none; }

.pill-item:hover {
  color: #68ace5; }

.pill-item-icon {
  margin-bottom: 6px; }

.pill-item-icon > * {
  display: inline-block;
  vertical-align: middle; }

.pill-item-icon-num {
  display: inline-block;
  margin-left: 4px; }

/* multiple pill items, add separator */
.pill-item + .pill-item:before {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -15px;
  background-color: #efefef;
  width: 1px;
  height: 30px;
  content: ""; }

.mix-pill_dark > .pill-item + .pill-item:before {
  background-color: #ffffff; }

.pill-item-link {
  text-decoration: none;
  text-transform: capitalize; }

.pill-item-link:hover {
  color: #68ace5; }

/**
@name Post Navigation
@description Previous and next boxes / links for blog posts, articles, etc.

@markup
<ol class="blocks mix-blocks_sm2up mix-blocks_md2up mix-blocks_lg2up">
    <li>
        <a href="#0" class="link link_noDecoration">
            <div class="box box_maroon">
                <div class="table table_middle">
                    <div class="table-item table-item_maxSpace isAlignedRight">
                        <div class="postNav-txt">
                            previous
                            <span class="postNav-txt-post">post</span>
                        </div>
                        <div class="row row_tight isHiddenSm">
                            <div class="txt txt_3 mix-txt_light">Breakfast for Better Brains</div>
                        </div>
                        <div class="txt txt_1 isHiddenSm">By Author's Name</div>
                    </div>
                    <div class="table-item mix-table-item_gutterL isHiddenSm">
                        <img src="//placehold.it/110x110" alt="" class="postNav-img">
                    </div>
                </div>
            </div>
        </a>
    </li>
    <li>
        <a href="#0" class="link link_noDecoration">
            <div class="box box_olive">
                <div class="table table_middle">
                    <div class="table-item mix-table-item_gutterR isHiddenSm">
                        <img src="//placehold.it/110x110" alt="" class="postNav-img">
                    </div>
                    <div class="table-item table-item_maxSpace">
                        <div class="postNav-txt">
                            next
                            <span class="postNav-txt-post">post</span>
                        </div>
                        <div class="row row_tight isHiddenSm">
                            <div class="txt txt_3 mix-txt_light">Ladies Night Seminar Coming!</div>
                        </div>
                        <div class="txt txt_1 isHiddenSm">By Author's Name</div>
                    </div>
                </div>
            </div>
        </a>
    </li>
</ol>

*/
.postNav-txt {
  text-transform: uppercase;
  line-height: 17px;
  font-size: 14px;
  font-weight: 500; }

.postNav-txt-post {
  display: block; }

.postNav-img {
  max-width: none;
  max-height: 110px; }

.search {
  *zoom: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  border-radius: 6px;
  font-size: 14px; }
  .search:after, .search:before {
    display: table;
    content: " "; }
  .search:after {
    clear: both; }

.search-hd {
  display: table;
  position: relative;
  z-index: 3;
  border-radius: inherit;
  width: 100%; }

.search-hd-field {
  display: table-cell;
  position: relative;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  vertical-align: top; }

.search-hd-field:last-child {
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit; }

.search-hd-field-loader {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: 12px;
  z-index: 10000;
  margin: auto; }

.search-hd-btn {
  display: table-cell;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  width: 1px;
  min-width: 68px;
  vertical-align: top; }

.search-bd {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 1;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  background-color: #ffffff; }

.search-suggestions {
  z-index: 1;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  background-color: rgba(0, 0, 0, 0.15);
  padding: 5px 10px 5px 34px; }

.search-close {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 12px;
  border-radius: 6px;
  cursor: pointer;
  padding: 6px 12px; }

.search-ft {
  border-top: 1px solid #efefef;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  background-color: #ffffff;
  padding: 12px;
  text-align: center; }

/**
@name Social
@description layout styling for social media iframes

@markup
<div class="row">
    <div class="row">
        <div class="hdg">Responsive youtube embed</div>
    </div>
    <div class="social social_yt">
        <iframe src="http://www.youtube.com/embed/QILiHiTD3uc"  allowfullscreen></iframe>
    </div>
</div>

<div class="row">
    <div class="row">
        <div class="hdg">Twitter Feed</div>
    </div>

    <div class="social social_full">
        <a class="twitter-timeline" href="https://twitter.com/StLukesHealth" data-widget-id="531821811143434241">Tweets by @StLukesHealth</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div>
</div>

<div class="row">
    <div class="row">
        <div class="hdg">Facebook Feed</div>
    </div>

    <div class="social social_fb">
        <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F150863551598925&width=600&colorscheme=light&show_faces=true&stream=true&height=320" data-width="100%" style="border:none; overflow:hidden; height: 320px; width: 100%; background: #ffffff;"></iframe>
    </div>
</div>

*/
.social {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center; }

.social_full iframe, .social_fb iframe {
  width: 100% !important; }

/**
* [1] match youtube video aspect ratio (http://avexdesigns.com/responsive-youtube-embed/)
*/
.social_yt {
  position: relative;
  padding-top: 30px;
  padding-bottom: 56.25%;
  max-width: 100%;
  height: auto;
  max-height: 100%; }

.social_yt iframe,
.social_yt object,
.social_yt embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.social_yt iframe {
  max-width: 100%; }

/**
@name Stepladder
@description An ordered list of steps which is very layout specific.  This module does mostly layout and adds a counter which is linked by a line.  Content within cells is arbitrary.

@markup
<ol class="stepladder">
    <li class="stepladder-rung">
        <div class="stepladder-rung-bd">
            <div class="stepladder-rung-bd-cell stepladder-rung-bd-cell_first">
                <div class="row">
                    <h3 class="hdg hdg_sm">
                        Pre-Pregnancy
                    </h3>
                </div>
                <p class="txt txt_1 mix-txt_roman mix-txt_gray">
                    Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Suspendisse metus lectus, mollis non
                    semper a, rhoncus non massa. Aliquam sit amet condimentum nibh. Integer in ipsum felis, sed
                    porttitor urna. Donec et orci commodo nisi imperdiet ullamcorper.
                </p>
            </div>
            <div class="stepladder-rung-bd-cell stepladder-rung-bd-cell_second">
                <div class="blocks mix-blocks_sm1up mix-blocks_md2up mix-blocks_lg2up">
                    <div class="blocks-item">
                        <img class="full" alt="" src="//placehold.it/270x220"/>
                    </div>
                    <div class="blocks-item">
                        <div class="row">
                            <h4 class="txt txt_2 mix-txt_dkBlue mix-txt_medium">
                                Getting the Right Prenatal Care
                            </h4>
                        </div>
                        <div class="row">
                            <p class="txt txt_1 mix-txt_roman mix-txt_gray">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum.
                            </p>
                        </div>
                        <a href="#0" class="link mix-link_caps mix-link_arrow mix-txt_medium">
                            Capitalized Link with arrow.
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </li>
    <li class="stepladder-rung">
        <div class="stepladder-rung-bd">
            <div class="stepladder-rung-bd-cell stepladder-rung-bd-cell_first">
                <div class="row">
                    <h3 class="hdg hdg_sm">
                        Pre-Pregnancy
                    </h3>
                </div>
                <p class="txt txt_1 mix-txt_roman mix-txt_gray">
                    Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Suspendisse metus lectus, mollis non
                    semper a, rhoncus non massa. Aliquam sit amet condimentum nibh. Integer in ipsum felis, sed
                    porttitor urna. Donec et orci commodo nisi imperdiet ullamcorper.
                </p>
            </div>
            <div class="stepladder-rung-bd-cell stepladder-rung-bd-cell_second">
                <div class="blocks mix-blocks_sm1up mix-blocks_md2up mix-blocks_lg2up">
                    <div class="blocks-item">
                        <img class="full" alt="" src="//placehold.it/270x220"/>
                    </div>
                    <div class="blocks-item">
                        <div class="row">
                            <h4 class="txt txt_2 mix-txt_dkBlue mix-txt_medium">
                                Getting the Right Prenatal Care
                            </h4>
                        </div>
                        <div class="row">
                            <p class="txt txt_1 mix-txt_roman mix-txt_gray">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum.
                            </p>
                        </div>
                        <a href="#0" class="link mix-link_caps mix-link_arrow mix-txt_medium">
                            Capitalized Link with arrow.
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </li>
    <li class="stepladder-rung">
        <div class="stepladder-rung-bd">
            <div class="stepladder-rung-bd-cell stepladder-rung-bd-cell_first">
                <div class="row">
                    <h3 class="hdg hdg_sm">
                        Pre-Pregnancy
                    </h3>
                </div>
                <p class="txt txt_1 mix-txt_roman mix-txt_gray">
                    Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Suspendisse metus lectus, mollis non
                    semper a, rhoncus non massa. Aliquam sit amet condimentum nibh. Integer in ipsum felis, sed
                    porttitor urna. Donec et orci commodo nisi imperdiet ullamcorper.
                </p>
            </div>
            <div class="stepladder-rung-bd-cell stepladder-rung-bd-cell_second">
                <div class="blocks mix-blocks_sm1up mix-blocks_md2up mix-blocks_lg2up">
                    <div class="blocks-item">
                        <img class="full" alt="" src="//placehold.it/270x220"/>
                    </div>
                    <div class="blocks-item">
                        <div class="row">
                            <h4 class="txt txt_2 mix-txt_dkBlue mix-txt_medium">
                                Getting the Right Prenatal Care
                            </h4>
                        </div>
                        <div class="row">
                            <p class="txt txt_1 mix-txt_roman mix-txt_gray">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum.
                            </p>
                        </div>
                        <a href="#0" class="link mix-link_caps mix-link_arrow mix-txt_medium">
                            Capitalized Link with arrow.
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </li>
</ol>
*/
.stepladder {
  counter-reset: li;
  position: relative;
  z-index: 0;
  overflow: hidden; }

.stepladder-rung {
  display: block;
  border-radius: 4px;
  background: #ffffff;
  padding: 20px 25px;
  overflow: hidden; }

.stepladder-rung:before {
  position: absolute;
  left: 25px;
  display: block;
  margin-bottom: 20px;
  border: 2px solid currentColor;
  border-radius: 50%;
  width: 33px;
  height: 33px;
  vertical-align: middle;
  text-align: center;
  line-height: 33px;
  color: #002c77;
  font-family: "Neue Helvetica W01", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  content: counter(li);
  counter-increment: li; }

.stepladder-rung + .stepladder-rung {
  margin-top: 20px; }

.stepladder-rung-hd_sequential {
  margin-left: 50px; }

.stepladder-rung-bd-cell_first {
  margin-bottom: 20px; }

.tagged {
  position: relative; }

.tagged-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  margin: 12px;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 8px 8px; }

.tagged-img {
  position: relative;
  z-index: 0; }

/**
@name Tile
@description Image with transparent content drawer

@markup
<!-- note: this markup is LONG and is maintained in the tiles.html static page -->
<div class="row"> <ul class="blocks mix-blocks_sm1up mix-blocks_md1up mix-blocks_lg2up"> <li> <div class="row"> <h1 class="hdg"> Featured Tile </h1> </div> <a href="#0" class="tile mix-tile_wide mix-tile_purple "> <div class="tile-flag tile-flag_feat"> featured </div> <picture class="tile-img"> <!--[if IE 9]><video style="display: none;"><![endif]--> <source media="(min-width: 768px)" srcset="//placehold.it/560x270 1x, //placehold.it/1120x540 2x"> <!--[if IE 9]></video><![endif]--> <img class="tile-img" src="" alt="sample showing image sizes" srcset="//placehold.it/285x285 1x, //placehold.it/570x570 2x"> </picture> <div class="tile-bd"> <div class="row row_tighter"> <p class="txt mix-txt_up mix-txt_medium"> Article </p> </div> <div class="row row_tight"> <h4 class="txt txt_3"> Why Choose St. Luke's To Deliver Your Baby? </h4> </div> <div class="tile-bd-extra"> <div class="row row_tight"> <div class="txt">by Ken Smith | 5/12/14</div> </div> <div class="row row_tight"> <p class="txt txt_1">Lorem ipsum dolor sit amet, proin consectetur adipiscing Aenean elit euismod dolor bibendum laoreet. Elit euismod dolor ipsum amet... </p> </div> </div> </div> <div class="tile-ft"> <div class="txt txt_2 mix-txt_up mix-txt_medium"> <div class="link link_camo mix-link_arrow"> read more </div> </div> </div> </a> </li> <li> <div class="row"> <h1 class="hdg"> Featured Tile (no image) </h1> </div> <a href="#0" class="tile tile_noImage mix-tile_wide mix-tile_blue "> <div class="tile-flag tile-flag_feat"> featured </div> <picture class="tile-img"> <!--[if IE 9]><video style="display: none;"><![endif]--> <source media="(min-width: 768px)" srcset="//placehold.it/560x270 1x, //placehold.it/1120x540 2x"> <!--[if IE 9]></video><![endif]--> <img class="tile-img" src="" alt="sample showing image sizes" srcset="//placehold.it/285x285 1x, //placehold.it/570x570 2x"> </picture> <div class="tile-bd"> <div class="row row_tighter"> <p class="txt mix-txt_up mix-txt_medium"> Article </p> </div> <div class="row row_tight"> <h4 class="txt txt_3"> Why Choose St. Luke's To Deliver Your Baby? </h4> </div> <div class="tile-bd-extra"> <div class="row row_tight"> <div class="txt">by Ken Smith | 5/12/14</div> </div> <div class="row row_tight"> <p class="txt txt_1">Lorem ipsum dolor sit amet, proin consectetur adipiscing Aenean elit euismod dolor bibendum laoreet. Elit euismod dolor ipsum amet... </p> </div> </div> </div> <div class="tile-ft"> <div class="txt txt_2 mix-txt_up mix-txt_medium"> <div class="link link_camo mix-link_arrow"> read more </div> </div> </div> </a> </li> </ul> </div> <div class="row"> <ul class="blocks mix-blocks_sm1up mix-blocks_md2up mix-blocks_lg4up"> <li> <div class="row"> <div class="hdg">Article / Blog Post</div> </div> <a href="#0" class="tile "> <img src="//placehold.it/270x270" alt="" class="tile-img"> <div class="tile-bd"> <div class="row row_tighter"> <p class="txt mix-txt_up mix-txt_medium"> Article </p> </div> <div class="row row_tight"> <h4 class="txt txt_3"> Why Choose St. Luke's To Deliver Your Baby? </h4> </div> <div class="tile-bd-extra"> <div class="row row_tight"> <div class="txt">by Ken Smith | 5/12/14</div> </div> <div class="row row_tight"> <p class="txt txt_1">Lorem ipsum dolor sit amet, proin consectetur adipiscing Aenean elit euismod dolor bibendum laoreet. Elit euismod dolor ipsum amet... </p> </div> </div> </div> <div class="tile-ft"> <div class="txt txt_2 mix-txt_up mix-txt_medium"> <div class="link link_camo mix-link_arrow"> read more </div> </div> </div> </a> </li> <li> <div class="row"> <div class="hdg">No Image</div> </div> <a href="#0" class="tile tile_noImage mix-tile_teal "> <img src="//placehold.it/270x270" alt="" class="tile-img"> <div class="tile-bd"> <div class="row row_tighter"> <p class="txt mix-txt_up mix-txt_medium"> Article </p> </div> <div class="row row_tight"> <h4 class="txt txt_3"> Why Choose St. Luke's To Deliver Your Baby? </h4> </div> <div class="tile-bd-extra"> <div class="row row_tight"> <div class="txt">by Ken Smith | 5/12/14</div> </div> <div class="row row_tight"> <p class="txt txt_1">Lorem ipsum dolor sit amet, proin consectetur adipiscing Aenean elit euismod dolor bibendum laoreet. Elit euismod dolor ipsum amet... </p> </div> </div> </div> <div class="tile-ft"> <div class="txt txt_2 mix-txt_up mix-txt_medium"> <div class="link link_camo mix-link_arrow"> read more </div> </div> </div> </a> </li> <li> <div class="row"> <div class="hdg">Class / Event</div> </div> <a href="#0" class="tile mix-tile_event mix-tile_maroon "> <img src="//placehold.it/270x270" alt="" class="tile-img"> <div class="tile-bd"> <div class="row row_tighter"> <p class="txt mix-txt_up mix-txt_medium"> event </p> </div> <div class="row row_tight"> <h4 class="txt txt_3"> Lorem Ipsum Dolor Sit Amet </h4> </div> <div class="tile-bd-extra"> <div class="row row_tight"> <div class="media"> <div class="media-img"> <i class="icon icon_loc-white">location icon</i> </div> <div class="media-bd"> <div class="txt txt_1">St Luke's Boise Medical Center South Tower - Anderson Center 100 E. Idaho Street, Boise</div> </div> </div> </div> </div> </div> <div class="tile-ft"> <div class="txt txt_2 mix-txt_up mix-txt_medium"> <div class="link link_camo mix-link_arrow"> see more events </div> </div> </div> </a> </li> <li> <div class="row"> <div class="hdg">Group</div> </div> <a href="#0" class="tile mix-tile_groups mix-tile_teal "> <img src="//placehold.it/270x270" alt="" class="tile-img"> <div class="tile-bd"> <div class="row row_tighter"> <p class="txt mix-txt_up mix-txt_medium"> groups </p> </div> <div class="row row_tight"> <h4 class="txt txt_3"> Lorem Ipsum Dolor Sit Amet </h4> </div> <div class="tile-bd-extra"> <div class="row row_tight"> <div class="media"> <div class="media-img"> <i class="icon icon_calendar-white">calendar icon</i> </div> <div class="media-bd"> <div class="txt txt_1">Thursday, July 8th, 2014 2:00pm-3:00pm</div> </div> </div> </div> <div class="row row_tight"> <div class="media"> <div class="media-img"> <i class="icon icon_loc-white">location icon</i> </div> <div class="media-bd"> <div class="txt txt_1">Pediatric Physician Center, Family Room</div> </div> </div> </div> <div class="row row_tight"> <div class="media"> <div class="media-img"> <i class="icon icon_price-white">price icon</i> </div> <div class="media-bd"> <div class="txt txt_1">Free, No Registration Required</div> </div> </div> </div> </div> </div> <div class="tile-ft"> <div class="txt txt_2 mix-txt_up mix-txt_medium"> <div class="link link_camo mix-link_arrow"> see more groups </div> </div> </div> </a> </li> <li> <div class="row"> <div class="hdg">Location</div> </div> <a href="#0" class="tile tile_noImage mix-tile_locations mix-tile_grayblue "> <img src="//placehold.it/270x270" alt="" class="tile-img"> <div class="tile-bd"> <div class="row row_tighter"> <p class="txt mix-txt_up mix-txt_medium"> locations </p> </div> <div class="row row_tight"> <h4 class="txt txt_3"> 25 Locations Perform This Procedure </h4> </div> <div class="tile-bd-extra"> </div> </div> <div class="tile-ft"> <div class="txt txt_2 mix-txt_up mix-txt_medium"> <div class="link link_camo mix-link_arrow"> see locations </div> </div> </div> </a> </li> <li> <div class="row"> <div class="hdg">Medical Record</div> </div> <a href="#0" class="link link_camo"> <div class="tile mix-tile_maroon"> <img src="//placehold.it/270x270" alt="" class="tile-img"> <div class="tile-bd tile-bd_small"> <h3 class="txt txt_3">Mountain States Tumor Institute</h3> </div> </div> </a> </li> <li> <div class="row"> <div class="hdg">Video Tile</div> </div> <a href="https://www.youtube.com/watch?v=J---aiyznGQ" class="tile mix-tile_video mix-tile_pink " data-modal-trigger="modal_video.html" title="Excepteur Sint Occaecat Cupidatat Non Proident"> <img src="//placehold.it/270x270" alt="" class="tile-img"> <div class="tile-bd"> <div class="row row_tighter"> <p class="txt mix-txt_up mix-txt_medium"> video </p> </div> <div class="row row_tight"> <h4 class="txt txt_3"> The MTSI Process </h4> </div> <div class="tile-bd-extra"> <div class="row row_tight"> <div class="txt">by Ken Smith | 5/12/14</div> </div> <div class="row row_tight"> <p class="txt txt_1">Lorem ipsum dolor sit amet, proin consectetur adipiscing Aenean elit euismod dolor bibendum laoreet. Elit euismod dolor ipsum amet... </p> </div> </div> </div> <div class="tile-ft"> <div class="txt txt_2 mix-txt_up mix-txt_medium"> <div class="link link_camo mix-link_arrow"> watch video </div> </div> </div> </a> </li> <li> <div class="row"> <div class="hdg">Tile with Flag</div> </div> <a href="https://www.youtube.com/watch?v=J---aiyznGQ" class="tile mix-tile_video mix-tile_green " data-modal-trigger="modal_video.html" title="Excepteur Sint Occaecat Cupidatat Non Proident"> <div class="tile-flag"> <div class="box box_flag"> <i class="icon icon_childLogo mix-icon_childFlag"></i> </div> </div> <img src="//placehold.it/270x270" alt="" class="tile-img"> <div class="tile-bd"> <div class="row row_tighter"> <p class="txt mix-txt_up mix-txt_medium"> video </p> </div> <div class="row row_tight"> <h4 class="txt txt_3"> The MTSI Process </h4> </div> <div class="tile-bd-extra"> <div class="row row_tight"> <div class="txt">by Ken Smith | 5/12/14</div> </div> <div class="row row_tight"> <p class="txt txt_1">Lorem ipsum dolor sit amet, proin consectetur adipiscing Aenean elit euismod dolor bibendum laoreet. Elit euismod dolor ipsum amet... </p> </div> </div> </div> <div class="tile-ft"> <div class="txt txt_2 mix-txt_up mix-txt_medium"> <div class="link link_camo mix-link_arrow"> watch video </div> </div> </div> </a> </li> <li> <div class="row"> <div class="hdg">Image with Flag</div> </div> <a href="#0" class="tile "> <div class="tile-flag"> <div class="box box_flag"> <i class="icon icon_childLogo mix-icon_childFlag"></i> </div> </div> <img src="//placehold.it/270x270" alt="" class="tile-img"> </a> </li> </ul> </div> <h1 class="hdg"> Childrens tile colors </h1> <div class="row"> <ul class="blocks mix-blocks_sm1up mix-blocks_md2up mix-blocks_lg4up"> <li> <a href="#0" class="tile mix-tile_brightGreen "> <div class="tile-flag"> <div class="box box_flag"> <i class="icon icon_childLogo mix-icon_childFlag"></i> </div> </div> <img src="//placehold.it/270x270" alt="" class="tile-img"> <div class="tile-bd"> <div class="row row_tighter"> <p class="txt mix-txt_up mix-txt_medium"> Article </p> </div> <div class="row row_tight"> <h4 class="txt txt_3"> Why Choose St. Luke's To Deliver Your Baby? </h4> </div> <div class="tile-bd-extra"> <div class="row row_tight"> <div class="txt">by Ken Smith | 5/12/14</div> </div> <div class="row row_tight"> <p class="txt txt_1">Lorem ipsum dolor sit amet, proin consectetur adipiscing Aenean elit euismod dolor bibendum laoreet. Elit euismod dolor ipsum amet... </p> </div> </div> </div> <div class="tile-ft"> <div class="txt txt_2 mix-txt_up mix-txt_medium"> <div class="link link_camo mix-link_arrow"> read more </div> </div> </div> </a> </li> <li> <a href="#0" class="tile mix-tile_yellow "> <div class="tile-flag"> <div class="box box_flag"> <i class="icon icon_childLogo mix-icon_childFlag"></i> </div> </div> <img src="//placehold.it/270x270" alt="" class="tile-img"> <div class="tile-bd"> <div class="row row_tighter"> <p class="txt mix-txt_up mix-txt_medium"> Article </p> </div> <div class="row row_tight"> <h4 class="txt txt_3"> Why Choose St. Luke's To Deliver Your Baby? </h4> </div> <div class="tile-bd-extra"> <div class="row row_tight"> <div class="txt">by Ken Smith | 5/12/14</div> </div> <div class="row row_tight"> <p class="txt txt_1">Lorem ipsum dolor sit amet, proin consectetur adipiscing Aenean elit euismod dolor bibendum laoreet. Elit euismod dolor ipsum amet... </p> </div> </div> </div> <div class="tile-ft"> <div class="txt txt_2 mix-txt_up mix-txt_medium"> <div class="link link_camo mix-link_arrow"> read more </div> </div> </div> </a> </li> <li> <a href="#0" class="tile mix-tile_orange "> <div class="tile-flag"> <div class="box box_flag"> <i class="icon icon_childLogo mix-icon_childFlag"></i> </div> </div> <img src="//placehold.it/270x270" alt="" class="tile-img"> <div class="tile-bd"> <div class="row row_tighter"> <p class="txt mix-txt_up mix-txt_medium"> Article </p> </div> <div class="row row_tight"> <h4 class="txt txt_3"> Why Choose St. Luke's To Deliver Your Baby? </h4> </div> <div class="tile-bd-extra"> <div class="row row_tight"> <div class="txt">by Ken Smith | 5/12/14</div> </div> <div class="row row_tight"> <p class="txt txt_1">Lorem ipsum dolor sit amet, proin consectetur adipiscing Aenean elit euismod dolor bibendum laoreet. Elit euismod dolor ipsum amet... </p> </div> </div> </div> <div class="tile-ft"> <div class="txt txt_2 mix-txt_up mix-txt_medium"> <div class="link link_camo mix-link_arrow"> read more </div> </div> </div> </a> </li> </ul> </div>
*/
.tile {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  position: relative;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  text-align: left;
  color: #ffffff; }
  .tile .tile-bd,
  .tile .tile-flag_feat {
    background-color: rgba(255, 200, 47, 0.85); }

.tile::before {
  display: block;
  position: relative;
  z-index: -1;
  padding-top: 100%;
  content: " "; }

.tile * {
  cursor: pointer !important; }

.tile-bd {
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  z-index: 4;
  border-radius: 0 0 6px 6px;
  background-color: inherit;
  padding: 20px;
  width: 100%;
  height: 130px;
  overflow: hidden;
  text-align: left;
  color: #ffffff; }

.tile-bd::before {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: transparent;
  padding: 100%;
  content: " "; }

.tile-ft {
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  padding: 20px; }

.tile-img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%; }

/* flags */
.tile-flag {
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  transition: opacity 0.2s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  padding: 10px; }

.tile-flag_feat {
  border-radius: 6px 0 6px 0;
  background-color: inherit;
  padding: 0 22px 0 22px;
  height: 53px;
  text-transform: uppercase;
  line-height: 53px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 500; }

/* no image tiles */
.tile_noImage .tile-flag {
  opacity: 0; }

.tile_noImage .tile-bd {
  border-radius: 6px;
  box-shadow: inset 0 0 20vw rgba(0, 0, 0, 0.3);
  height: 100%; }

.tile_noImage .tile-bd-by,
.tile_noImage .tile-bd-extra,
.tile_noImage .tile-ft {
  opacity: 1; }

.tile_noImage > .tile-img {
  display: none !important; }

/* small panel */
.tile-bd_small {
  display: -webkit-box;
  display: -webkit-flex;
  /* display: -ms-flexbox; */
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center; }

/* tile body sections */
.tile-bd-tag {
  margin-bottom: 5px; }

.tile-bd-title {
  overflow: hidden;
  max-height: 42px; }

.tile-bd-by {
  opacity: 0;
  padding-top: 12px; }

.tile-bd-extra {
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  transition: opacity 0.2s;
  opacity: 0;
  padding-top: 12px; }

.tile-bd-extra_clamp {
  overflow: hidden;
  max-height: 68px; }

/* colors */
.mix-tile_purple .tile-bd,
.mix-tile_purple .tile-flag_feat {
  background-color: rgba(173, 138, 185, 0.85); }

.mix-tile_pink .tile-bd,
.mix-tile_pink .tile-flag_feat {
  background-color: rgba(186, 96, 132, 0.85); }

.mix-tile_aqua .tile-bd,
.mix-tile_aqua .tile-flag_feat {
  background-color: rgba(45, 212, 199, 0.85); }

.mix-tile_teal .tile-bd,
.mix-tile_teal .tile-flag_feat {
  background-color: rgba(0, 122, 107, 0.85); }

.mix-tile_green .tile-bd,
.mix-tile_green .tile-flag_feat {
  background-color: rgba(105, 127, 17, 0.85); }

.mix-tile_mustard .tile-bd,
.mix-tile_mustard .tile-flag_feat {
  background-color: rgba(209, 142, 0, 0.85); }

.mix-tile_maroon .tile-bd,
.mix-tile_maroon .tile-flag_feat {
  background-color: rgba(134, 36, 78, 0.85); }

.mix-tile_blue .tile-bd,
.mix-tile_blue .tile-flag_feat {
  background-color: rgba(0, 134, 207, 0.85); }

.mix-tile_grayblue .tile-bd,
.mix-tile_grayblue .tile-flag_feat {
  background-color: rgba(58, 74, 88, 0.85); }

.mix-tile_orange .tile-bd,
.mix-tile_orange .tile-flag_feat {
  background-color: rgba(255, 90, 0, 0.85); }

.mix-tile_orangeyellow .tile-bd,
.mix-tile_orangeyellow .tile-flag_feat {
  background-color: rgba(244, 182, 9, 0.85); }

.mix-tile_brightGreen .tile-bd,
.mix-tile_brightGreen .tile-flag_feat {
  background-color: rgba(102, 189, 43, 0.85); }

.mix-tile_yellow .tile-bd,
.mix-tile_yellow .tile-flag_feat {
  background-color: rgba(255, 200, 47, 0.85); }

/* play button overlay for video tiles */
.tile-videoOverlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.35); }

.tile-videoOverlay:before,
.tile-videoOverlay:after {
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  top: 35%;
  left: 50%;
  z-index: 3;
  content: " "; }

.tile-videoOverlay:before {
  border: 2px solid #ffffff;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  width: 42px;
  height: 42px; }

.tile-videoOverlay:after {
  margin-left: 2px;
  border: 8px solid #002c77;
  border-right: 0;
  border-left-width: 13px;
  border-color: transparent;
  border-left-color: #ffffff;
  width: 0;
  height: 0; }

/**
@name Tooltip
@description Tooltip with extensions for all directions.

@markup
<div class="box" style="height: 250px;">
    <div class="row" style="text-align: right;">
        <div class="tool mix-tool_arrow">
            <div class="tool-txt">
                <div class="txt txt_2 mix-txt_medium">
                        Bottom right
                </div>
            </div>
            <div class="tool-tip">
                <ul class="vList vList_buttons">
                    <li>
                        <a href="#" class="listBtn">
                            <div class="listBtn-l">
                                <i class="icon icon_calendar-white">directions icon</i>
                            </div>
                            <div class="listBtn-txt mix-listBtn-txt_none">Make An Appointment</div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="listBtn">
                            <div class="listBtn-l">
                                <i class="icon icon_download-white">directions icon</i>
                            </div>
                            <div class="listBtn-txt mix-listBtn-txt_none">Download Patient Forms</div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="listBtn">
                            <div class="listBtn-l">
                                <i class="icon icon_directions-white">directions icon</i>
                            </div>
                            <div class="listBtn-txt mix-listBtn-txt_none">Get Directions</div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="tool mix-tool_arrow">
            <div class="tool-txt">
                <div class="txt txt_2 mix-txt_medium">
                    Bottom left
                </div>
            </div>
            <div class="tool-tip tool-tip_btmLeft">
                <ul class="vList vList_buttons">
                    <li>
                        <a href="#" class="listBtn">
                            <div class="listBtn-txt mix-listBtn-txt_none">Boise, Idaho</div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="listBtn">
                            <div class="listBtn-txt mix-listBtn-txt_none">Quahog, Rhode Island</div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="listBtn">
                            <div class="listBtn-txt mix-listBtn-txt_none">Dallas, Texas</div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="tool">
            <div class="tool-txt">
                <div class="txt txt_2 mix-txt_medium">
                    Right and centered
                </div>
            </div>
            <div class="tool-tip tool-tip_right">
               <ul class="vList vList_buttons">
                   <li>
                       <a href="#" class="listBtn">
                           <div class="listBtn-l">
                               <i class="icon icon_calendar-white">directions icon</i>
                           </div>
                           <div class="listBtn-txt mix-listBtn-txt_none">Make An Appointment</div>
                       </a>
                   </li>
                   <li>
                       <a href="#" class="listBtn">
                           <div class="listBtn-l">
                               <i class="icon icon_download-white">directions icon</i>
                           </div>
                           <div class="listBtn-txt mix-listBtn-txt_none">Download Patient Forms</div>
                       </a>
                   </li>
                   <li>
                       <a href="#" class="listBtn">
                           <div class="listBtn-l">
                               <i class="icon icon_directions-white">directions icon</i>
                           </div>
                           <div class="listBtn-txt mix-listBtn-txt_none">Get Directions</div>
                       </a>
                   </li>
               </ul>
            </div>
        </div>
    </div>
    <div  class="row" style="text-align: right;">
        <div class="tool tool_left">
            <div class="tool-txt">
                <div class="txt txt_2 mix-txt_medium">
                    Left and centered
                </div>
            </div>
            <div class="tool-tip tool-tip_left">
               <ul class="vList vList_buttons">
                   <li>
                       <a href="#" class="listBtn">
                           <div class="listBtn-l">
                               <i class="icon icon_calendar-white">directions icon</i>
                           </div>
                           <div class="listBtn-txt mix-listBtn-txt_none">Make An Appointment</div>
                       </a>
                   </li>
                   <li>
                       <a href="#" class="listBtn">
                           <div class="listBtn-l">
                               <i class="icon icon_download-white">directions icon</i>
                           </div>
                           <div class="listBtn-txt mix-listBtn-txt_none">Download Patient Forms</div>
                       </a>
                   </li>
                   <li>
                       <a href="#" class="listBtn">
                           <div class="listBtn-l">
                               <i class="icon icon_directions-white">directions icon</i>
                           </div>
                           <div class="listBtn-txt mix-listBtn-txt_none">Get Directions</div>
                       </a>
                   </li>
               </ul>
            </div>
        </div>
    </div>
    <div  class="row" style="text-align: right;">
        <div class="tool tool_top">
            <div class="tool-txt">
                <div class="txt txt_2 mix-txt_medium">
                    Top right (different color)
                </div>
            </div>
            <div class="tool-tip tool-tip_top mix-tool-tip_pale">
               <div class="box box_blue">
                   <div class="txt txt_3 mix-txt_medium">Look at me! I'm pale blue!</div>
               </div>
            </div>
        </div>
    </div>
    <div  class="row">
        <div class="tool tool_topLeft">
            <div class="tool-txt">
                <div class="txt txt_2 mix-txt_medium">
                    Top left
                </div>
            </div>
            <div class="tool-tip tool-tip_topLeft mix-tool-tip_pale">
               <div class="box box_blue">
                   <div class="txt txt_3 mix-txt_medium">Look at me! I'm pale blue!</div>
               </div>
            </div>
        </div>
    </div>
</div>
*/
.tool {
  display: inline-block;
  position: relative;
  border-color: #68ace5; }

.mix-tool_arrow {
  display: inline-block;
  padding-right: 26px; }

.mix-tool_arrow:before,
.mix-tool_arrow:after {
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
  position: absolute;
  right: 0;
  bottom: 8px;
  background-color: #002c77;
  width: 10px;
  height: 1px;
  content: ""; }

.mix-tool_arrow:before {
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
  right: 7px; }

.mix-tool_arrow:after {
  -webkit-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  -ms-transform: rotate(-40deg);
  transform: rotate(-40deg);
  right: 0; }

.mix-tool_arrow:hover:before,
.mix-tool_arrow:hover:after {
  background-color: #68ace5; }

.mix-tool_arrow:hover:before {
  -webkit-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  -ms-transform: rotate(-40deg);
  transform: rotate(-40deg); }

.mix-tool_arrow:hover:after {
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg); }

.tool-txt {
  display: inline-block;
  color: #002c77; }

.tool:hover > .tool-txt {
  color: #68ace5; }

.mix-tool-txt_camo {
  color: inherit; }

.tool:hover > .mix-tool-txt_camo {
  color: inherit; }

.tool:hover > .tool-tip {
  display: block; }

.tool-tip {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 7;
  border-color: #68ace5;
  padding-top: 20px;
  text-align: left;
  white-space: nowrap;
  -webkit-transform: translateZ(1px);
  -moz-transform: translateZ(1px);
  -ms-transform: translateZ(1px);
  transform: translateZ(1px); }

.tool-tip.isOn {
  display: block; }

.tool-tip.isOff {
  display: none !important; }

.mix-tool-tip_static {
  width: 270px;
  white-space: normal; }

.mix-tool-tip_calendar {
  width: 282px;
  white-space: normal; }

.tool-tip:after {
  position: absolute;
  top: -8px;
  right: 10px;
  border: 5px solid #002c77;
  border-width: 15px;
  border-color: transparent;
  border-bottom-color: inherit;
  width: 0;
  height: 0;
  content: ""; }

.mix-tool-tip_hasSetWidth {
  white-space: normal; }

.tool-tip_btmLeft {
  right: auto;
  left: 0; }

.tool-tip_btmLeft:after {
  right: auto;
  left: 10px; }

.tool-tip_top {
  top: auto;
  bottom: 100%;
  margin-bottom: -16px;
  padding-bottom: 32px;
  text-align: left; }

.tool-tip_top:after {
  top: auto;
  right: 10px;
  bottom: 4px;
  border-color: transparent;
  border-top-color: inherit; }

.tool-tip_topLeft {
  top: auto;
  right: auto;
  bottom: 100%;
  left: 0;
  margin-bottom: -16px;
  padding-bottom: 32px;
  text-align: left; }

.tool-tip_topLeft:after {
  top: auto;
  right: auto;
  bottom: 4px;
  left: 10px;
  border-color: transparent;
  border-top-color: inherit; }

.tool-tip_left {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 100%;
  margin-right: -20px;
  border-radius: 6px;
  padding: 0 40px 0 0; }

.tool-tip_left:after {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 10px;
  border-color: transparent;
  border-left-color: inherit; }

.tool-tip_right {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: auto;
  left: 100%;
  transform: translateY(-50%);
  margin-left: -20px;
  border-radius: 6px;
  padding: 0 0 0 40px; }

.tool-tip_right:after {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 10px;
  border-color: transparent;
  border-right-color: inherit; }

.mix-tool-tip_pale {
  border-color: #e8f3fb; }

.tool-txt_camo {
  color: inherit !important; }

/**
@name Text
@description Typography, mainly used for headings and body text.

@markup
<p class="txt txt_3 mix-txt_medium">Image overlay description content</p>
<h3 class="txt txt_2 mix-txt_medium">Also used as a heading in some instances</h3>
<p class="txt txt_1">Main body / paragraph text</p>
<span class="txt mix-txt_cap mix-txt_medium">SHOWING 5 of 25</span>
<p class="txt"> tiny text </p>
<p class="txt mix-txt_italic">Italic text</p>
*/
.txt {
  line-height: 1.22;
  font-size: 13px;
  font-weight: 400; }

.txt_1 {
  font-size: 14px; }

.txt_2 {
  font-size: 16px; }

.txt_3 {
  line-height: 1.2222222222;
  font-size: 18px; }

.txt_7 {
  line-height: 0.8;
  font-size: 16px; }

.txt_filter {
  line-height: 1.9444444444;
  font-size: 18px; }

.txt_arrow {
  line-height: 1;
  font-size: 10px; }

/* text transform */
.mix-txt_up {
  text-transform: uppercase; }

.mix-txt_cap {
  text-transform: capitalize; }

/* colors */
.mix-txt_white {
  color: #ffffff; }

.mix-txt_mdGray {
  color: #b3b3b3; }

.mix-txt_gray {
  color: #666666; }

.mix-txt_dkBlue {
  color: #002c77; }

.mix-txt_ltBlue {
  color: #68ace5; }

/* weights */
.mix-txt_thin {
  letter-spacing: 0.05em;
  font-weight: 200; }

.mix-txt_light {
  font-weight: 300; }

.mix-txt_roman {
  font-weight: 400; }

.mix-txt_medium {
  font-weight: 500; }

.mix-txt_bold {
  font-weight: 600; }

/* other adjustments */
.mix-txt_baseline {
  vertical-align: baseline; }

.mix-txt_italic {
  font-style: italic; }

.mix-txt_middle {
  vertical-align: middle; }

.mix-txt_pointer {
  cursor: pointer; }

.userContent {
  line-height: 17px;
  color: #666666;
  font-size: 14px;
  clear: both; }

.userContent h1 {
  margin: 20px 0 12px 0;
  line-height: 28px;
  color: #002c77;
  font-size: 24px;
  font-weight: 200; }

.userContent h2 {
  margin: 20px 0 12px 0;
  line-height: 28px;
  color: #002c77;
  font-size: 24px;
  font-weight: 200; }

.userContent h1:first-child {
  margin-top: 0; }

.userContent h2:first-child {
  margin-top: 0; }

.userContent h3 {
  margin-bottom: 10px;
  line-height: 26px;
  color: #002c77;
  font-size: 20px;
  font-weight: 500; }

.userContent h4 {
  margin-bottom: 8px;
  line-height: 22px;
  color: #666666;
  font-size: 18px;
  font-weight: 500; }

.userContent h5 {
  margin-bottom: 8px;
  line-height: 20px;
  color: #666666;
  font-size: 16px;
  font-weight: 500; }

.userContent h6 {
  margin-bottom: 8px;
  line-height: 17px;
  color: #666666;
  font-size: 14px; }

.userContent p {
  margin-bottom: 20px; }
  .userContent p:last-child {
    margin-bottom: 0; }

.userContent img {
  margin-bottom: 26px;
  border-radius: 6px;
  max-width: 100%;
  height: auto; }

.userContent figure {
  display: table;
  float: left;
  margin: 0 20px 20px 0;
  max-width: 445px; }

.userContent figure img {
  margin: 0;
  width: auto;
  max-width: 100%; }

.userContent figure img.rawimage {
  max-width: none; }

.userContent figure.video {
  margin: 0 20px 20px 0;
  width: 350px;
  max-width: 350px; }

.userContent figcaption {
  display: table-caption;
  margin-top: 6px;
  caption-side: bottom;
  line-height: 17px;
  color: #002c77;
  font-size: 13px;
  font-style: italic; }

.userContent figure-right {
  display: table;
  float: right;
  margin: 0 0 20px 20px;
  max-width: 445px; }

.userContent figure-right img {
  margin: 0;
  width: auto;
  max-width: 100%; }

.userContent figure-right img.rawimage {
  max-width: none; }

.userContent a:link {
  text-decoration: none;
  color: #002c77;
  font-weight: 500; }

.userContent a:visited {
  color: #346cae; }

.userContent a:focus,
.userContent a:hover {
  color: #68ace5; }

.userContent blockquote {
  margin-bottom: 20px;
  background: #efefef;
  padding: 20px;
  padding-bottom: 0;
  overflow: hidden; }

/* ---------------------------------------------------------------------
userContent text formatting
------------------------------------------------------------------------ */
.userContent strong,
.userContent b {
  font-weight: bold; }

.userContent em,
.userContent i {
  font-style: italic; }

.userContent del,
.userContent strike,
.userContent s {
  text-decoration: line-through; }

.userContent u,
.userContent ins {
  text-decoration: underline; }

.userContent sup {
  vertical-align: super;
  font-size: smaller; }

.userContent sub {
  vertical-align: sub;
  font-size: smaller; }

.userContent big {
  font-size: larger; }

.userContent small {
  font-size: smaller; }

.userContent abbr,
.userContent acronym {
  border-bottom: dotted 1px; }

.userContent cite,
.userContent dfn {
  font-style: italic; }

.userContent q {
  font-style: italic; }

.userContent q::before {
  content: open-quote; }

.userContent q::after {
  content: close-quote; }

.userContent q:lang(en) {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

.userContent bdo {
  direction: rtl; }

.userContent blink {
  text-decoration: blink; }

/* ---------------------------------------------------------------------
userContent computer output
------------------------------------------------------------------------ */
.userContent pre {
  margin: 0 0 12px 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "Lucida Console", Monaco, monospace; }

.userContent code,
.userContent samp,
.userContent tt,
.userContent kbd {
  font-family: "Lucida Console", Monaco, monospace; }

.userContent var {
  font-style: italic; }

/* ---------------------------------------------------------------------
userContent lists
------------------------------------------------------------------------ */
.userContent ul,
.userContent ol,
.userContent dl {
  margin-top: 0;
  margin-bottom: 20px;
  overflow: auto; }

.userContent ul {
  list-style-type: disc; }

.userContent ol {
  list-style-type: decimal; }

.userContent dt {
  font-weight: bold; }

.userContent li,
.userContent dd {
  margin: 0 0 4px 24px; }

/* nested lists have no top/bottom margins */
.userContent ul ul,
.userContent ul ol,
.userContent ul dl,
.userContent ol ul,
.userContent ol ol,
.userContent ol dl,
.userContent dl ul,
.userContent dl ol,
.userContent dl dl {
  margin-top: 0;
  margin-bottom: 0; }

/* 2 deep unordered lists use a circle */
.userContent ol ul,
.userContent ul ul {
  list-style-type: circle; }

/* 3 deep (or more) unordered lists use a square */
.userContent ol ol ul,
.userContent ol ul ul,
.userContent ul ol ul,
.userContent ul ul ul {
  list-style-type: square; }

/* ---------------------------------------------------------------------
userContent tables
------------------------------------------------------------------------ */
.userContent table {
  margin: 0 0 20px 0;
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 2px;
  color: #ffffff; }

.userContent caption {
  font-size: smaller; }

.userContent tr {
  vertical-align: middle; }

.userContent tbody {
  vertical-align: middle; }

.userContent thead {
  vertical-align: middle; }

.userContent tfoot {
  vertical-align: middle; }

.userContent td {
    background-color: #f8f8f8;
    padding: 12px 12px;
    vertical-align: inherit;
    text-align: inherit;
    color: #666;}

.userContent th {
    background-color: #4b96de;
    padding: 12px 12px;
    vertical-align: inherit;
    text-align: inherit;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;}

.userContent tr:nth-child(even) td {
    background-color: #DBEAEF;
    color: #666;}

/* ---------------------------------------------------------------------
userContent horizontal rule
------------------------------------------------------------------------ */
.userContent hr {
  margin: 40px 0;
  border: none;
  background: #efefef;
  height: 3px;
  line-height: 1px;
  color: #666666;
  font-size: 1px; }

/* ---------------------------------------------------------------------
user-content media
------------------------------------------------------------------------ */
.user-content img,
.user-content video,
.user-content audio {
  max-width: 100% !important; }

/**
@name video thumb
@description overlays an image with a "play" icon

@markup
<a href="#" class="videoThumb">
    <img src="//placehold.it/500x300" alt="city" class="videoThumb-img">
</a>
<span class="videoThumb">
    <img src="//placehold.it/500x300" alt="city" class="videoThumb-img">
</span>
*/
.videoThumb {
  display: inline-block;
  position: relative; }

.videoThumb:before {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 50%;
  z-index: 1;
  margin-left: -25px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.25);
  width: 45px;
  height: 45px;
  content: ""; }

.videoThumb:after {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 50%;
  margin-left: -5px;
  border: 8px solid #002c77;
  border-left-width: 15px;
  border-color: transparent;
  border-left-color: #ffffff;
  width: 0;
  height: 0;
  content: ""; }

.videoThumb-img {
  display: block;
  border-radius: 6px; }

/**
@name Vertical List
@description vertical lists with

@markup
<div class="row">
    <h1 class="hdg"> Standard List </h1>
    <ul class="vList">
        <li><span class="txt txt_2">Take a more active role in treatment and survivorship</span></li>
        <li><span class="txt txt_2">Improve your quality of life</li>
        <li><span class="txt txt_2">Reduce anxiety and stress</li>
        <li><span class="txt txt_2">Provide a sense of overall well-being</li>
    </ul>
</div>
<div class="row">
    <h1 class="hdg"> Numbered List </h1>
    <ol class="vList mix-vList_ol">
        <li><span class="txt txt_2">Take a more active role in treatment and survivorship</span></li>
        <li><span class="txt txt_2">Improve your quality of life</li>
        <li><span class="txt txt_2">Reduce anxiety and stress</li>
        <li><span class="txt txt_2">Provide a sense of overall well-being</li>
    </ol>
</div>
<div class="row">
    <h1 class="hdg"> Bulleted List </h1>
    <ul class="vList mix-vList_bullets">
        <li><span class="txt txt_2">Take a more active role in treatment and survivorship</span></li>
        <li><span class="txt txt_2">Improve your quality of life</li>
        <li><span class="txt txt_2">Reduce anxiety and stress</li>
        <li><span class="txt txt_2">Provide a sense of overall well-being</li>
    </ul>
</div>
<div class="row">
    <h1 class="hdg"> Loose List </h1>
    <ol class="vList vList_loose">
        <li><span class="txt txt_2">Take a more active role in treatment and survivorship</span></li>
        <li><span class="txt txt_2">Improve your quality of life</li>
        <li><span class="txt txt_2">Reduce anxiety and stress</li>
        <li><span class="txt txt_2">Provide a sense of overall well-being</li>
    </ol>
</div>
<div class="row">
    <h1 class="hdg"> Tight List </h1>
    <ol class="vList vList_tight">
        <li><span class="txt txt_2">Take a more active role in treatment and survivorship</span></li>
        <li><span class="txt txt_2">Improve your quality of life</li>
        <li><span class="txt txt_2">Reduce anxiety and stress</li>
        <li><span class="txt txt_2">Provide a sense of overall well-being</li>
    </ol>
</div>
<div class="row">
    <h1 class="hdg"> Button List </h1>
    <ol class="vList vList_buttons">
        <li><span class="listBtn"><span class="listBtn-txt">Take a more active role in treatment and survivorship</span></span></li>
        <li><span class="listBtn"><span class="listBtn-txt">Improve your quality of life</span></span></li>
        <li><span class="listBtn"><span class="listBtn-txt">Reduce anxiety and stress</span></span></li>
        <li><span class="listBtn"><span class="listBtn-txt">Provide a sense of overall well-being</span></span></li>
    </ol>
</div>
<div class="row">
    <h1 class="hdg"> Truncated List </h1>
    <ol class="vList mix-vList_truncated">
        <li><span class="txt txt_2">Take a more active role in treatment and survivorship</span></li>
        <li><span class="txt txt_2">Improve your quality of life</li>
        <li><span class="txt txt_2">Reduce anxiety and stress</li>
        <li><span class="txt txt_2">Provide a sense of overall well-being</li>
        <li><span class="txt txt_2">Reduce anxiety and stress</li>
        <li><span class="txt txt_2">Provide a sense of overall well-being</li>
    </ol>
</div>
*/
.vList {
  list-style-position: outside; }

.vList > * {
  margin-bottom: 4px; }

.vList_smushed > * {
  margin-bottom: 0; }

.vList_tighter > * {
  margin-bottom: 6px; }

.vList_tight > * {
  margin-bottom: 12px; }

.vList_lessTight > * + * {
  margin-top: 20px; }

.vList_lessLoose > * {
  margin-bottom: 27px; }

.vList_loose > * {
  margin-bottom: 34px; }

.vList_buttons {
  border-radius: 6px; }

.mix-vList_buttons_noRound {
  border-radius: 0; }

.vList_buttons > * {
  margin: 0; }

.vList_buttons > :first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit; }

.vList_buttons > :last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit; }

/* decorations */
.mix-vList_ol {
  list-style-type: decimal;
  padding-left: 26px;
  font-size: 14px; }

.mix-vList_bullets {
  list-style-type: disc;
  padding-left: 26px; }

.mix-vList_pad {
  padding: 20px; }

/* truncated lists */
.mix-vList_truncated > *:nth-child(n + 4) {
  display: none; }

@media (max-width: 767px) {
  .isHiddenSm {
    display: none !important; }
  .isLgOnly {
    display: none !important; }
  .isScrollLocked {
    position: fixed; }
  .isFullWidthSm {
    width: 100%; }
  .siteHd {
    height: 51px; }
  .mix-band_smNoPad {
    padding: 0; }
  .mix-blocks_sm1up > * {
    width: 100%; }
  .mix-blocks_sm2up > * {
    width: 50%; }
  .mix-blocks_sm3up > * {
    width: 33.3333333333%; }
  .mix-blocks_sm4up > * {
    width: 25%; }
  .mix-blocks_sm5up > * {
    width: 20%; }
  .mix-blocks_sm6up > * {
    width: 16.6666666667%; }
  .mix-blocks_sm7up > * {
    width: 14.2857142857%; }
  .mix-blocks_sm8up > * {
    width: 12.5%; }
  .mix-blocks_flushSm {
    margin: 0 0 0 0; }
    .mix-blocks_flushSm > * {
      padding: 0 0 0 0; }
  .mix-blocks_tightSm {
    margin: -12px 0 0 -12px; }
    .mix-blocks_tightSm > * {
      padding: 12px 0 0 12px; }
  .mix-blocks_isMobileCarousel {
    margin: 0 0 0 -18px;
    white-space: nowrap; }
    .mix-blocks_isMobileCarousel > * {
      padding: 0 0 0 18px; }
  .mix-blocks_isMobileCarousel > * {
    white-space: normal; }
  .mix-blocks_isBoxedCarousel {
    margin: 0 0 0 -20px; }
    .mix-blocks_isBoxedCarousel > * {
      padding: 0 0 0 20px; }
  .isScrollLocked .mix-blocks_isMobileCarousel,
  .isScrollLocked .mix-blocks_isCarousel {
    display: none; }
  .isScrollLocked .browsePanel.isOn .mix-blocks_isMobileCarousel,
  .isScrollLocked .browsePanel.isOn .mix-blocks_isCarousel,
  .isScrollLocked .browsePanel.isActive .mix-blocks_isMobileCarousel,
  .isScrollLocked .browsePanel.isActive .mix-blocks_isCarousel {
    display: block; }
  .box_infowindow {
    padding: 0;
    padding-bottom: 5px;
    max-width: calc(100vw - 119px); }
  .box_filter {
    padding: 0; }
  .box_filterControls.isOff {
    display: none; }
  .box_filterControls.isOn {
    display: block; }
  .box_view.isOff {
    display: none; }
  .box_view.isOn {
    display: block; }
  .mix-grid-col_hideSm {
    display: none; }
  .grid-col_filter {
    display: none;
    overflow-x: hidden;
    margin-right: -20px;
    background-color: #ffffff;
    padding: 0; }
  /* results grid */
  .grid_results,
  .grid-col_results,
  .grid-col_filter {
    margin: 0;
    padding: 0; }
  .grid-col_results.isOn,
  .grid-col_filter.isOn {
    display: block; }
  .grid-col_results.isOff,
  .grid-col_filter.isOff {
    display: none; }
  .mix-hide_sm {
    display: none; }
  .media_smStack > .media-img,
  .mix-media-img_smStack {
    float: none;
    margin: 0 0 20px 0;
    text-align: center; }
  .mix-media-img_childLogo {
    float: none;
    margin: 0 0 16px 0; }
  .provider {
    overflow: hidden;
    margin-left: 0;
    margin-right: 0; }
  .provider-box {
    padding-left: 0;
    padding-right: 0; }
  .providerResult + .providerResult {
    border-top: 3px solid #efefef;
    padding-top: 34px; }
  .providerResult-img {
    margin: 0 20px 0 0;
    max-width: 90px; }
  .providerResult-hd {
    color: #666666;
    margin-bottom: 16px; }
  .providerResult-bd {
    padding-top: 20px;
    overflow: visible;
    padding-left: 110px;
    clear: none; }
  .mix-providerResult-hd_gray {
    color: #666666; }
  .providerResult-loc + .providerResult-loc {
    margin-top: 20px;
    border-top: 0;
    padding-top: 0; }
  .mix-row_refine {
    display: none; }
  .mix-row_refine.isActive,
  .mix-row_refine.isOn {
    display: block; }
  .row_resultsFeedback {
    display: none; }
  .row_resultsFeedback.isOn,
  .row_resultsFeedback.isActive {
    display: block; }
  .search {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0); }
  .search-close {
    display: none; }
  .search-bd {
    max-height: 510px;
    overflow-y: scroll; }
  .search-suggestions {
    padding-left: 14px; }
  .search-ft {
    display: none; }
  .social_fb > iframe {
    width: calc(100vw - 76px); }
  .sort-bd {
    margin-bottom: 20px; }
  .mix-split_smStack {
    display: block; }
  .mix-split_smStack > * {
    display: block;
    padding: 0; }
  .mix-split_smStack > :first-child {
    margin-bottom: 12px; }
  .mix-split_smStack > .split-item_r {
    text-align: left; }
  .mix-split-item_insetLeft {
    padding-left: 20px; }
  .mix-split-item_bandSm {
    margin-right: -18px;
    margin-left: -18px;
    background-color: #efefef;
    padding: 5px; }
    .mix-split-item_bandSm,
    .mix-split_smStack > .mix-split-item_bandSm {
      text-align: center; }
  .title_head.isOff {
    display: none; }
  .mix-vList_smLined > * {
    margin: 0; }
  .mix-vList_smLined > * + * {
    border-top: 1px solid #efefef; }
  .vList_results > * + * {
    margin-top: 20px;
    border-top: 1px solid #efefef;
    padding-top: 20px; }
  .mix-wrap_smNoPad {
    padding: 0; }
  .accordion-item {
    margin-right: -18px;
    margin-left: -18px;
    border: 2px solid #efefef;
    border-right: 0;
    border-left: 0;
    padding: 5px 18px 5px 18px; }
  .accordion-item-hd {
    position: relative;
    padding-right: 52px; }
  .accordion-item-hd:after {
    position: absolute;
    top: 0;
    right: 12.6px;
    bottom: 0;
    margin: auto;
    height: 21.6px;
    font-size: 18px; }
  .accordion-item + .accordion-item {
    margin-top: -2px; }
  .accordion-item-bd {
    margin: 15px 0 15px 0;
    padding: 20px; }
  .browsePanel_initial,
  .browsePanel {
    display: none;
    position: fixed;
    top: 51px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    overflow-y: scroll;
    background-color: #ffffff; }
  .browsePanel.isActive,
  .browsePanel.isOn {
    display: block;
    display: -webkit-box;
    display: -webkit-flex;
    /* display: -ms-flexbox; */
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column; }
  .browsePanel-hd {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    background: #68ace5;
    padding: 15.5px 20px;
    padding-right: 40px;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 18px; }
  .browsePanel-hd:before,
  .browsePanel-hd:after {
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    margin: auto;
    border-right: 2px solid #ffffff;
    height: 20px;
    content: " "; }
  .browsePanel-hd:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); }
  .browsePanel-hd:after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  .browsePanel-bd {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-flex-shrink: 10000;
    -moz-flex-shrink: 10000;
    -ms-flex-negative: 10000;
    flex-shrink: 10000;
    position: relative;
    z-index: 10;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px; }
  .browsePanel-bd_noPad {
    padding: 0; }
  .browsePanel_alpha.isActive {
    display: block; }
  .browsePanel-hd_alpha {
    height: 52px; }
  .browsePanel-bd_alpha {
    position: absolute;
    top: 52px;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden; }
  .datePicker-pop {
    right: 0;
    left: auto; }
  .map-canvas {
    padding: 0;
    height: 405px; }
  .map_solo {
    margin-right: -18px;
    margin-left: -18px; }
  .modal-bd-hd {
    margin-bottom: 20px; }
  /**
 * [1] override modal defaults
 */
  .modal-bd_alpha {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    border-radius: 0;
    padding: 0;
    width: 100%; }
  .modal-bd-hd_alpha {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 0;
    background-color: #002c77;
    padding: 20px;
    height: 68px;
    color: #ffffff; }
  .modal-bd-bd_alpha {
    position: absolute;
    top: 68px;
    right: 0;
    bottom: 0;
    left: 0; }
  /**
* [1] margin out of its container
*/
  .resultsPanel_map {
    margin: -34px -20px; }
  .resultsPanel_showSm {
    display: block !important; }
  .hero {
    display: none; }
  .mix-hdg_smCamo {
    color: inherit; }
  .mix-hdg_smSm {
    font-size: 16px; }
  .link_search {
    display: block;
    padding: 16px 14px; }
  .phone {
    color: #002c77;
    text-decoration: underline; }
  .mix-txt_smGray {
    color: #666666; }
  .mix-txt_smCrop {
    position: relative;
    max-height: 3.66em;
    overflow: hidden; }
  .mix-txt_smCrop:after {
    position: absolute;
    right: 0;
    bottom: 0;
    padding-left: 1em;
    content: "\2026";
    background-color: rgba(255, 255, 255, 0);
    background-image: -webkit-linear-gradient(90deg rgba(255, 255, 255, 0), #ffffff, #ffffff);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff, #ffffff); } }

@media (min-width: 768px) {
  .isInlineBlockMd {
    display: inline-block; }
  .isSmOnly {
    display: none !important; }
  .isOneLineMd {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  body:after {
    content: "md"; }
  .homeHero-slides {
    padding-top: 53.6458333333%; }
  .homeHero-nav-list {
    font-size: 0; }
  .homeHero-nav-list > * {
    display: inline-block;
    width: 50%;
    font-size: 14px; }
  .siteHd {
    min-height: 106px; }
  .siteHd-toggle {
    font-size: 41px;
    min-width: 100px; }
  .siteHd-toggle_r:before {
    right: 12px; }
  .siteLogo {
    width: 194px; }
  .band:before {
    margin-right: 24px;
    margin-left: 24px; }
  .mix-blocks_md1up > * {
    width: 100%; }
  .mix-blocks_md2up > * {
    width: 50%; }
  .mix-blocks_md3up > * {
    width: 33.3333333333%; }
  .mix-blocks_md4up > * {
    width: 25%; }
  .mix-blocks_md5up > * {
    width: 20%; }
  .mix-blocks_md6up > * {
    width: 16.6666666667%; }
  .mix-blocks_md7up > * {
    width: 14.2857142857%; }
  .mix-blocks_md8up > * {
    width: 12.5%; }
  .blocks-i_featured {
    width: 100%; }
  .mix-blocks_mdEqual {
    display: -webkit-box;
    display: -webkit-flex;
    /* display: -ms-flexbox; */
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .mix-blocks_mdEqual > * {
    display: -webkit-box;
    display: -webkit-flex;
    /* display: -ms-flexbox; */
    display: flex;
    white-space: normal; }
  .mix-blocks_mdEqual > * > * {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex: 1; }
  .mix-blocks_isEqualCarousel > * {
    min-width: 50%;
    width: 50%; }
  .mix-blocks_mdUpEqual {
    display: -webkit-box;
    display: -webkit-flex;
    /* display: -ms-flexbox; */
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .mix-blocks_mdUpEqual > * {
    display: -webkit-box;
    display: -webkit-flex;
    /* display: -ms-flexbox; */
    display: flex;
    white-space: normal;
    margin-right: -1px; }
  .mix-blocks_mdUpEqual > * > * {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex: 1; }
  .grid-col_1of12 {
    width: 8.3333333333%; }
  .grid-col_2of12 {
    width: 16.6666666667%; }
  .grid-col_3of12 {
    width: 25%; }
  .grid-col_4of12 {
    width: 33.3333333333%; }
  .grid-col_5of12 {
    width: 41.6666666667%; }
  .grid-col_6of12 {
    width: 50%; }
  .grid-col_7of12 {
    width: 58.3333333333%; }
  .grid-col_8of12 {
    width: 66.6666666667%; }
  .grid-col_9of12 {
    width: 75%; }
  .grid-col_10of12 {
    width: 83.3333333333%; }
  .grid-col_11of12 {
    width: 91.6666666667%; }
  .grid-col_12of12 {
    width: 100%; }
  .mix-grid-col_insetLeft {
    padding-left: 50px; }
  .mix-grid-col_push1of12 {
    margin-left: 8.333333%; }
  .grid-col_sidebar {
    width: 100%; }
  .grid-col_main {
    width: 100%; }
  .grid-col_providerBio {
    width: 58.333333%; }
  .grid-col_providerInfo {
    width: 41.666667%; }
  /* 2up grid */
  .grid-col_1of2 {
    width: 50%; }
  /* 3up grid */
  .grid-col_1of3 {
    width: 33.3333333333%; }
  .grid-col_2of3 {
    width: 66.6666666667%; }
  /* 4up grid */
  .grid-col_1of4 {
    width: 25%; }
  .grid-col_3of4 {
    width: 75%; }
  /* results grid */
  .grid-col_filter {
    width: 39.583333%;
    width: calc(305px); }
  .grid-col_results {
    width: 60.416667%;
    width: calc(100% - 305px); }
  /* follow us grid */
  .grid-col_follow {
    width: 50%; }
  .grid-col_followFull {
    width: 100%; }
  /* provider grid */
  .grid-col_providerAvailability {
    float: right;
    width: calc(100% - 300px); }
  .grid-col_providerSpecialties {
    float: left;
    width: 300px; }
  .search-bd {
    border-radius: 0;
    padding: 25px 31px; }
  .search-close {
    display: none; }
  .wrap {
    padding-right: 24px;
    padding-left: 24px; }
  .wrap_nav {
    padding: 0;
    max-width: 100%; }
  .band:before {
    margin-right: 24px;
    margin-left: 24px; }
  .mix-media-img_gutterAlign {
    width: 64px; }
  .mix-media-img_tile {
    min-width: 270px; }
  .mix-media-img_lookahead {
    max-width: 270px; }
  .provider {
    padding-left: 305px; }
  .provider-box_l {
    float: left;
    clear: left;
    width: 305px;
    margin-left: -305px; }
  .provider-box_r {
    float: right;
    clear: right;
    width: 100%; }
  .mix-provider-box_img {
    position: absolute;
    top: 10px; }
  .provider:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    content: " "; }
  .provider_hd {
    /* give a fixed height for provider_hd to more predictably push down the left column in the body */
    height: 190px;
    /* use flexbox to bottom align the provider title content */
    display: -webkit-box;
    display: -webkit-flex;
    /* display: -ms-flexbox; */
    display: flex;
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end; }
  .provider_bd > .provider-box:first-child {
    margin-top: 95px; }
  /**
* [1] prevent button from crushing heading
*/
  .providerResult {
    border: 1px solid #efefef;
    border-radius: 6px; }
  .providerResult + .providerResult {
    margin-top: 20px; }
  .providerResult-btn {
    float: right;
    margin-bottom: 20px;
    margin-left: 20px;
    max-width: 140px; }
  .providerResult-hd {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background-color: #002c77;
    padding: 16px;
    color: #ffffff;
    margin-bottom: 16px; }
  .providerResult-hd:last-child {
    border-radius: inherit;
    overflow: hidden; }
  .mix-providerResult-hd_gray {
    background-color: #666666; }
  .providerResult-bd {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    padding: 20px; }
  .providerResult-bd > :first-child {
    clear: both; }
  .providerResult-img {
    width: 96px; }
  .vList_results > * {
    border: 1px solid #efefef;
    border-radius: 6px;
    padding: 20px; }
  .vList_results > * + * {
    margin-top: 20px; }
  .mix-vList_columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2; }
  .wrap {
    padding-right: 24px;
    padding-left: 24px; }
  .wrap_nav {
    padding: 0;
    max-width: 100%; }
  .accordion-item + .accordion-item {
    margin-top: 20px; }
  .accordion-item-hd:after {
    position: relative;
    top: 2px;
    margin-left: 6px;
    font-size: 12px; }
  .accordion-item-bd {
    margin: 13px 0;
    padding: 30px; }
  .browsePanel {
    position: relative; }
  .browsePanel-hd {
    position: absolute;
    bottom: -10000px;
    left: -10000px;
    text-indent: -10000;
    font-size: 0; }
  .browsePanel-bd {
    border: 1px solid #efefef;
    border-radius: 6px;
    padding: 24px;
    overflow: hidden; }
  .browsePanel.isInitial {
    display: block; }
  .gridCarousel-ft > *:before {
    width: 16px;
    height: 16px; }
  .gridCarousel_mobileOnly > .gridCarousel-ft {
    display: none; }
  .link_mdCamo {
    color: inherit; }
  .link_mdCamo:hover {
    color: inherit;
    text-decoration: underline; }
  .modal-bd-hd {
    margin-bottom: 20px; }
  .partnerPopup-popup {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
    left: 100%;
    margin: 0;
    width: 200px; }
  .partnerPopup-popup:before {
    -webkit-transform: rotate(90deg) scaleX(2) translateX(50%);
    -moz-transform: rotate(90deg) scaleX(2) translateX(50%);
    -ms-transform: rotate(90deg) scaleX(2) translateX(50%);
    transform: rotate(90deg) scaleX(2) translateX(50%);
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    top: 50%;
    right: 100%;
    left: auto; }
  .resultsPanel_showMdUp {
    display: block !important; }
  .resultsPanel.isInitial {
    display: block; }
  .alert {
    display: table;
    width: 100%; }
  .alert > :first-child {
    border-radius: 6px 0 0 6px; }
  .alert > :last-child {
    border-radius: 0 6px 6px 0; }
  .alert > :only-child {
    border-radius: 6px; }
  .alert-hd {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: table-cell;
    padding: 0 20px 0 20px;
    width: 15%;
    vertical-align: middle;
    text-align: center;
    font-size: 18px; }
  .alert-bd {
    display: table-cell;
    border-left: 0;
    padding: 13px 20px 13px 20px;
    vertical-align: middle; }
  .box_explore {
    padding: 20px; }
  .box_filter {
    border-radius: 6px;
    background-color: #e8f3fb; }
  .mix-box_tall {
    height: 410px; }
  .mix-box_hasCarousel {
    padding: 24px; }
  .browse {
    *zoom: 1;
    display: table; }
    .browse:after, .browse:before {
      display: table;
      content: " "; }
    .browse:after {
      clear: both; }
  .browse_fullWidth {
    width: 100%; }
  .browse > * {
    display: table-cell;
    position: relative;
    border: none;
    vertical-align: middle;
    text-align: center; }
  .browse > *:after {
    display: none; }
  .browse > :first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: 0;
    border-bottom-left-radius: inherit; }
  .browse > :last-child {
    border-bottom: none;
    border-top-right-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: inherit; }
  .browse > .isActive {
    background-color: #002c77; }
  .browse > .isActive:before {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border: 5px solid #002c77;
    border-width: 10px;
    border-color: transparent;
    border-top-color: #002c77;
    width: 0;
    height: 0;
    content: ""; }
  .mix-btn_fullWidth_atSm {
    width: auto;
    width: initial; }
  .btn_search {
    height: 50px; }
  .btn_pair {
    padding: 23px 12px 23px 12px; }
  .btn_pair > * {
    display: inline-block;
    float: none; }
  .mix-btn_sm > .btn-text {
    font-size: 11px; }
  .btn-icon_pair {
    margin: 0 15px 0 0; }
  .btn-text_pair {
    line-height: 1.2222222222;
    font-size: 18px; }
  .btn_iconBar > .btn-icon {
    margin-right: 13.5px; }
  .btn_tightMd {
    display: inline-block;
    width: auto; }
  .mix-btn_fullWidth_atSm {
    width: auto;
    width: initial; }
  .btn_search {
    height: 50px; }
  .btn_pair {
    padding: 23px 12px 23px 12px; }
  .btn_pair > * {
    display: inline-block;
    float: none; }
  .mix-btn_sm > .btn-text {
    font-size: 11px; }
  .btn-icon_pair {
    margin: 0 15px 0 0; }
  .btn-text_pair {
    line-height: 1.2222222222;
    font-size: 18px; }
  .btn_iconBar > .btn-icon {
    margin-right: 13.5px; }
  .btn_tightMd {
    display: inline-block;
    width: auto; }
  .field_search {
    padding-left: 31px;
    height: 50px;
    font-size: 24px; }
  .mix-field_tight {
    padding-left: 20px; }
  .flow_inflowAtMd {
    display: inline-block;
    vertical-align: middle; }
  .mix-flow_rightSpaceAtMd {
    margin-right: 20px; }
  .mix-flow_bottomSpaceAtSm {
    margin-bottom: 0; }
  .hdg {
    line-height: 1.25;
    font-size: 32px; }
  .hdg_sm {
    line-height: 1.1666666667;
    font-size: 24px; }
  .hdg_xsm {
    font-size: 20px; }
  .hdg_lg {
    line-height: 1.0952380952;
    font-size: 42px; }
  .hdg_explore {
    line-height: 22px;
    font-size: 18px; }
  .mix-hide_sm.mix-hide_inline {
    display: inline-block; }
  .mix-hide_md.mix-hide_inline {
    display: none; }
  .mix-hide_md {
    display: none; }
  .mix-icon_childHub {
    width: 195px;
    height: 40px; }
  .mix-nativeSelect_fullWidthAtSm {
    width: inherit; }
  .nav {
    display: block;
    text-align: right;
    font-size: 0; }
  .nav-item {
    display: inline-block;
    border-left: 1px solid #4b96de;
    text-align: left; }
  .nav-item-hd {
    font-size: 16px; }
  .nav-item-sub {
    background-color: #68ace5; }
  .nav-item-sub > * {
    position: relative;
    float: right;
    width: 33.333333%; }
  .nav-item-sub > * + *:after {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -15px;
    background-color: #4b96de;
    width: 1px;
    height: 30px;
    content: ""; }
  .nav-item-sub_share > * {
    float: none;
    width: auto; }
  .nav-item-sub_share > * + *:after {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -15px;
    background-color: #4b96de;
    width: 1px;
    height: 30px;
    content: ""; }
  .nav-item_title {
    border-left: none;
    border-color: transparent; }
  .nav-item-sub_title {
    background-color: transparent; }
  .nav-item-sub_title > * {
    float: none;
    width: 100%; }
  .nav-item-sub_title > * + *:after {
    display: none; }
  .postNav-txt {
    margin-bottom: 8px; }
  .postNav-txt-post {
    display: inline; }
  .stepladder:after {
    position: absolute;
    top: 62px;
    z-index: -1;
    border-right: 1px solid #b2bfd6;
    width: 48px;
    height: 100%;
    content: ''; }
  .stepladder-rung {
    position: relative;
    padding: 25px 30px; }
  .stepladder-rung:before {
    position: relative;
    left: auto;
    float: left;
    z-index: 1;
    margin-right: 30px;
    background: #ffffff; }
  .stepladder-rung:not(:only-child):after {
    position: absolute;
    top: 0;
    left: 48px;
    border-right: 1px solid #b2bfd6;
    height: 100%;
    content: ''; }
  .stepladder-rung:first-child:after {
    top: 62px; }
  .stepladder-rung:last-child:after {
    height: 30px; }
  .stepladder-rung-hd_sequential {
    margin: 0; }
  .stepladder-rung-bd {
    overflow: hidden; }
  .mix-tile_wide::before {
    padding-top: 48.2%; }
  .tile-bd {
    height: 136px; }
  .tile-bd_full {
    height: 100%; }
  .tile-bd_full > * {
    display: block;
    opacity: 1; }
  .title_channel {
    padding: 45px 0 45px 0; }
  .title_explore {
    padding: 40px 0 40px 0; }
  .userContent h1 {
    margin-bottom: 20px;
    line-height: 40px;
    font-size: 32px; }
  .userContent h2 {
    margin-bottom: 20px;
    line-height: 40px;
    font-size: 32px; }
  .userContent p {
    margin-bottom: 26px; }
  .userContent img {
    margin: 32px 0 32px 0; } }

@media (min-width: 768px) and (max-width: 1259px) {
  .isHiddenMd {
    display: none !important; }
  .isLgOnly {
    display: none !important; }
  .mix-blocks_isCarousel {
    margin: 0 0 0 -24px; }
    .mix-blocks_isCarousel > * {
      padding: 0 0 0 24px; }
  .mix-grid-col_mdFullWidth {
    width: 100%; }
  .mix-media-img_mdStack {
    float: none;
    margin: 0 0 10px 0;
    text-align: center; }
  .mix-media-img_loose.mix-media-img_mdStack {
    margin-bottom: 30px; }
  .provider-box_facilities {
    width: auto; }
  .alphaBrowse {
    display: block;
    margin: -10px 0 0 -10px; }
  .alphaBrowse > * {
    display: inline-block;
    padding: 10px 0 0 10px; }
  .alphaBrowse-item:first-child {
    padding: 0 15px;
    width: auto; }
  .alphaBrowse-item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 6px;
    background-color: #c3def5;
    width: 40px;
    height: 40px;
    text-align: center;
    text-transform: uppercase;
    line-height: 40px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500; }
  .alphaBrowse-item.isActive {
    background-color: #68ace5; }
  .alphaBrowse-item_disabled {
    background-color: #efefef !important;
    cursor: default !important; }
  .mix-btn_shrink {
    padding: 6px 16px; }
  .mix-btn-text_shrink {
    line-height: 1;
    text-align: center; }
  .hero-img {
    max-width: 100%; } }

@media (min-width: 1260px) {
  .isHiddenLg {
    display: none !important; }
  .isInlineBlockLg {
    display: inline-block; }
  body:after {
    content: "lg"; }
  .mix-blocks_lg1up > * {
    width: 100%; }
  .mix-blocks_lg2up > * {
    width: 50%; }
  .mix-blocks_lg3up > * {
    width: 33.3333333333%; }
  .mix-blocks_lg4up > * {
    width: 25%; }
  .mix-blocks_lg5up > * {
    width: 20%; }
  .mix-blocks_lg6up > * {
    width: 16.6666666667%; }
  .mix-blocks_lg7up > * {
    width: 14.2857142857%; }
  .mix-blocks_lg8up > * {
    width: 12.5%; }
  .blocks-i_featured {
    width: 50%; }
  .mix-blocks_mdEqual > * {
    width: 100%; }
  .mix-blocks-i_lg1of4 {
    width: 25%; }
  .mix-blocks-i_lg3of4 {
    width: 75%; }
  .mix-blocks_isEqualCarousel {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .mix-blocks_isEqualCarousel > * {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-right: -1px;
    width: 25%;
    min-width: 25%; }
  .form_contact {
    width: 85%; }
  .grid-col_sidebar {
    width: 25%; }
  .grid-col_main {
    width: 75%; }
  .grid-col_providerBio {
    width: 50%; }
  .grid-col_providerInfo {
    width: 50%; }
  .mix-grid-col_insetProvider {
    padding-right: 38px; }
  /* menu grid */
  .grid_menu {
    margin-left: -46px; }
  .grid_menu > * {
    padding-left: 46px; }
  .grid-col_menu1 {
    width: 34%; }
  .grid-col_menu2 {
    width: 32%; }
  .grid-col_menu3 {
    width: 22%; }
  /* get involved grid */
  .grid-col_involved {
    width: 67%; }
  .grid-col_involvedSide {
    padding-left: 50px;
    width: 33%; }
  /* sizes */
  .mix-grid-col_lg4of10 {
    width: 40%; }
  .mix-grid-col_lg6of10 {
    width: 60%; }
  .mix-grid-col_lg1of2 {
    width: 50%; }
  .mix-grid-col_lg1of4 {
    width: 25%; }
  .mix-grid-col_lg3of4 {
    width: 75%; }
  /* results grid */
  .grid-col_filter {
    width: 305px; }
  .grid-col_results {
    width: calc(100% - 305px); }
  /* follow us grid */
  .grid-col_follow {
    width: 33.333333%; }
  .grid-col_followFull {
    width: 33.333333%; }
  /* footer grid */
  .grid_footer {
    margin-left: -100px; }
  .grid_footer > * {
    padding-left: 100px; }
  .grid-col_footerL {
    width: 61%; }
  .grid-col_footerR {
    float: right;
    width: 39%; }
  /* provider grid */
  .grid-col_providerAvailability,
  .grid-col_providerSpecialties {
    float: none;
    width: 100%; }
  .grid-col_providerSpecialties {
    padding-top: 0; }
  .mix-media-img_lgOnly {
    display: block; }
  .mix-media_lgVertCenter {
    display: table; }
  .mix-media_lgVertCenter > * {
    display: table-cell;
    vertical-align: middle; }
  .mix-media-img_best {
    max-width: 270px; }
  .mix-provider-box_lgR {
    float: right;
    clear: right;
    width: 100%; }
  .providerResult-hd {
    /* do not clearfix; the media image escaping the header is part of the design */
    min-height: 100px;
    /* to cover the profile button */
    margin-bottom: 16px; }
  .mix-providerResult-hd_gray {
    min-height: 0; }
  .providerResult-btn {
    display: block;
    margin-bottom: 0; }
  .providerResult-img {
    width: 156px; }
  .resultsSearch {
    display: table; }
  .resultsSearch > * {
    display: table-cell;
    white-space: nowrap; }
  .resultsSearch-l {
    padding-right: 20px; }
  .resultsSearch-c {
    padding-right: 20px;
    width: 100%; }
  .sort {
    position: relative; }
  .sort-bd {
    position: absolute;
    top: 20px;
    right: 0;
    text-align: right; }
  .title_channel {
    background-image: url("../media/images/dr-pate.jpg");
    background-position: center center;
    padding: 85px 0 85px 0; }
  .title_head {
    padding: 12px 0 20px 0; }
  .title_explore {
    padding: 60px 0 60px 0; }
  .mix-vList_columns {
    *zoom: 1;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3; }
    .mix-vList_columns:after, .mix-vList_columns:before {
      display: table;
      content: " "; }
    .mix-vList_columns:after {
      clear: both; }
  .mix-vList_columns > * {
    float: left;
    width: 100%;
    width: 33.3333333333% \0/IE9; }
  .wrap {
    padding-right: 60px;
    padding-left: 60px; }
  .wrap_nav {
    max-width: 1140px; }
  .mix-wrap_min {
    padding-right: 24px;
    padding-left: 24px; }
  .mix-wrap_thin {
    padding-right: 0;
    padding-left: 0;
    max-width: 940px; }
  .siteFt {
    padding-top: 75px;
    padding-bottom: 107px; }
  .siteFtNav {
    max-width: 440px; }
  .siteHd {
    position: relative; }
  .siteHd-toggle {
    display: none; }
  .siteHd-logo {
    position: absolute;
    top: 11px;
    left: 4px;
    width: auto; }
  .siteHd-nav {
    display: block;
    position: relative;
    z-index: 0;
    padding-top: 28px; }
  .siteHd-nav-eyebrow {
    display: block;
    position: relative;
    z-index: 2;
    margin-bottom: 16px;
    white-space: nowrap; }
  .siteHd-nav-main {
    position: relative;
    z-index: 1; }
  .siteNav-item-hd {
    display: block; }
  .browse > *:hover {
    background-color: #569ad9;
    cursor: pointer; }
    .browse > *:hover::before {
      border-top-color: #569ad9; }
  .browsePanel-bd {
    padding: 20px; }
  .search-ft {
    display: none; }
  .search-bd {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit; }
  .search-close:hover {
    background-color: #cacaca; }
  .gridCarousel-ft {
    display: none; }
  .alphaBrowse {
    *zoom: 1;
    display: table;
    min-width: 100%;
    margin-right: -1.2%;
    margin-left: -1.2%;
    display: -webkit-box;
    display: -webkit-flex;
    /* display: -ms-flexbox; */
    display: flex; }
    .alphaBrowse:after, .alphaBrowse:before {
      display: table;
      content: " "; }
    .alphaBrowse:after {
      clear: both; }
  .alphaBrowse > * {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    /* display: -ms-flexbox; */
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1; }
  .alphaBrowse > :first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px; }
  .alphaBrowse > :last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px; }
  .alphaBrowse-item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    color: #002c77;
    font-size: 16px;
    font-weight: 500; }
  .alphaBrowse_bar {
    margin-right: 0;
    margin-left: 0; }
  .alphaBrowse_bar .alphaBrowse-item {
    border-radius: inherit;
    background-color: #68ace5;
    padding: 0 14px;
    height: 60px;
    line-height: 60px;
    color: #ffffff; }
  .alphaBrowse-item:hover {
    cursor: pointer;
    color: #68ace5; }
  .alphaBrowse_bar .alphaBrowse-item:hover {
    background-color: #569ad9;
    cursor: hover;
    color: #ffffff; }
  .alphaBrowse-item.isActive {
    color: #68ace5; }
  .alphaBrowse_bar .alphaBrowse-item.isActive {
    background-color: #002c77;
    color: #ffffff; }
  .alphaBrowse_bar .alphaBrowse-item.isActive:before {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border: 5px solid #002c77;
    border-width: 10px;
    border-color: transparent;
    border-top-color: #002c77;
    width: 0;
    height: 0;
    content: ""; }
  .alphaBrowse_bar > * > .alphaBrowse-item_disabled {
    background-color: #efefef !important; }
  .alphaBrowse-item_disabled {
    cursor: default !important;
    color: #cacaca !important; }
  .alphaBrowse-item_disabled:before {
    border-top-color: #efefef !important; }
  .band_nav {
    background-color: #68ace5;
    z-index: 10; }
  .band_white:before {
    margin: auto;
    max-width: 1140px; }
  .box_page {
    padding: 60px 0 0 0; }
  /* padding */
  .mix-box_space {
    padding: 60px 0 60px 0; }
  /*** these should really be replaced by an equal height js module ***/
  .mix-box_short {
    min-height: 162px; }
  /* hover states for link boxes */
  a.box {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    transition: all 0.2s; }
  a.box:hover {
    border-color: #efefef;
    background-color: #002c77;
    color: #ffffff; }
  .mix-box_hasCarousel {
    padding: 20px; }
  .mix-btn_iconBar_hero {
    background-color: rgba(0, 44, 119, 0.8); }
  .btn_iconBar > .btn-icon {
    margin-right: 20px; }
  .mix-btn_textAtLg {
    border-radius: 0;
    background-color: transparent;
    padding: 0;
    text-align: left;
    text-transform: none;
    color: #002c77; }
  /* hover states */
  .btn:hover {
    background-color: #002c77; }
  .btn_iconBar:hover {
    box-shadow: none;
    background: #68ace5; }
  .mix-btn_lightHover:hover {
    background-color: #ffffff;
    color: #002c77; }
  .mix-btn_white:hover {
    background-color: #f8f8f8; }
  .mix-btn_textAtLg:hover {
    background-color: transparent;
    color: #68ace5; }
  .mix-btn_iconBar_hero:hover {
    box-shadow: none;
    background: #68ace5; }
  .mix-btn_gray:hover {
    background-color: #68ace5;
    color: #ffffff; }
  .mix-btn_darkGray:hover {
    background-color: #b3b3b3; }
  .cta {
    display: table;
    margin: auto; }
  .cta > * {
    display: table-cell;
    vertical-align: middle; }
  .cta-r {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 20px;
    white-space: nowrap; }
  .cta_justify {
    width: 100%; }
  .cta_justify > .cta-r {
    text-align: right; }
  .cta_justify > .cta-l {
    text-align: left; }
  .hdg_explore {
    line-height: 28px;
    font-size: 24px; }
  .mix-hdg_lgTrunc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .mix-hide_md {
    display: block; }
  .mix-hide_md.mix-hide_inline {
    display: inline-block; }
  .mix-hide_lg {
    display: none; }
  .homeHero {
    margin: auto;
    max-width: 1680px; }
  .homeHero-slides {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    left: 50%;
    padding-top: 544px;
    width: 1680px; }
  .homeHero-nav-list > * {
    width: 100%; }
  .homeHero-nav-list > :last-child {
    display: none; }
  .homeHero-nav {
    position: absolute;
    right: 50%;
    bottom: 100px;
    margin-right: -570px;
    border-radius: 6px;
    width: 350px;
    overflow: hidden; }
  .mix-icon_childHub {
    width: 304px;
    height: 62px; }
  .link:hover {
    color: #68ace5; }
  .link_camo:hover {
    text-decoration: underline;
    color: inherit; }
  .link_ltBlue:hover {
    color: inherit; }
  .mix-link_noHover:hover {
    color: inherit; }
  .listBtn:hover {
    border-top-color: #74baec;
    border-bottom-color: #529ee1;
    box-shadow: inset 0 -1px 0 #68ace5;
    background-color: #569ad9; }
  .nav-item {
    position: relative; }
  .mix-nav-item_wide {
    width: 270px; }
  .nav-item-sub {
    background-color: transparent; }
  .nav-item-sub-text {
    font-size: 16px; }
  .nav-item-sub > * {
    float: none;
    width: 100%; }
  .nav-item-sub > :last-child {
    border-radius: 0 0 6px 6px; }
  .nav-item-sub > * + *:after {
    display: none; }
  /* hover states */
  .no-js .nav-item:hover {
    border-bottom: 1px solid transparent;
    background-color: #68ace5;
    cursor: pointer; }
  .no-js .nav-item:hover > .nav-item-sub {
    visibility: visible; }
  .no-js .nav-item_title:hover {
    border-radius: 6px 6px 0 0; }
  .postNav-txt {
    line-height: 22px;
    font-size: 16px; }
  .select:hover > .select-txt {
    border-color: rgba(104, 172, 229, 0.25); }
  .tile-bd {
    height: 90px; }
  .tile-bd_small {
    text-align: center; }
  .tile-ft {
    opacity: 0; }
  .tile:hover .tile-flag {
    opacity: 0; }
  .tile:hover .tile-bd {
    border-radius: 6px;
    box-shadow: inset 0 0 20vw rgba(0, 0, 0, 0.3);
    height: 100%; }
  .tile:hover .tile-bd-by,
  .tile:hover .tile-bd-extra,
  .tile:hover .tile-ft {
    opacity: 1; }
  .userContent img {
    margin: 32px 0 32px 0; }
  .userContent h1 {
    margin-top: 50px; }
  .userContent h2 {
    margin-top: 50px; } }

.mix-tile_ch_purple .tile-bd, .mix-tile_ch_purple .tile-flag_feat {
  background-color: rgba(134, 102, 172, 0.85); }

.mix-tile_ch_lightblue .tile-bd, .mix-tile_ch_lightblue .tile-flag_feat {
  background-color: rgba(104, 203, 223, 0.85); }

.mix-tile_ch_blue .tile-bd, .mix-tile_ch_blue .tile-flag_feat {
  background-color: rgba(0, 113, 185, 0.85); }

.mix-tile_ch_darkblue .tile-bd, .mix-tile_ch_darkblue .tile-flag_feat {
  background-color: rgba(34, 45, 101, 0.85); }