/**
 * Breakpoints.css.less is a single file contains progressive enhancements as the viewport gets larger than mobile.
 * Please remember to put mobile/default styles in components and theme.css first, and then override them here for larger viewports!
 *
 * In Omega this was represented by separate stylesheets (default.css, default-narrow.css etc) but for fluid
 * responsive layouts a single file approach is more flexible and gives us greater control over progressive enhancement.
 */
@media all and (min-width: 420px) {
  .region-pub-bar-top .highwire-quicksearch .btn-text {
    display: inline;
  }
}
@media all and (min-width: 550px) {
  .field.field-label-inline {
    display: table;
    width: 100%;
  }
  .field.field-label-inline > div {
    display: table-cell;
    float: none;
  }
  .field.field-label-inline > .field-label {
    line-height: 1.2;
    padding-right: 5px;
    text-align: right;
    width: 30%;
  }
  .opportunity-challenge-institution .shib-login-desc,
  .opportunity-challenge-institution .openathens-login-desc {
    margin-left: 180px;
    /* = width of button (165px) + margin (15px) */
  }
  .panel-region-sidebar-right .opportunity-challenge-institution .shib-login-desc,
  .panel-region-sidebar-right .opportunity-challenge-institution .openathens-login-desc {
    margin-left: 0;
  }
  .highwire-search-results-tools-wrapper.inline .hw-search-extra-wrapper {
    float: left;
    width: auto;
  }
  .highwire-search-results-tools-wrapper.inline .search-result-tool {
    float: right;
    width: auto;
  }
}
/**
 * Narrow
 * This is similar to default.css + default-narrow.css in Omega, containing common tablet and desktop styles.
 */
@media all and (min-width: 768px) and (min-device-width: 768px), (max-device-width: 800px) and (min-width: 768px) and (orientation:landscape) {
  .block-panels-mini-highwire-commons-search-box {
    margin-left: 0;
  }
  .krumo-node code {
    white-space: nowrap;
  }
  .region-pub-bar-top .highwire-quicksearch .btn-text {
    display: none;
  }
  .sticky-header.is-visible .breadcrumb {
    display: block;
  }
  .sticky-header .sticky-header__home,
  .sticky-header .breadcrumb > .breadcrumb-inner > span:last-child {
    display: inline;
  }
  .sticky-header > .breadcrumb > .breadcrumb-inner {
    padding-left: 30.5px;
  }
  .sticky-header > .breadcrumb > .breadcrumb-inner > a:first-child {
    margin-left: -23px;
  }
  .zone-jnl-header {
    padding-top: 3rem;
  }
  .zone-jnl-header .journal-logo {
    max-height: 160px;
    vertical-align: middle;
  }
  /* Journal header region */
  #mini-panel-journal_page_header > div > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    align-items: center;
  }
  .pre-footer__social,
  .pre-footer__logo,
  .pre-footer__contact {
    text-align: right;
  }
  .footer-cols-left .panel-region-second {
    border-bottom: 0;
    margin-bottom: 0;
  }
  .node-hwfeat-image-slideshow-item.node-view-full > .content > .hwfeat-slide-overlay,
  .hw-feature-image-carousel.slide-style-row .hw-feature-image-carousel-pager {
    right: 0;
    left: auto;
  }
  .hw-feature-image-carousel.slide-style-row .hw-feature-image-carousel-pager,
  .node-hwfeat-image-slideshow-item.node-view-full > .content > .hwfeat-slide-overlay {
    width: calc(50% - 7.5px);
  }
  .field.field-label-inline > .field-label {
    width: 32%;
  }
  .view--grid-2x .highwire-article-citation-list ul {
    align-items: stretch;
    display: flex;
    flex-flow: row wrap;
    padding-left: 0;
  }
  .view--grid-2x .highwire-article-citation-list ul > li {
    flex: 0 0 50%;
  }
  .view--grid-2x .highwire-article-citation-list ul > li.odd {
    padding-right: 7.5px;
  }
  .view--grid-2x .highwire-article-citation-list ul > li.even {
    padding-left: 7.5px;
  }
  .highwire-citation-pub-logos img {
    max-width: none;
  }
  .hw-commons-pub-logos li + li {
    margin-top: 15px;
  }
  .nav-children .issue-browser li {
    width: 10%;
  }
  ul.issue-month-detail {
    padding-left: 15px;
  }
  .citation--page-top .highwire-cite-pdf-download {
    float: left;
    margin-right: 15px;
  }
  .panels-ajax-tab li a {
    padding: 10px 15px;
  }
  .highwire-markup .fig.pos-float {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
  }
  .highwire-markup .fig.pos-float > .highwire-figure {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
  }
  .highwire-markup .fig.pos-float > .highwire-figure > * {
    display: block;
    padding-right: 15px;
  }
  .highwire-markup .fig.pos-float > .fig-caption {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
  }
  ul.highwire-figure-links.inline,
  ul.highwire-figure-links.inline .last {
    margin-bottom: 0;
  }
  .fig-expansion ul.highwire-figure-links.inline,
  .fig-expansion ul.highwire-figure-links.inline li {
    margin-bottom: 15px;
  }
  /* Adjust width of toolbox cols in narrow */
  .highwire-2col-stacked .panel-region-content-left {
    width: 60%;
  }
  .highwire-2col-stacked .panel-region-content-right {
    width: 40%;
  }
  .highwire-alerts.tablesorter-sticky-visible {
    top: 90px !important;
    /* override inline style */
  }
  .home-layout .highwire-commons-home-page-ad .ad-square {
    float: left;
    width: 50%;
  }
  .home-layout .highwire-commons-home-page-ad .ad-square + .ad-square {
    margin-top: 0;
  }
}
/**
 * Normal + Wide
 * This is similar to default-normal.css + default-wide.css in Omega. Typically desktop only styles.
 */
