/*******************************************************************************
 * basic.layout.scss
 *
 * Styling of the "basic" layout for the NIH website.
 ******************************************************************************/
/*%cfx {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}*/
/*
$small: 30em;
$medium-small: 40em;
$medium: 50em;
$large: 60em;
$large-extra: 70em;
$max-width: 1200px;
*/
/*
$sprites-clean-up: true;
$sprites-spacing: 20px;
@import "sprites/*.png";
@include all-sprites-sprites;
*/
/*
 * Retina Sprites for Compass
 * by:              Gaya Kessler
 * last update:     03/11/14
 *
 * Usage:
 * 1. create two folders in your image directory (in this case 'icons' and 'icons-2x').
 * 2. adjust the foldernames defined below if you use different names.
 * 3. create sprite images for pixel ratio 1 screens and put them in the first folder.
 * 4. create sprite images for pixel ratio 2 screens and put them in the second folder, use the same filenames.
 * 5. use the sprite-image in your Sass/Scss using: '@include use-sprite(<sprite-name>)'
 */
/* line 9, ../../../sass/abstractions/_base.scss */
@media (man-width: 700) {
  .l-nav-wrapper {
    position: absolute;
    top: 16.05rem !important;
  }
  .content:has(.field--name-body ~ .field--name-field-right-panel-sections) .field--name-body {
    width: 100%;
    float: left;
  }
  .content:has(.field--name-body ~ .field--name-field-right-panel-sections) .field--name-field-right-panel-sections {
    width: 100%;
    float: right;
  }
}
.content:has(.field--name-body ~ .field--name-field-right-panel-sections) .field--name-body {
  width: 75%;
  float: left;
  padding-right: 1rem;
}
.content:has(.field--name-body ~ .field--name-field-right-panel-sections) .field--name-field-right-panel-sections {
  width: 25%;
  float: right;
}

.field--name-field-page-subtitle.field__item {
  clear: both;
  color: #0F4071;
  font: 400 1.8em/1.3em "Droid Serif", Georgia, "Times New Roman", Times, serif;
  letter-spacing: -0.05em;
  margin-bottom: 1em;
  margin-top: 0;
}

.field--name-field-hd-images img {
  width: 100%;
}

.field--name-field-sidebar-block-title {
  font: 400 1.4em/1.3em "Droid Sans", Trebuchet MS, Arial, Helvetica, sans-serif;
  letter-spacing: -0.02em;
  text-rendering: optimizelegibility;
  padding-left: 1rem;
}

.field--name-field-sidebar-block {
  border-radius: 5px;
  background-color: #f2f2ed;
  float: none;
  margin-bottom: 1.5em;
  padding: 1.6em 1.5em 0.3em 1.5em;
  width: 100%;
}

.l-region--utilities:after, .l-region--search:after, .l-region--utilities:after, .l-region--search:after {
  content: "";
  display: table;
  clear: both;
}

@media (min-width: 800px) {
  /* line 46, ../../../sass/layouts/basic/basic.layout.scss */
  .l-region--utilities, .l-region--search {
    float: right;
    clear: right;
  }
  /* line 51, ../../../sass/layouts/basic/basic.layout.scss */
  .l-region--utilities > *, .l-region--search > * {
    float: left;
  }
}
/* line 56, ../../../sass/layouts/basic/basic.layout.scss */
.l-region--connect {
  clear: both;
}
.l-region--connect:after {
  content: "";
  display: table;
  clear: both;
}

/* line 9, ../../../sass/abstractions/_base.scss */
/* line 60, ../../../sass/layouts/basic/basic.layout.scss */
.l-region--help {
  margin-bottom: 3em;
}
.l-region--help:after {
  content: "";
  display: table;
  clear: both;
}

/* line 9, ../../../sass/abstractions/_base.scss */
/* line 65, ../../../sass/layouts/basic/basic.layout.scss */
.l-ribbon-wrapper, .l-banner-wrapper, .l-navigation-wrapper, .l-region--subnavigation, .l-main-wrapper, .l-connect-wrapper, .l-footer-wrapper {
  width: 100%;
}

