/* *****************************************************************
Site Name: CHAM
Author:Katie Murray / Eric Boyer
Created:8/20/2014
Last Updated / by:Stylesheet:Responsive (320 and above) Stylesheet
***************************************************************** */
/* ********************
PULL IN OUR SASS VARIABLES, MIXINS, ETC. IN _utilities.scss
******************** */
/******************************************************************
Site Name: Site Name
Author: UI Developer Name(s)
Stylesheet: Utilities (variables and Mixins)
******************************************************************/
/******************************************************************
VARIABLES
******************************************************************/
/*the widest your content will display*/
/*the amount of screen your content will take up on smaller screens*/
/*replace with the client font defined in _typography.scss*/
/*basic sans serif stack*/
/*basic serif stack*/
/*see fontello.com*/
/*for consisent bottom margin of elements with same font-size as body*/
/* base size of html is set to 62.5%, so 1.333em = 20px*/
/*15px*/
/*5px*/
/*10px*/
/*12.5px*/
/*15px*/
/*20px*/
/*25px*/
/*30px*/
/*40px*/
/******************************************************************
FILE PATHS
******************************************************************/
/* path to images the client will not be editing (relative from stylesheet)*/
/* path to images the client may edit (relative from stylesheet) */
/* path to web fonts (relative from stylesheet) */
/******************************************************************
MODAL DEFAULTS
******************************************************************/
/******************************************************************
MIXINS
******************************************************************/
/*for main content container(s)*/
/* visually hidden is for things you dont want to show onscreen but can still be useful to screen readers for the disabled */
/*sizes fonts to rems with a pixel backup for IE8*/
/*border-radius*/
/*apply the default icon style for before and after elements as defined in _typography.scss*/
/* USAGE: @include gradient($grey,$white); */
/* USAGE: @include hard-gradient($grey,$white); */
/*for applying rgba(transparent) backgrounds with a hex backup for older browsers*/
/* USAGE: @include background-opacity($grey,.5);*/
/*generic text shadow*/
/*box shadows*/
/*generic transition effect*/
/*USAGE: @include transition(all 0.2s ease-in-out);*/
/* ********************
MEDIA QUERIES
******************** */
/* TIP:after you are done developing in this document, move all of the media queries into partials like _48.scss (the underscore is important) and import them like this:@media only screen and (min-width:32em) {
  @import "32em";
}
Then in lateIE.scss, import them without the media queries like this: @import "32em";
The result will be the desktop site styles for IE8 and below. */
@media only screen and (min-width: 400px) and (max-width: 775px) {
  .hp-search .hiddenContent a.link {
    font-size: 12px;
    font-size: 1.2rem;
    display: inline-block;
    margin-left: 0.5em; }

  .media.media-transition figure.image-large {
    float: none;
    max-width: 100%; } }
@media only screen and (min-width: 520px) {
  /* ***** GRID MEASUREMENTS ***** */
  .sm-1 {
    width: 4.16667%; }

  .sm-2 {
    width: 8.33333%; }

  .sm-3 {
    width: 12.5%; }

  .sm-4 {
    width: 16.66667%; }

  .sm-5 {
    width: 20.83333%; }

  .sm-6 {
    width: 25%; }

  .sm-7 {
    width: 29.16667%; }

  .sm-8 {
    width: 33.33333%; }

  .sm-9 {
    width: 37.5%; }

  .sm-10 {
    width: 41.66667%; }

  .sm-11 {
    width: 45.83333%; }

  .sm-12 {
    width: 50%; }

  .sm-13 {
    width: 54.16667%; }

  .sm-14 {
    width: 58.33333%; }

  .sm-15 {
    width: 62.5%; }

  .sm-16 {
    width: 66.66667%; }

  .sm-17 {
    width: 70.83333%; }

  .sm-18 {
    width: 75%; }

  .sm-19 {
    width: 79.16667%; }

  .sm-20 {
    width: 83.33333%; }

  .sm-21 {
    width: 87.5%; }

  .sm-22 {
    width: 91.66667%; }

  .sm-23 {
    width: 95.83333%; }

  .sm-24 {
    width: 100%; }

  .push-right-sm {
    float: right; }

  .pull-left-sm {
    float: left; }

  /* show and hide elements based on screen size */
  .show-sm, .show-sm-up {
    display: inherit !important; }

  .show-x-sm {
    display: none !important; }

  .hide-x-sm {
    display: inherit !important; }

  .hide-sm, .hide-sm-up {
    display: none !important; }

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

  /* style the default iAPPS pagination */
  .pagination .result-count {
    display: inline-block;
    width: 50%;
    text-align: left; }
  .pagination .pageNumbers {
    display: inline-block;
    width: 50%;
    text-align: right; }

  /* ***** SUPPLEMENTAL ***** */
  .modalContent {
    top: 7%; }

  .iframe-video {
    width: 480px;
    height: 360px; }

  .footer-copyright .copy-wrap .language {
    margin: 0; }
  .footer-copyright .copy-wrap .language label {
    font-size: 12px;
    font-size: 1.2rem;
    color: #808080;
    font-weight: normal;
    font-family: "FrutigerLTCom-Roman", Arial, Helvetica, sans-serif; }
  .footer-copyright .copy-wrap .language label:before {
    content: '|';
    margin-right: 0.5em; }

  .resource-callout p {
    display: block; }
  .resource-callout h3 {
    font-size: 16px;
    font-size: 1.6rem; }
  .resource-callout h3:after {
    display: none; } }
/* end 32em */
@media only screen and (min-width: 700px) {
  /* ********* FOOTER ******** */
  .footer-banner {
    font-size: 12px;
    font-size: 1.2rem; }
  .footer-banner ul li {
    width: 19.5%;
    vertical-align: top;
    border-top: none;
    padding: 0;
    margin: 0; }
  .footer-banner ul li a {
    padding: 1em 0; }
  .footer-banner ul li a:before {
    padding-right: 0.25em;
    padding-left: 0.25em;
    float: left; }
  .footer-banner ul li span {
    display: block; } }