@media all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape) {
  .wrapper-pub-bar--top .advanced-search-link a {
    margin-left: 5px;
  }
  .wrapper-pub-bar--top ul.nice-menu a,
  .wrapper-pub-bar--top ul.nice-menu-down .menuparent a {
    padding: 15px;
  }
  .wrapper-pub-bar--top .block-panels-mini .panel-pane,
  .wrapper-pub-bar--top .block-panels-mini .panel-pane + div {
    display: inline-flex;
    vertical-align: middle;
  }
  .wrapper-pub-bar--top ul.nice-menu-down > li.first a {
    padding-left: 0;
  }
  .region-pub-bar-top .highwire-quicksearch button {
    padding: 0 15px;
  }
  .region-pub-bar-top .highwire-quicksearch .btn-text {
    display: inline;
  }
  .wrapper-branding #logo {
    margin: 10px 0;
  }
  .footer-cols-left .panel-region-second {
    border-top: 0;
    padding-top: 0;
  }
  .hw-feature-image-carousel.slide-style-row .hw-feature-image-carousel-pager,
  .node-hwfeat-image-slideshow-item.node-view-full > .content > .hwfeat-slide-overlay {
    width: calc(33.333333333% - 10px);
  }
  .field.field-label-inline > .field-label {
    width: 25%;
  }
  /* Reset width of toolbox cols */
  .highwire-2col-stacked .panel-region-content-left,
  .highwire-2col-stacked .panel-region-content-right {
    width: 50%;
  }
  .home-layout .highwire-commons-home-page-ad .ad-square {
    float: none;
    width: auto;
  }
  .home-layout .highwire-commons-home-page-ad .ad-square + .ad-square {
    margin-top: 30px;
  }
  .home-layout .panel-region-sidebar-right {
    padding-left: 25px;
  }
  .content-sidebar-layout .panel-region-sidebar-right {
    padding-left: 25px;
  }
}
/**
 * Wide+
 * This is similar to default-wide.css in Omega. For very wide desktop styles.
 */
@media all and (min-width: 1195px) {
  /*
  #page,
  .section-header .container-wrapper.wrapper-header {
    padding-left: 0;
    padding-right: 0;
  }

  #page {
    .section-header,
    .section-footer {
      margin-left: 0;
      margin-right: 0;
    }
  }
*/
  .wrapper-pub-bar--top > .container-fluid {
    padding: 0 7.5px;
  }
  div[class^="col-"] > .messages {
    margin-left: 0;
    margin-right: 0;
  }
}