/* line 9, ../../../sass/abstractions/_base.scss */
.l-ribbon-wrapper:after, .l-banner-wrapper:after, .l-navigation-wrapper:after, .l-region--subnavigation:after, .l-main-wrapper:after, .l-connect-wrapper:after, .l-footer-wrapper:after {
  content: "";
  display: table;
  clear: both;
}

/* line 77, ../../../sass/layouts/basic/basic.layout.scss */
.l-ribbon, .l-banner, .l-menu-wrapper, .site-menu, .l-main, .l-connect, .l-footer {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  /* @include show-grid(overlay); */
  margin: 0 auto;
  min-height: 100%;
}

/* line 12, C:\Ruby23\lib\ruby\gems\2.3.0\gems\susy-2.1.3\sass\susy\output\support\_clearfix.scss */
.l-ribbon:after, .l-banner:after, .l-menu-wrapper:after, .site-menu:after, .l-main:after, .l-connect:after, .l-footer:after {
  content: " ";
  display: block;
  clear: both;
}

/* line 9, ../../../sass/abstractions/_base.scss */
.l-ribbon:after, .l-banner:after, .l-menu-wrapper:after, .site-menu:after, .l-main:after, .l-connect:after, .l-footer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 90, ../../../sass/layouts/basic/basic.layout.scss */
.l-banner {
  clear: both;
}

/* line 96, ../../../sass/layouts/basic/basic.layout.scss */
.l-content {
  padding-top: 2em;
  padding-left: 1.5em;
  padding-right: 1.5em;
}
.l-content > .l-region--featured-content {
  margin-top: -2em;
}

/* line 98, ../../../sass/layouts/basic/basic.layout.scss */
@media (min-width: 800px) {
  /* line 105, ../../../sass/layouts/basic/basic.layout.scss */
  .l-region--sidebar-first, .l-region--sidebar-third {
    margin-top: 2em;
  }
  /* line 109, ../../../sass/layouts/basic/basic.layout.scss */
  .l-region--sidebar-second {
    margin-bottom: 2em;
  }
}
/* line 114, ../../../sass/layouts/basic/basic.layout.scss */
.l-region--sidebar-first, .l-region--sidebar-third {
  padding-left: 1.5em;
  padding-right: 1.5em;
}

/* line 120, ../../../sass/layouts/basic/basic.layout.scss */
.l-content > .l-region--featured-content, .l-region--sidebar-first > .l-region--featured-content, .l-region--sidebar-third > .l-region--featured-content {
  margin-left: -1.5em;
  margin-right: -1.5em;
}

/* line 127, ../../../sass/layouts/basic/basic.layout.scss */
.l-region--sidebar-second {
  margin-left: 1.5em;
  margin-right: 1.5em;
}

/* line 136, ../../../sass/layouts/basic/basic.layout.scss */
.responsive-state {
  display: none;
  width: 480px;
}