@media only screen and (min-width: 775px) {
  /* ***************************************************************
  GENERAL LAYOUT
  ******************** */
  /* *** GRID MEASUREMENTS *** */
  .med-1 {
    width: 4.16667%; }

  .med-2 {
    width: 8.33333%; }

  .med-3 {
    width: 12.5%; }

  .med-4 {
    width: 16.66667%; }

  .med-5 {
    width: 20.83333%; }

  .med-6 {
    width: 25%; }

  .med-7 {
    width: 29.16667%; }

  .med-8 {
    width: 33.33333%; }

  .med-9 {
    width: 37.5%; }

  .med-10 {
    width: 41.66667%; }

  .med-11 {
    width: 45.83333%; }

  .med-12 {
    width: 50%; }

  .med-13 {
    width: 54.16667%; }

  .med-14 {
    width: 58.33333%; }

  .med-15 {
    width: 62.5%; }

  .med-16 {
    width: 66.66667%; }

  .med-17 {
    width: 70.83333%; }

  .med-18 {
    width: 75%; }

  .med-19 {
    width: 79.16667%; }

  .med-20 {
    width: 83.33333%; }

  .med-21 {
    width: 87.5%; }

  .med-22 {
    width: 91.66667%; }

  .med-23 {
    width: 95.83333%; }

  .med-24 {
    width: 100%; }

  .push-right-med {
    float: right; }

  .pull-left-med {
    float: left; }

  /* show and hide elements based on screen size */
  .show-med, .show-med-up {
    display: inherit !important; }

  .show-sm, .show-sm-down {
    display: none !important; }

  .hide-sm, .hide-sm-down {
    display: inherit !important; }

  .hide-med, .hide-med-up {
    display: none !important; }

  .hide-sm, .hide-mobile {
    display: block; }

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

  .full-width-sm {
    margin-right: 1em;
    margin-left: 1em; }
  .full-width-sm .column {
    padding-right: 1em;
    padding-left: 1em; }

  /* on the product list page with a siderail, the siderail needs to be at the top of it's container to give the illusion it is changing source order to match the comps */
  .side-rail.stick-to-top-med {
    position: absolute;
    right: 0; }

  .list-to-table.med {
    display: table; }
  .list-to-table.med .list-item {
    display: table-row; }
  .list-to-table.med .list-item.header {
    display: table-header-group;
    font-family: "FrutigerLTPro-Bold", Arial, Helvetica, sans-serif;
    color: #333333; }
  .list-to-table.med .list-item.header .list-block {
    padding: 0.5em 0.75em; }
  .list-to-table.med .list-item.full {
    padding: 0; }
  .list-to-table.med .list-item.full .list-block {
    display: table-header-group; }
  .list-to-table.med .list-item .list-block {
    display: table-cell;
    padding: 1em 0.75em;
    border-bottom: 1px solid #c9cece; }
  .list-to-table.med .list-item .list-block.min-width {
    min-width: 12em; }
  .list-to-table.med .list-item .list-block .item-title {
    display: none; }

  /* **** BREADCRUMBS **** */
  ul.breadCrumbs {
    margin-left: 0;
    float: left; }
  ul.breadCrumbs li {
    /* make all the links visible that we hid on mobile */
    display: block;
    /* show the right pointing icon we hid on mobile and sh the right pointing icon */ }
  ul.breadCrumbs li:nth-last-child(0n+2):after {
    display: inline-block; }
  ul.breadCrumbs li:nth-last-child(0n+2):before {
    display: none; }

  /* ***************************************************************
  HEADER / FOOTER
  ******************** */
  .main-header {
    position: relative;
    z-index: 10;
    background: #007cc3;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }

  .main-logo {
    background: #ffffff;
    width: 19%;
    padding: 06px;
    text-align: center; }

  .header-content {
    margin: 0 auto;
    /*set width to the max percentage of screen you want the content to take up. default is set above in variables*/
    width: 95%;
    /*set max-width to the widest you want your content to display. default is set above in variables*/
    max-width: 77.143em;
    position: relative;
    height: auto;
    margin-bottom: 0;
    background: #007cc3; }

  .site-search .search-toggle {
    padding: 0.5em;
    border-radius: 0 0 4px 4px;
    height: auto;
    right: -1em;
    outline: none; }
  .site-search .form-search {
    top: 0;
    right: 2em;
    width: 70%; }

  .top-bar {
    background: #0b3254; }

  .utilities {
    margin: 0 auto;
    /*set width to the max percentage of screen you want the content to take up. default is set above in variables*/
    width: 95%;
    /*set max-width to the widest you want your content to display. default is set above in variables*/
    max-width: 77.143em;
    position: relative;
    text-align: right; }
  .utilities .utility-nav {
    font-size: 11px;
    font-size: 1.1rem;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 4em; }
  .utilities .utility-nav ul {
    padding: 0;
    margin-bottom: 0; }
  .utilities .utility-nav ul li {
    display: inline-block;
    list-style: none;
    padding: 0; }
  .utilities .utility-nav ul li a {
    display: block;
    padding: 0.25em 0.75em;
    width: 100%;
    white-space: nowrap; }
  .no-touch .utilities .utility-nav ul li a:hover {
    background: #005c90;
    color: #ffffff; }
  .utilities .utility-nav ul li > ul {
    display: none; }
  .no-touch .utilities .utility-nav ul li:hover {
    background: #005c90;
    color: #ffffff; }
  .no-touch .utilities .utility-nav ul li:hover > ul {
    -webkit-box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.5);
    display: block;
    position: absolute;
    background: #ffffff;
    border: 5px solid #005c90;
    z-index: 100;
    text-align: left; }
  .no-touch .utilities .utility-nav ul li:hover > ul li {
    display: block;
    width: 100%; }
  .no-touch .utilities .utility-nav ul li:hover > ul li a {
    color: #0b3254; }
  .no-touch .utilities .utility-nav ul li:hover > ul li:hover a {
    color: #ffffff; }
  .no-touch .utilities .utility-nav ul li:hover > ul li ul {
    display: none; }
  .utilities .utility-nav a {
    color: #ffffff; }
  .utilities span {
    display: inline;
    vertical-align: 0.1em; }

  /* * floated links next to tabbed header * */
  .header-links {
    font-size: 13px;
    font-size: 1.3rem;
    text-align: center;
    padding: 0.75em;
    border-bottom: 1px solid #c9cece; }
  .header-links a {
    display: inline-block;
    border-bottom: none;
    padding: 0.5em; }

  .hp-search .equal-height {
    padding-bottom: 2em; }
  .hp-search .border-left {
    border-left: 1px solid #c9cece; }
  .hp-search .hiddenTriggerClick {
    font-size: 22px;
    font-size: 2.2rem;
    border: none;
    padding: 0 0 0.5em 0; }
  .hp-search .hiddenTriggerClick.active:after, .hp-search .hiddenTriggerClick:after {
    display: none; }
  .hp-search .hiddenContent {
    padding: 0;
    display: block; }
  .hp-search .content {
    padding-top: 1em;
    padding-bottom: 1em; }

  /* **** FOOTER **** */
  .main-footer .main-content {
    margin-top: 4em; }

  .footer-connect {
    border: none;
    padding-top: 0; }
  .footer-connect .header {
    color: #007cc3; }
  .footer-connect a.social {
    font-size: 17.5px;
    font-size: 1.75rem;
    margin: .1em; }
  .footer-connect .section {
    margin-bottom: 2em; }

  .footer-links {
    margin-left: 0;
    margin-right: 0; }
  .footer-links a.header {
    border-bottom: none;
    padding: 0 0 0.25em 0; }
  .footer-links a.header:after {
    display: none; }
  .footer-links ul {
    font-size: 13px;
    font-size: 1.3rem;
    display: inline-block;
    border: none;
    margin: 0;
    padding: 0 0 1em 0;
    list-style: none; }
  .footer-links ul li {
    background: transparent;
    border: none;
    padding: 0.1em 0; }
  .footer-links ul li p {
    margin: 0.5em 0; }

  .lower-footer, .footer-copyright {
    padding-top: 1em;
    color: #ffffff; }
  .lower-footer a, .footer-copyright a {
    color: inherit; }
  .lower-footer p, .footer-copyright p {
    margin-bottom: 0.5em; }
  .lower-footer p.footer-right, .lower-footer p.footer-left, .footer-copyright p.footer-right, .footer-copyright p.footer-left {
    display: inline-block;
    width: 50%;
    float: left;
    text-align: left;
    padding: 1em; }

  .footer-copyright .copy-wrap {
    font-size: 12px;
    font-size: 1.2rem; }
  .footer-copyright .copy-wrap .footer-left {
    padding: 0.25em; }

  /* ***************************************************************
  HEADER BANNERS + FLEXSLIDER
  ******************** */
  .header-banner {
    position: relative;
    min-height: 300px;
    max-height: 425px;
    height: 90%; }
  .header-banner > div {
    max-height: 425px;
    overflow: hidden;
    width: 100%; }
  .header-banner .header-banner-content {
    position: absolute;
    bottom: 0;
    text-align: left;
    background: transparent;
    max-width: 1500px;
    width: 100%;
    height: 100%; }
  .header-banner .header-banner-content .banner-wrap {
    margin: 0 auto;
    /*set width to the max percentage of screen you want the content to take up. default is set above in variables*/
    width: 95%;
    /*set max-width to the widest you want your content to display. default is set above in variables*/
    max-width: 77.143em;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align: center; }
  .header-banner .header-banner-content .banner-wrap .header-copy {
    width: 50%;
    display: inline-block;
    text-align: left;
    margin-right: 50%;
    margin-top: 10%; }
  .header-banner .header-banner-content .banner-wrap .header-copy p {
    max-height: 4.9em;
    overflow: hidden; }
  .header-banner .header-banner-content .banner-wrap .header-copy p.large {
    max-height: 7em; }
  .header-banner .header-banner-content .banner-wrap .header-copy h1, .header-banner .header-banner-content .banner-wrap .header-copy .h1, .header-banner .header-banner-content .banner-wrap .header-copy h2, .header-banner .header-banner-content .banner-wrap .header-copy .h2, .header-banner .header-banner-content .banner-wrap .header-copy h3, .header-banner .header-banner-content .banner-wrap .header-copy .h3 {
    font-size: 25px;
    font-size: 2.5rem; }
  .header-banner.in-content {
    margin: 0 auto 2em auto; }
  .header-banner.in-content .header-banner-content {
    min-height: auto;
    height: 100%; }
  .header-banner.in-content .header-banner-content .banner-wrap {
    margin: 0 auto;
    /*set width to the max percentage of screen you want the content to take up. default is set above in variables*/
    width: 95%;
    /*set max-width to the widest you want your content to display. default is set above in variables*/
    max-width: 77.143em;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align: center; }
  .header-banner.in-content .header-banner-content .banner-wrap .header-copy {
    margin-top: 0; }

  .flexslider {
    margin: 0;
    position: relative;
    z-index: 1; }

  .flex-control-nav {
    z-index: 2;
    position: absolute;
    bottom: 1%;
    top: auto;
    text-align: center; }

  .flexslider .slides > li {
    position: relative;
    max-height: 430px;
    overflow: hidden; }
  .flexslider .slides > li .flexslider-copy {
    position: absolute;
    top: 16%;
    width: 100%;
    padding: 2.5em; }
  .flexslider .slides > li .flexslider-copy h1, .flexslider .slides > li .flexslider-copy .h1, .flexslider .slides > li .flexslider-copy h2, .flexslider .slides > li .flexslider-copy .h2, .flexslider .slides > li .flexslider-copy h3, .flexslider .slides > li .flexslider-copy .h3, .flexslider .slides > li .flexslider-copy p {
    text-shadow: 1px 0 1px rgba(0, 0, 0, 0.5);
    color: #ffffff;
    width: auto; }
  .flexslider .slides > li .flexslider-copy p {
    padding-right: 2em; }
  .flexslider .slides > li .flexslider-copy > div {
    max-width: 950px;
    margin: 0 auto;
    padding-right: 45%; }

  .flex-manual-nav {
    padding: 0;
    list-style-type: none;
    display: table;
    width: 100%;
    text-align: center; }
  .flex-manual-nav li {
    display: table-cell;
    background: #0b3254;
    margin: 0;
    border-left: 1px solid #ffffff;
    width: 33.33333333333333%;
    vertical-align: middle; }
  .flex-manual-nav li a {
    color: #ffffff;
    display: block;
    position: relative;
    padding: 0.5em; }
  .flex-manual-nav li:first-child {
    border-left: none; }
  .no-touch .flex-manual-nav li:hover, .flex-manual-nav li.flex-active {
    background: #007cc3; }
  .no-touch .flex-manual-nav li:hover a, .flex-manual-nav li.flex-active a {
    color: #ffffff;
    text-decoration: none; }
  .no-touch .flex-manual-nav li:hover a:before, .flex-manual-nav li.flex-active a:before {
    content: "";
    position: absolute;
    left: 50%;
    top: -10px;
    margin-left: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #007cc3;
    z-index: 2; }

  /* ***************************************************************
  ALL NAVIGATION / MEGAMENU
  ******************** */
  .main-nav-toggle {
    display: none; }

  /* *** MAIN SITE NAV *** */
  .main-nav {
    display: inline-block;
    background: transparent;
    vertical-align: middle;
    text-align: left;
    width: 74.5%;
    height: auto; }
  .main-nav ul.main {
    margin: 0;
    box-shadow: none;
    margin-left: -4px;
    /* * offsets native inline-block spacing * */
    /* * LEVEL 1 - only * */
    /* * LEVEL 1 * */ }
  .main-nav ul.main > li {
    height: 4em;
    max-width: 14em;
    width: 30%;
    font-size: 16px;
    font-size: 1.6rem;
    vertical-align: middle;
    display: table-cell;
    /* * in place of inline-block for vertical-align middle * */
    border-right: 1px solid #0089d7;
    text-align: center; }
  .main-nav ul.main > li:hover {
    background: #005c90; }
  .main-nav ul.main > li > a {
    color: #ffffff;
    padding: 1.05em;
    text-align: center; }
  .main-nav ul.main > li > a span {
    display: block; }
  .no-touch .main-nav ul.main > li > a:hover {
    color: #ffffff;
    background: #005c90; }
  .main-nav ul.main li {
    /* * remove mobile borders * */ }
  .main-nav ul.main li a {
    border: none; }
  .main-nav ul.main li ul {
    /* * LEVEL 2 * */ }
  .main-nav ul.main li ul .menu-callout ul, .main-nav ul.main li ul .menu-callout img {
    display: inline-block; }
  .main-nav ul.main li ul li a {
    font-size: 13.5px;
    font-size: 1.35rem;
    color: #727477;
    padding: 0.25em 0; }
  .no-touch .main-nav ul.main li ul li a:hover {
    color: #005c90; }
  .main-nav ul.main li .mega-menu {
    -webkit-box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.5);
    min-width: 30em;
    background: #ffffff;
    border: 15px solid #005c90;
    padding: 2em;
    margin: 0;
    position: absolute; }
  .main-nav ul.main li .mega-menu .menu-row {
    width: 49.5%;
    float: left;
    display: inline-block;
    /* * LEVEL 2 * */ }
  .main-nav ul.main li .mega-menu .menu-row li {
    display: block;
    text-align: left;
    /* * LEVEL 3 * */ }
  .main-nav ul.main li .mega-menu .menu-row li ul {
    display: block; }
  .main-nav ul.main li .mega-menu .menu-row li ul li {
    /* * LEVEL 4 * */ }
  .main-nav ul.main li .mega-menu .menu-row li ul li ul {
    display: none; }
  .no-touch .main-nav ul.main li .mega-menu .menu-row li ul li:hover ul {
    display: block;
    position: absolute; }
  .main-nav ul.main li .mega-menu.menu-right {
    right: 0; }
  .main-nav ul.main li .mega-menu.pediatric {
    width: 52em; }
  .main-nav ul.main li .mega-menu.pediatric .menu-row {
    width: 35.5%;
    /* * LEVEL 2 * */ }
  .main-nav ul.main li .mega-menu.pediatric .menu-row.main {
    width: 64.25%; }
  .main-nav ul.main li .mega-menu.pediatric .menu-row .submenu-row {
    width: 49.5%;
    display: inline-block;
    float: left;
    padding-right: 1em; }
  .main-nav ul.main li .mega-menu.pediatric .menu-row > li {
    /* * LEVEL 3 * */ }
  .main-nav ul.main li .mega-menu.pediatric .menu-row > li a {
    font-family: "FrutigerLTPro-Bold", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #007cc3;
    margin-bottom: 1em; }
  .main-nav ul.main li .mega-menu.pediatric .menu-row > li ul {
    margin: 0; }
  .main-nav ul.main li .mega-menu.pediatric .menu-row > li ul li {
    /* * LEVEL 4 * */ }
  .main-nav ul.main li .mega-menu.pediatric .menu-row > li ul li span {
    display: block;
    border-bottom: 3px solid #ffffff; }
  .main-nav ul.main li .mega-menu.pediatric .menu-row > li ul li a {
    font-family: "FrutigerLTCom-Roman", Arial, Helvetica, sans-serif;
    text-transform: none;
    color: #808080;
    margin: 0;
    margin-left: -0.25em;
    padding: 0.25em; }
  .no-touch .main-nav ul.main li .mega-menu.pediatric .menu-row > li ul li a:hover {
    color: #005c90; }
  .no-touch .main-nav ul.main li .mega-menu.pediatric .menu-row > li ul li:hover span.flyout {
    border-bottom-color: #005c90; }
  .no-touch .main-nav ul.main li .mega-menu.pediatric .menu-row > li ul li:hover a {
    color: #005c90; }
  .main-nav ul.main li .mega-menu.pediatric .menu-row > li ul li ul {
    background: #ffffff;
    position: absolute;
    z-index: 10 !important;
    top: -50%;
    left: 100%;
    margin-top: 0;
    border: 3px solid #005c90;
    padding: 0.75em;
    width: 16em; }
  .main-nav ul.main li .mega-menu.pediatric .menu-row > li ul li ul .submenu-row {
    padding-right: 0.5em; }
  .main-nav ul.main li .mega-menu.pediatric .menu-row > li ul li ul li {
    border-bottom: none; }
  .main-nav ul.main li .mega-menu.pediatric .menu-row > li ul li ul li a {
    font-size: 12px;
    font-size: 1.2rem; }
  .no-touch .main-nav ul.main li .mega-menu.pediatric .menu-row > li ul li ul li a:hover {
    color: #007cc3; }
  .main-nav ul.main li .mega-menu.pediatric .menu-row > li ul li ul li a:after {
    content: '>';
    display: inline-block;
    margin-left: 0.25em; }
  .main-nav ul.main li .mega-menu.pediatric .menu-row > li ul li ul li a:before {
    display: none; }
  .no-touch .main-nav ul.main li:hover .mega-menu {
    display: block; }
  .main-nav ul.main li.current > a {
    background: #005c90;
    color: #ffffff; }
  .main-nav ul.main li.no-mobile, .main-nav ul.main li .no-mobile {
    display: inline-block; }
  .main-nav ul.main li .menu-button {
    width: 100%;
    clear: both; }
  .no-touch .main-nav ul.main li .menu-button li:hover {
    border-bottom-color: #ffffff !important; }
  .main-nav ul.main li .menu-button li a {
    background-color: #007cc3;
    color: #ffffff;
    border-radius: 3px;
    vertical-align: middle;
    cursor: pointer;
    text-align: center;
    background: #f68420;
    text-transform: uppercase !important;
    display: inline-block !important;
    color: #ffffff !important;
    padding: 0.5em 1em !important;
    margin-top: 1.5em !important; }
  .no-touch .main-nav ul.main li .menu-button li a:hover {
    background-color: #007cc3;
    color: #ffffff;
    border-radius: 3px;
    vertical-align: middle;
    cursor: pointer;
    text-align: center;
    background: #f68420;
    border: none !important;
    color: #ffffff !important; }
  .main-nav ul.main .mobile-utility {
    display: none; }

  /* *** ADDTL NAV *** */
  /* even if you don't have a side nav on the site, these styles also apply to the style guide menu */
  .secondary-nav {
    display: block;
    padding-top: 0; }
  .secondary-nav .secondary-nav-trigger {
    display: none !important; }
  .secondary-nav ul.hiddenContent {
    display: block; }
  .secondary-nav ul.hiddenContent li {
    /* style the secondary (nested) ul's */ }
  .secondary-nav ul.hiddenContent li a {
    padding: 0.5em 0;
    margin: 0; }
  .secondary-nav ul.hiddenContent li .secondary-nav-toggle {
    display: none; }
  .secondary-nav ul.hiddenContent li.selected-category > ul, .secondary-nav ul.hiddenContent li.selected-category > ul > li.current > ul {
    display: block !important;
    padding: 0.5em 0 0.5em 1em; }
  .secondary-nav ul.hiddenContent li.selected-category > ul li a, .secondary-nav ul.hiddenContent li.selected-category > ul > li.current > ul li a {
    padding: 0.25em 0; }
  .secondary-nav ul.hiddenContent li.hero-nav-item {
    display: none; }

  /* dropdown menu on mobile that turns into a side nav (or whatever kind of nav you want really) on larger screens. */
  /* here's where we cancel the dropdown styles from _basestyles.scss and make it look like the side nav */
  .mobile-secondary-nav-container {
    display: none; }

  .secondary-nav.hero-nav {
    display: block;
    border-top: none;
    font-family: "FrutigerLTCom-Roman", Arial, Helvetica, sans-serif; }
  .secondary-nav.hero-nav .secondary-nav-trigger {
    display: none; }
  .secondary-nav.hero-nav ul, .secondary-nav.hero-nav ul.open {
    padding: 0;
    display: block; }
  .secondary-nav.hero-nav ul li, .secondary-nav.hero-nav ul.open li {
    font-size: 14px;
    font-size: 1.4rem;
    display: block;
    list-style: none;
    margin: 0;
    /* style the secondary (nested) ul's */ }
  .secondary-nav.hero-nav ul li a, .secondary-nav.hero-nav ul.open li a {
    background: transparent;
    text-shadow: none;
    border: none;
    font-size: inherit;
    padding: 0.5em 0;
    display: block; }
  .secondary-nav.hero-nav ul li ul, .secondary-nav.hero-nav ul.open li ul {
    margin: 0.25em 0 0.25em 1em; }
  .secondary-nav.hero-nav ul li ul li, .secondary-nav.hero-nav ul.open li ul li {
    border-bottom: none; }
  .secondary-nav.hero-nav ul li.selected, .secondary-nav.hero-nav ul.open li.selected {
    display: block; }
  .secondary-nav.hero-nav ul li.selected a, .secondary-nav.hero-nav ul li.selected .no-touch a:hover, .secondary-nav.hero-nav ul li.selected a.active, .secondary-nav.hero-nav ul.open li.selected a, .secondary-nav.hero-nav ul.open li.selected .no-touch a:hover, .secondary-nav.hero-nav ul.open li.selected a.active {
    background: transparent;
    text-shadow: none;
    border: none;
    padding: 0.5em 0;
    font-size: inherit;
    color: #666666;
    text-align: center;
    cursor: default;
    pointer-events: none; }
  .secondary-nav.hero-nav ul li.selected a:after, .secondary-nav.hero-nav ul li.selected .no-touch a:hover:after, .secondary-nav.hero-nav ul li.selected a.active:after, .secondary-nav.hero-nav ul.open li.selected a:after, .secondary-nav.hero-nav ul.open li.selected .no-touch a:hover:after, .secondary-nav.hero-nav ul.open li.selected a.active:after {
    display: none; }
  .secondary-nav.hero-nav.hero-nav ul, .secondary-nav.hero-nav.hero-nav ul.open {
    display: table;
    width: 100%;
    background: rgba(11, 50, 84, 0.85); }
  .secondary-nav.hero-nav.hero-nav ul li, .secondary-nav.hero-nav.hero-nav ul.open li {
    display: table-cell;
    text-align: center;
    border-left: 1px solid #0b3254; }
  .secondary-nav.hero-nav.hero-nav ul li:first-child, .secondary-nav.hero-nav.hero-nav ul.open li:first-child {
    border-width: 0; }
  .secondary-nav.hero-nav.hero-nav ul li ul, .secondary-nav.hero-nav.hero-nav ul.open li ul {
    display: none !important; }
  .secondary-nav.hero-nav.hero-nav ul li a, .secondary-nav.hero-nav.hero-nav ul.open li a {
    color: #ffffff;
    padding: 0.95em 0;
    margin: 0; }
  .no-touch .secondary-nav.hero-nav.hero-nav ul li a:hover, .no-touch .secondary-nav.hero-nav.hero-nav ul.open li a:hover {
    background: #ffffff;
    color: #0b3254; }
  .secondary-nav.hero-nav.hero-nav ul li.selected-hero a, .secondary-nav.hero-nav.hero-nav ul.open li.selected-hero a {
    background: #ffffff;
    color: #0b3254; }

  /* ***************************************************************
  PAGE PARTS
  ******************** */
  /* * Contact box that shifts on mobile * */
  .contact-trigger {
    padding: 0.5em;
    text-align: center; }
  .contact-trigger:after {
    display: none; }

  /* the actual quicklinks information in quicklinks-box */
  .contact-content {
    max-height: none; }

  .contact {
    margin-bottom: 1.714em; }
  .contact *:last-child {
    margin-bottom: 0; }
  .contact.bg-blue {
    background: #007cc3 !important; }
  .contact.bg-blue .contact-content {
    padding: 0 1em 1em 1em; }
  .contact.bg-blue .contact-content a {
    color: #ffffff !important; }
  .contact.bg-blue .contact-content a:before {
    color: #ffffff; }
  .contact.bg-blue .contact-content .contact-main-links {
    font-size: 14px;
    font-size: 1.4rem; }
  .contact.bg-blue .contact-content .contact-main-links a[href^="tel"] {
    font-size: 24px;
    font-size: 2.4rem; }
  .contact.bg-blue .contact-content .contact-sub-links {
    font-size: 13px;
    font-size: 1.3rem; }

  /* **** SIDE RAILS **** */
  .search-filter-container .filter-toggle {
    display: none; }
  .search-filter-container .search-filter-content {
    display: block;
    padding-top: 1em; }

  /* ***** HOMEPAGE ****** */
  ul.hp-carousel {
    margin-left: -1em;
    margin-right: -1em; }
  ul.hp-carousel li {
    width: 33%; }
  ul.hp-carousel li.border-left {
    border-left: 1px solid #c9cece; }
  ul.hp-carousel li .carousel-content {
    text-align: left; }
  ul.hp-carousel li .carousel-content figure {
    margin-left: 0;
    margin-right: 0; }

  .iframe-video {
    width: 640px;
    height: 480px; }

  .AZ-quicklinks .AZ-trigger {
    display: none; }
  .AZ-quicklinks .AZ-select {
    display: block;
    width: 100%;
    background: transparent;
    border-radius: 0;
    border-bottom: 3px solid #808080;
    padding: 0.5em 0;
    margin-bottom: 1.714em; }
  .AZ-quicklinks .AZ-select a, .AZ-quicklinks .AZ-select span {
    font-size: 19px;
    font-size: 1.9rem;
    display: inline-block;
    background: transparent;
    color: #0b3254;
    margin: 0.25em 0.25em 0.25em 0;
    padding: 0;
    width: 2.6225%; }
  .no-touch .AZ-quicklinks .AZ-select a:hover, .no-touch .AZ-quicklinks .AZ-select span:hover {
    color: #007cc3; }
  .AZ-quicklinks .AZ-select a.disabled, .AZ-quicklinks .AZ-select span.disabled {
    color: #727477;
    background: transparent; }

  .symptom-checker {
    position: relative; }
  .symptom-checker .header-tab {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important; }
  .symptom-checker .symptom-left {
    padding-top: 4em; }
  .symptom-checker input[type="text"] {
    max-width: none; }
  .symptom-checker .AZ-quicklinks .AZ-select {
    border-bottom: none; }
  .symptom-checker .AZ-quicklinks .AZ-select a {
    width: 7.692307692307692%;
    margin: 0 -4px 0 0;
    padding: .5em 0; }

  .symptom-checker-initialize {
    margin: 0 -1em 0 0; }

  .pure-text.calendar {
    text-align: left;
    padding-left: 1.5em;
    padding-right: 1em; } }
/* end 51.2em / 759px */
@media all and (max-width: 900px) {
  /** MODAL Scale navigation arrows and reduce padding from sides **/
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); }

  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0; }

  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%; }

  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; } }
@media only screen and (min-width: 983px) {
  /* ***************************************************************
  GENERAL LAYOUT
  ******************** */
  /* **** GRID MEASUREMENTS **** */
  .lg-1 {
    width: 4.16667%; }

  .lg-2 {
    width: 8.33333%; }

  .lg-3 {
    width: 12.5%; }

  .lg-4 {
    width: 16.66667%; }

  .lg-4-5 {
    width: 20%; }

  .lg-5 {
    width: 20.83333%; }

  .lg-6 {
    width: 25%; }

  .lg-7 {
    width: 29.16667%; }

  .lg-8 {
    width: 33.33333%; }

  .lg-9 {
    width: 37.5%; }

  .lg-10 {
    width: 41.66667%; }

  .lg-11 {
    width: 45.83333%; }

  .lg-12 {
    width: 50%; }

  .lg-13 {
    width: 54.16667%; }

  .lg-14 {
    width: 58.33333%; }

  .lg-15 {
    width: 62.5%; }

  .lg-16 {
    width: 66.66667%; }

  .lg-17 {
    width: 70.83333%; }

  .lg-18 {
    width: 75%; }

  .lg-19 {
    width: 79.16667%; }

  .lg-20 {
    width: 83.33333%; }

  .lg-21 {
    width: 87.5%; }

  .lg-22 {
    width: 91.66667%; }

  .lg-23 {
    width: 95.83333%; }

  .lg-24 {
    width: 100%; }

  .push-right-lg {
    float: right; }

  .pull-left-lg {
    float: left; }

  /* show and hide elements based on screen size */
  .show-lg {
    display: inherit !important; }

  .show-med, .show-med-down {
    display: none !important; }

  .hide-med, .hide-med-down {
    display: inherit !important; }

  .hide-lg {
    display: none !important; }

  .no-padd-lg {
    padding: 0 !important; }

  [class*=column] {
    padding-left: 1em;
    padding-right: 1em; }

  .list-to-table {
    display: table;
    width: 100%; }
  .list-to-table .list-item {
    display: table-row; }
  .list-to-table .list-item.header {
    display: table-header-group;
    font-family: "FrutigerLTPro-Bold", Arial, Helvetica, sans-serif;
    color: #333333; }
  .list-to-table .list-item.header .list-block {
    padding: 0.5em 0.75em; }
  .list-to-table .list-item .list-block {
    display: table-cell;
    padding: 1em 0.75em;
    border-bottom: 1px solid #c9cece; }
  .list-to-table .list-item .list-block.min-width {
    min-width: 12em; }
  .list-to-table .list-item .list-block .item-title {
    display: none; }

  ul.display-inline li {
    width: 50%; }

  /* **** TABS / ACCORDION **** */
  ul.tabs {
    /* style the tabs that turn into an accordion on mobile. Class .accordion applied */
    /* make the li's look like tabs on larger screen */ }
  ul.tabs > li > a {
    padding: 0.25em 0.5em;
    border-radius: 8px 8px 0 0;
    cursor: pointer; }
  ul.tabs.accordion > li {
    display: inline; }
  ul.tabs.accordion > li > a {
    margin-bottom: 0;
    display: inline-block;
    padding: 0.5em 2em;
    outline: none;
    /* take away the icon */
    /* put the border back on the div immediately following the link */ }
  ul.tabs.accordion > li > a:after {
    display: none; }
  ul.tabs.accordion > li > a + div {
    padding: 2em 0 1em 0;
    margin-bottom: 1em;
    border-top: 4px solid #f68420; }
  ul.tabs.accordion > li > a + div.basic-mobile {
    padding: 2em 0 1em 0; }

  /* ***************************************************************
  HEADER / FOOTER
  ******************** */
  /* **** FOOTER **** */
  .footer-banner ul {
    margin: 0 auto;
    /*set width to the max percentage of screen you want the content to take up. default is set above in variables*/
    width: 95%;
    /*set max-width to the widest you want your content to display. default is set above in variables*/
    max-width: 77.143em;
    position: relative;
    max-width: 84em;
    width: 100%; }
  .footer-banner ul li {
    padding: 0; }
  .footer-banner ul li a {
    padding-top: 1.5em;
    padding-bottom: 1.5em; }
  .footer-banner ul li a:before {
    font-size: 40px;
    font-size: 4rem;
    margin-top: -.1em; }

  .footer-links {
    margin-left: -1.5em;
    margin-right: -1.5em; }

  /* ***************************************************************
  HEADER BANNERS + FLEXSLIDER + HP CAROUSEL
  ******************** */
  .flexslider .slides > li > div {
    width: 1024px; }

  #carousel-next, #carousel-prev {
    display: none; }

  .header-banner .header-banner-content .banner-wrap .header-copy h1, .header-banner .header-banner-content .banner-wrap .header-copy .h1, .header-banner .header-banner-content .banner-wrap .header-copy h2, .header-banner .header-banner-content .banner-wrap .header-copy .h2, .header-banner .header-banner-content .banner-wrap .header-copy h3, .header-banner .header-banner-content .banner-wrap .header-copy .h3 {
    font-size: 32px;
    font-size: 3.2rem; }

  .header-tab {
    margin-left: 0;
    margin-right: 0; }

  .section.grey .header-tab, .section.blue .header-tab, .section.orange .header-tab {
    margin-left: -0.775em;
    margin-right: -0.775em; }

  /* * floated links next to tabbed header * */
  .header-links {
    text-align: left;
    padding: 1em auto;
    border-bottom: none;
    float: right;
    padding: 0;
    margin-top: -3.75em; }

  /* ***************************************************************
  ALL NAVIGATION / MEGAMENU
  ******************** */
  .main-nav {
    width: 80.5%; }
  .main-nav ul.main > li {
    width: 14em; }

  .site-search .search-toggle {
    padding: 0.5em;
    border-radius: 0 0 4px 4px;
    height: auto;
    right: -1em;
    outline: none; }
  .site-search .form-search {
    border: none;
    padding: 0;
    min-width: 500px;
    width: 40%; }

  .hp-search .hiddenContent a.link {
    font-size: 12px;
    font-size: 1.2rem;
    display: inline-block;
    margin-left: 0.5em; }

  /* ***************************************************************
  PAGE PARTS - HP, Callouts, etc.
  ******************** */
  /* **** SIDE RAILS **** */
  .siderail-container.tweets {
    background: #ba0063; }
  .siderail-container.tweets .siderail-title {
    text-align: left;
    position: relative;
    padding-bottom: 0;
    padding-top: 1.5em;
    background: transparent; }
  .siderail-container.tweets .siderail-title:after {
    content: '';
    display: block;
    width: 77px;
    height: 55px;
    position: absolute;
    right: -1em;
    bottom: -0.5em;
    background: url("../../Image%20Library/TemplateImages/twitter-bird.png"); }

  /* cancel the hack to make the siderail stick to the top of it's container to give the illusion it is changing source order to match the comps */
  .side-rail.stick-to-top-med {
    position: static;
    right: auto; }

  .AZ-listing .letter .AZ-top-link {
    display: none; } }
/* end 61.4375em / 983px */
@media only screen and (min-width: 1160px) {
  .flexslider .slides > li {
    overflow: hidden; } }
@media only screen and (min-width: 1260px) {
  .flexslider, .header-banner {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto; }

  .flexslider .slides > li {
    max-height: 430px;
    overflow: hidden; }
  .flexslider .slides > li .flexslider-copy h1, .flexslider .slides > li .flexslider-copy .h1, .flexslider .slides > li .flexslider-copy h2, .flexslider .slides > li .flexslider-copy .h2 {
    font-size: 35px;
    font-size: 3.5rem; }
  .flexslider .slides > li .flexslider-copy p {
    font-size: 20px;
    font-size: 2rem; }
  .flexslider .slides > li .flexslider-copy > div {
    max-width: 983px;
    margin: 0 auto;
    padding-right: 35%; } }
/******************************************************************
Site Name: CHAM
Author: Katie Murray / Eric Boyer
Created: 8/20/2014
Last Updated / by:
Stylesheet: Responsive (320 and above) Stylesheet
******************************************************************/
@media only screen and (min-width: 520px) {
  .twitter-header > span {
    position: relative; }
  .twitter-header > span:after {
    content: '';
    display: block;
    width: 77px;
    height: 55px;
    position: absolute;
    right: -3.5em;
    bottom: 0;
    background: url("../../Image%20Library/TemplateImages/twitter-bird.png"); }

  .info-block {
    display: table;
    width: 100%; }

  .info-block-row {
    display: table-row; }

  .info-block-header, .info-block-details {
    display: table-cell;
    border-bottom: 1px solid #c9cece;
    padding: 0.75em 0; }

  .info-block-details {
    padding-left: 0.5em; }

  /*basic media object with left image and right content*/
  .media {
    border-left: 0;
    padding-left: 0;
    overflow: hidden;
    /*always use a figure to contain the image*/
    /*the content to the right of the image*/ }
  .media figure {
    text-align: center;
    float: left;
    margin-right: 1em;
    margin-bottom: 0;
    max-width: 30%; }
  .media figure img {
    height: auto; }
  .media figure.image-large {
    max-width: 50%; }
  .media .media-body {
    overflow: hidden; }
  .media .media-body *:last-child {
    margin-bottom: 0; }
  .media.image-right figure {
    float: right;
    margin-right: 0;
    margin-left: 1em; }
  .media.underline {
    border-bottom-width: 1px; } }
/*end sm*/
@media only screen and (min-width: 775px) {
  /* dropdown menu on mobile that turns into a side nav (or whatever kind of nav you want really) on larger screens.*/
  /* here's where we cancel the dropdown styles from _basestyles.scss and make it look like the side nav */
  /* the div that holds the hero image like on T6*/
  .hero {
    position: relative;
    margin-bottom: 1em;
    color: #ffffff;
    overflow: hidden; }
  .hero .page-title, .hero h1, .hero h2 {
    text-shadow: 1px 0 1px rgba(0, 0, 0, 0.5);
    color: #ffffff; }
  .hero img {
    margin: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -750px;
    max-width: none; }
  .hero .EditOptionalCSSClass, .hero .EditRequiredCSSClass {
    margin: 0 auto;
    max-width: 77.143em; }
  .hero .EditOptionalCSSClass img, .hero .EditRequiredCSSClass img {
    left: auto;
    right: 0;
    margin: 0 !important; }
  .hero .hero-content-container {
    margin: 0 auto;
    /*set width to the max percentage of screen you want the content to take up. default is set above in variables*/
    width: 95%;
    /*set max-width to the widest you want your content to display. default is set above in variables*/
    max-width: 77.143em;
    position: relative;
    height: 255px; }
  .hero .hero-content-container:before {
    content: '';
    display: inline-block;
    vertical-align: bottom;
    width: 1px;
    margin-left: -4px;
    height: 100%; }
  .hero .hero-content {
    display: inline-block;
    width: 100%;
    vertical-align: bottom;
    margin-left: -5px; }
  .hero .hero-nav ul {
    margin-bottom: 0; }
  .hero.hero-large .hero-content-container {
    height: 370px; }

  /*the div that will hold the breadcrumbs and social sharing buttons*/
  .page-meta {
    zoom: 1; }
  .page-meta:after {
    content: "";
    display: table;
    clear: both; }

  /*the div that addthis will be within when implemented by dev. Pro account needed for styling as comped*/
  .addthis_custom_sharing {
    display: block;
    float: right;
    margin-bottom: 1.714em; }

  .map-block .map-block-image, .map-block .map-block-map {
    display: block;
    float: left;
    width: 50%; }
  .map-block .map-block-map {
    padding-bottom: 37.55%; }
  .map-block .map-block-map.map-only {
    width: 100%; } }
/*end med */
@media only screen and (min-width: 983px) {
  .smallscreen-carousel.quality li {
    border-left: 2px dotted #cbcaca; }
  .smallscreen-carousel.quality li:first-child {
    border-left-width: 0; }

  .map-block .map-block-map.map-only {
    width: 100%;
    padding-bottom: 67.55%; } }
/* end lg */

/*# sourceMappingURL=responsive.css.map */