@media (min-width: 600px) {
  /* line 9, ../../../sass/abstractions/_base.scss */
  .l-region--sidebar-second:after {
    content: "";
    display: table;
    clear: both;
  }
}
@media (min-width: 800px) {
  /* line 156, ../../../sass/layouts/basic/basic.layout.scss */
  .responsive-state {
    width: 800px;
  }
  /* line 160, ../../../sass/layouts/basic/basic.layout.scss */
  .l-ribbon, .l-banner, .l-menu-wrapper, .site-menu, .l-main, .l-connect, .l-footer {
    /* @include show-grid(overlay); */
  }
  /* line 170, ../../../sass/layouts/basic/basic.layout.scss */
  .l-ribbon, .l-banner, .l-menu-wrapper, .site-menu {
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* line 12, C:\Ruby23\lib\ruby\gems\2.3.0\gems\susy-2.1.3\sass\susy\output\support\_clearfix.scss */
  .l-ribbon:after, .l-banner:after, .l-menu-wrapper:after, .site-menu:after {
    content: " ";
    display: block;
    clear: both;
  }
  /* line 177, ../../../sass/layouts/basic/basic.layout.scss */
  .l-region--sidebar-first {
    margin-top: 2em;
    width: 25%;
    float: left;
    padding-left: 2.25em;
    padding-right: 1.5em;
  }
  /* line 181, ../../../sass/layouts/basic/basic.layout.scss */
  .l-region--sidebar-third {
    width: 25%;
    float: left;
    padding-left: 2.25em;
    padding-right: 1.5em;
  }
  /* line 188, ../../../sass/layouts/basic/basic.layout.scss */
  .l-region--sidebar-second {
    margin-left: 0;
    margin-right: 2.25em;
  }
  /* line 193, ../../../sass/layouts/basic/basic.layout.scss */
  .l-content {
    min-height: 20em;
    padding-left: 2.25em;
    padding-right: 2.25em;
  }
  .l-content > .l-region--featured-content {
    margin-left: -2.25em;
    margin-right: -2.25em;
  }
  /* line 197, ../../../sass/layouts/basic/basic.layout.scss */
  /* line 204, ../../../sass/layouts/basic/basic.layout.scss */
  .has-sidebar-third .l-content-wrapper {
    width: 75%;
    float: right;
    margin-right: 0;
  }
  .has-sidebar-third .l-content {
    padding-left: 0;
  }
  .has-sidebar-third .l-content > .l-region--featured-content {
    margin-left: 0;
  }
  /* line 207, ../../../sass/layouts/basic/basic.layout.scss */
  /* line 209, ../../../sass/layouts/basic/basic.layout.scss */
  /* line 216, ../../../sass/layouts/basic/basic.layout.scss */
  .has-sidebar-first .l-content-wrapper {
    width: 75%;
    float: right;
    margin-right: 0;
  }
  .has-sidebar-first .l-content {
    padding-left: 1rem;
  }
  .has-sidebar-first .l-content > .l-region--featured-content {
    margin-left: -1rem;
  }
  /* line 219, ../../../sass/layouts/basic/basic.layout.scss */
  /* line 221, ../../../sass/layouts/basic/basic.layout.scss */
  /* line 229, ../../../sass/layouts/basic/basic.layout.scss */
  .has-one-sidebar.has-sidebar-second .l-content-wrapper {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0;
  }
  .has-one-sidebar.has-sidebar-second .l-content-wrapper .l-content {
    width: 66.66667%;
    float: left;
    padding-right: 1.5em;
  }
  .has-one-sidebar.has-sidebar-second .l-content-wrapper .l-content > .l-region--featured-content {
    margin-right: -1.5em;
  }
  .has-one-sidebar.has-sidebar-second .l-content-wrapper .l-region--sidebar-second {
    width: 33.33333%;
    float: right;
    margin-right: 0;
    padding-right: 0;
    background-color: #f2f2ed;
  }
  /* line 231, ../../../sass/layouts/basic/basic.layout.scss */
  /* line 234, ../../../sass/layouts/basic/basic.layout.scss */
  /* line 238, ../../../sass/layouts/basic/basic.layout.scss */
  /* line 248, ../../../sass/layouts/basic/basic.layout.scss */
  .has-two-sidebars.has-sidebar-second .l-content-wrapper, .has-three-sidebars .l-content-wrapper {
    width: 75%;
    float: right;
    margin-right: 0;
    padding-right: 2.25em;
  }
  /* line 251, ../../../sass/layouts/basic/basic.layout.scss */
  .has-two-sidebars.has-sidebar-second .l-content-wrapper .l-content, .has-three-sidebars .l-content-wrapper .l-content {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0;
    padding-right: 0;
  }
  /* line 254, ../../../sass/layouts/basic/basic.layout.scss */
  .has-two-sidebars.has-sidebar-second .l-content-wrapper .l-content > .l-region--featured-content, .has-three-sidebars .l-content-wrapper .l-content > .l-region--featured-content {
    margin-right: -2.25em;
  }
  /* line 259, ../../../sass/layouts/basic/basic.layout.scss */
  .has-two-sidebars.has-sidebar-second .l-content-wrapper .l-region--sidebar-second, .has-three-sidebars .l-content-wrapper .l-region--sidebar-second {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-right: 0;
  }
}
@media (min-width: 960px) {
  /* line 273, ../../../sass/layouts/basic/basic.layout.scss */
  .l-ribbon, .l-banner, .l-menu, .l-main, .l-connect, .l-footer {
    /* @include show-grid(overlay); */
  }
  /* line 284, ../../../sass/layouts/basic/basic.layout.scss */
  .has-two-sidebars.has-sidebar-second .l-content-wrapper, .has-three-sidebars .l-content-wrapper {
    width: 75%;
    float: right;
    margin-right: 0;
    padding-right: 0;
  }
  /* line 287, ../../../sass/layouts/basic/basic.layout.scss */
  .has-two-sidebars.has-sidebar-second .l-content-wrapper .l-content, .has-three-sidebars .l-content-wrapper .l-content {
    width: 66.66667%;
    float: left;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* line 291, ../../../sass/layouts/basic/basic.layout.scss */
  .has-two-sidebars.has-sidebar-second .l-content-wrapper .l-content > .l-region--featured-content, .has-three-sidebars .l-content-wrapper .l-content > .l-region--featured-content {
    margin-left: -1rem;
    margin-right: -1rem;
  }
  /* line 296, ../../../sass/layouts/basic/basic.layout.scss */
  .has-two-sidebars.has-sidebar-second .l-content-wrapper .l-region--sidebar-second, .has-three-sidebars .l-content-wrapper .l-region--sidebar-second {
    width: 33.33333%;
    float: right;
    margin-right: 0;
    background-color: #f2f2ed;
  }
}
@media (min-width: 1100px) {
  /* line 311, ../../../sass/layouts/basic/basic.layout.scss */
  .has-one-sidebar.has-sidebar-second .l-content-wrapper .l-content {
    width: 75%;
    float: left;
  }
  .has-one-sidebar.has-sidebar-second .l-content-wrapper .l-region--sidebar-second {
    width: 25%;
    float: right;
    margin-right: 0;
    background-color: #f2f2ed;
  }
  /* line 314, ../../../sass/layouts/basic/basic.layout.scss */
}
@media all and (max-width: 479px) {
  /* line 326, ../../../sass/layouts/basic/basic.layout.scss */
  .node--full .field--name-field-image img {
    float: right;
    max-width: 40%;
    margin-left: 0.5rem;
    margin-bottom: 0.5rem;
    margin-top: 5px;
  }
}
@media (min-width: 480px) {
  /* line 324, ../../../sass/layouts/basic/basic.layout.scss */
  .node--full .field--name-field-image {
    float: right;
    max-width: 50%;
    margin-left: 1rem;
    margin-bottom: 1rem;
    margin-top: 5px;
  }
}
/* line 343, ../../../sass/layouts/basic/basic.layout.scss */
.nodesinblock .lastupdated {
  display: none;
}

/* line 348, ../../../sass/layouts/basic/basic.layout.scss */
.page-section {
  margin-bottom: 0.8rem;
}
.page-section:after {
  content: "";
  display: table;
  clear: both;
}
.page-section.hide-title .page-section-title {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
.page-section.no-title .page-section-title {
  display: none;
}

/* line 9, ../../../sass/abstractions/_base.scss */
@media (min-width: 800px) {
  /* line 354, ../../../sass/layouts/basic/basic.layout.scss */
  .page-section.has-group-right .group-header, .page-section.has-group-right .group-footer {
    width: 100%;
    float: left;
    clear: both;
  }
  .page-section.has-group-right .group-left {
    clear: both;
    float: left;
    width: 60%;
    padding-right: 2em;
  }
  .page-section.has-group-right .group-right {
    float: left;
    width: 40%;
  }
  /* line 360, ../../../sass/layouts/basic/basic.layout.scss */
  /* line 366, ../../../sass/layouts/basic/basic.layout.scss */
}
/* line 373, ../../../sass/layouts/basic/basic.layout.scss */
/* line 378, ../../../sass/layouts/basic/basic.layout.scss */
@media (min-width: 800px) {
  /* line 387, ../../../sass/layouts/basic/basic.layout.scss */
  .section-ncf .has-sidebar-first .l-main {
    background: #f2f9ff;
  }
  .section-ncf .has-sidebar-first .l-main .l-content-wrapper {
    background: #fff;
  }
  /* line 390, ../../../sass/layouts/basic/basic.layout.scss */
}