@charset "UTF-8";
html {
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

/**
 * Drupal core's .visually-hidden
 *
 * Note the lack of !important on the position rule.
 * This allows us to change the position property after
 * *unhidding* an element using the unset-visually-hidden
 * mixin below.
 */
/* multi line truncation */
/**
 * Placeholder for dropdown!
 *
 * Selected option is grayed out to give it the look of a placeholder text.
 * This is good for unselected dropdowns where the top item says something like
 * 'Select ...'.  But it is not ideal where a value has been selected already.
 */
/**
 * Style overrides for jQueryUI datepicker.
 */
.container {
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
}

.container::after {
  clear: both;
  content: "";
  display: block;
}

.no-sidebars #content, .no-sidebars .newcontent {
  width: 100%;
}

@media screen and (min-width: 48.0625em) {
  .no-sidebars #content, .no-sidebars .newcontent {
    float: left;
    display: block;
    margin-right: 3.22581%;
    width: 100%;
  }
  .no-sidebars #content:last-child, .no-sidebars .newcontent:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 60.0625em) {
  .no-sidebars #content, .no-sidebars .newcontent {
    float: left;
    display: block;
    margin-right: 2.12766%;
    width: 100%;
  }
  .no-sidebars #content:last-child, .no-sidebars .newcontent:last-child {
    margin-right: 0;
  }
}

.one-sidebar.sidebar-second #content, .one-sidebar.sidebar-second .newcontent {
  width: 100%;
}

@media screen and (min-width: 60.0625em) {
  .one-sidebar.sidebar-second #content, .one-sidebar.sidebar-second .newcontent {
    float: left;
    display: block;
    margin-right: 2.12766%;
    width: 65.95745%;
  }
  .one-sidebar.sidebar-second #content:last-child, .one-sidebar.sidebar-second .newcontent:last-child {
    margin-right: 0;
  }
}

.one-sidebar.sidebar-first #content, .one-sidebar.sidebar-first .newcontent {
  width: 100%;
}

@media screen and (min-width: 48.0625em) {
  .one-sidebar.sidebar-first #content, .one-sidebar.sidebar-first .newcontent {
    float: left;
    display: block;
    margin-right: 3.22581%;
    width: 74.19355%;
    margin-left: 25.80645%;
  }
  .one-sidebar.sidebar-first #content:last-child, .one-sidebar.sidebar-first .newcontent:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 60.0625em) {
  .one-sidebar.sidebar-first #content, .one-sidebar.sidebar-first .newcontent {
    float: left;
    display: block;
    margin-right: 2.12766%;
    width: 65.95745%;
    margin-left: 34.04255%;
  }
  .one-sidebar.sidebar-first #content:last-child, .one-sidebar.sidebar-first .newcontent:last-child {
    margin-right: 0;
  }
}

.two-sidebars #content, .two-sidebars .newcontent {
  width: 100%;
}

@media screen and (min-width: 48.0625em) {
  .two-sidebars #content, .two-sidebars .newcontent {
    float: left;
    display: block;
    margin-right: 3.22581%;
    width: 48.3871%;
    margin-left: 25.80645%;
  }
  .two-sidebars #content:last-child, .two-sidebars .newcontent:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 60.0625em) {
  .two-sidebars #content, .two-sidebars .newcontent {
    float: left;
    display: block;
    margin-right: 2.12766%;
    width: 40.42553%;
    margin-left: 25.53191%;
  }
  .two-sidebars #content:last-child, .two-sidebars .newcontent:last-child {
    margin-right: 0;
  }
}

#sidebar-first {
  width: 100%;
}

@media screen and (min-width: 48.0625em) {
  #sidebar-first {
    float: left;
    display: block;
    margin-right: 3.22581%;
    width: 22.58065%;
    margin-left: -77.41935%;
  }
  #sidebar-first:last-child {
    margin-right: 0;
  }
  .one-sidebar.sidebar-first #sidebar-first {
    margin-left: -103.22581%;
  }
}

@media screen and (min-width: 60.0625em) {
  #sidebar-first {
    float: left;
    display: block;
    margin-right: 2.12766%;
    width: 31.91489%;
    margin-left: -68.08511%;
  }
  #sidebar-first:last-child {
    margin-right: 0;
  }
  .one-sidebar.sidebar-first #sidebar-first {
    margin-left: -102.12766%;
  }
}

#sidebar-second, .sidebar-ads {
  width: 100%;
}

@media screen and (min-width: 48.0625em) {
  #sidebar-second, .sidebar-ads {
    float: left;
    display: block;
    margin-right: 3.22581%;
    width: 22.58065%;
    margin-left: 0%;
  }
  #sidebar-second:last-child, .sidebar-ads:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 60.0625em) {
  #sidebar-second, .sidebar-ads {
    float: left;
    display: block;
    margin-right: 2.12766%;
    width: 31.91489%;
    margin-left: 0%;
  }
  #sidebar-second:last-child, .sidebar-ads:last-child {
    margin-right: 0;
  }
}

#footer {
  float: none;
  clear: both;
}

#header, #footer,
#sidebar-first,
#sidebar-second,
.sidebar-ads,
#navigation {
  background: rgba(255, 255, 255, 0.2);
}

#header,
#footer,
.mission,
.breadcrumb,
.node {
  clear: both;
}

/**
 * @file
 * Style rules for the event calendar.
 *
 * External variables used:
 *  - $medium-screen-up
 *  - $font-awesome-calendar-o-icon
 */
/**
 * Form wrapper for exposed filters.
 *
 * The wrapper should occupy from the left to right edge of the screen.
 */
#views-exposed-form-events-event-listing-page {
  margin: 1em -3% 3%;
  padding: 3%;
}

@media screen and (min-width: 48.0625em) {
  #views-exposed-form-events-event-listing-page {
    margin-left: 0;
    margin-right: 0;
    padding: 1.5%;
  }
}

@media screen and (min-width: 48.0625em) {
  #views-exposed-form-events-event-listing-page .form-item {
    display: inline-block;
    width: 22%;
    margin: 0 1.25%;
  }
}

#views-exposed-form-events-event-listing-page .form-item .form-text,
#views-exposed-form-events-event-listing-page .form-item .form-select {
  padding-left: 0.5em;
  margin-bottom: 5%;
}

/**
 * "Filter by event type" and "Filter by region" dropdowns.
 */
.form-item-event-type > .form-select,
.form-item-location > .form-select {
  width: 100%;
  color: #adadad;
  -webkit-appearance: none;
  background-size: 6%;
  background-position-x: 95%;
}

@media screen and (min-width: 37.5625em) {
  .form-item-event-type > .form-select,
  .form-item-location > .form-select {
    background-size: 3%;
    background-position-x: 98.5%;
  }
}

@media screen and (min-width: 48.0625em) {
  .form-item-event-type > .form-select,
  .form-item-location > .form-select {
    background-size: 8%;
    background-position-x: 95%;
  }
}

.form-item-event-type > .form-select > option,
.form-item-location > .form-select > option {
  color: #333;
}

.form-item-event-type > .form-select > *,
.form-item-location > .form-select > * {
  height: 1.5em;
}

/**
 * From and To date selectors.
 *
 * A calendar icon should appear at the right edge of the date selector box.
 */
.form-item-from-date,
.form-item-to-date {
  position: relative;
}

.form-item-from-date > .form-text,
.form-item-to-date > .form-text {
  border-radius: 5px;
  height: 2.625em;
}

.form-item-from-date > .ui-datepicker-trigger,
.form-item-to-date > .ui-datepicker-trigger {
  padding: 0;
  position: absolute;
  top: 2.5em;
  right: .5em;
}

.form-item-from-date > .ui-datepicker-trigger:after,
.form-item-to-date > .ui-datepicker-trigger:after {
  content: "";
  font-family: fontAwesome;
  font-size: 1.5em;
}

.event-pager {
  display: block;
  max-width: 20em;
  line-height: 2.5em;
  margin: 0 auto 1em;
  border-radius: 3px;
  text-align: center;
}

/**
 * @file
 * Event summary box from the event calendar.
 *
 * External variables used:
 *  - $medium-screen-up
 *  - $large-screen-up
 *  - $font-awesome-calendar-o-icon
 *  - $font-awesome-map-marker-icon
 */
.event-summary {
  border-radius: 5px;
  margin-bottom: 1.5em;
  padding: 0.25em 0.5em 0.5em;
  display: inline-block;
  min-width: 18.75em;
  width: 100%;
}

.event-summary > .event-start-date:before {
  content: "";
  font-family: fontAwesome;
}

.event-summary > .event-end-date time:before {
  content: '- ';
}

.event-summary > .event-title {
  margin: 0.5em 0 0.75em;
  min-height: 2.85em;
}

.event-summary > .event-type {
  min-height: 1.5em;
}

.event-summary > .event-location > :before {
  content: "";
  font-family: fontAwesome;
}

@media screen and (min-width: 48.0625em) {
  .event-summary {
    width: 30%;
    margin-bottom: 2em;
    margin-right: 1.5%;
  }
}

@media screen and (min-width: 48.0625em) {
  .event-summary:nth-of-type(2n) {
    margin-right: 0;
  }
}

@media screen and (min-width: 60.0625em) {
  .event-summary:nth-of-type(2n) {
    margin-right: 1.5%;
  }
  .event-summary:nth-of-type(3n) {
    margin-right: 0;
  }
}

/**
 * @file
 *  Header region displayed at the top of every page.
 *
 * External variables used:
 *  - $horizontal-bar-mode
 *  - $mobile-logo-width
 *  - $large-menu-small-font-size
 */
#header {
  position: fixed;
  width: 100%;
  z-index: 999;
  /**
   * Shorter header.  Triggered via scrolling.
   */
  /**
   * Override side padding for .container as defined in _layout--grid.sass.
   * We do not need this padding in smaller displays...
   */
}

@media screen and (min-width: 48.0625em) {
  #header.small .site-logo {
    /* Use mobile logo even in larger displays. */
    width: 12rem;
  }
  #header.small .menu--navigation {
    font-size: 14px;
  }
}

#header > .container {
  padding-left: 0;
  padding-right: 0;
}

@media screen and (min-width: 48.0625em) {
  #header > .container {
    padding-left: 10px;
    padding-right: 10px;
  }
}

#header-region {
  /**
   * This relative positioning allows us place absolutely positioned children
   * (e.g. login menu) relative to it.
   */
}

@media screen and (min-width: 48.0625em) {
  #header-region {
    position: relative;
    height: auto;
  }
}

/**
 * The header area *always* occupies 4rem at the top in mobile display.
 * So content needs to start after that.
 */
#main {
  padding-top: 4rem;
}

@media screen and (min-width: 48.0625em) {
  #main {
    padding-top: 9rem;
  }
}

#skip {
  display: none;
}

/**
 * @file
 *  Style rules for Site logo and site name.
 */
.site-logo {
  display: block;
  width: 12rem;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0.35rem;
  z-index: 3000;
}

@media screen and (min-width: 48.0625em) {
  .site-logo {
    position: static;
    width: 21rem;
    padding-top: 0.25rem;
    transition: width 1s;
  }
}

.site-name {
  display: none;
}

/**
 * Navigation menu containing links such as News, Guides, etc.
 */
@media screen and (min-width: 48.0625em) {
  .menu--navigation {
    margin-left: auto;
    margin-right: auto;
  }
}

/**
 * Override size and height of navigation menu.
 */
div.menu--hamburger {
  /* Remove top padding from the first link in a submenu. */
}

div.menu--hamburger .more.menu-item > .submenu > .menu-item:first-child .menu-link {
  padding-top: 0;
}

@media screen and (min-width: 48.0625em) {
  div.menu--hamburger {
    min-height: auto;
    /* Adjust position of triangle sign shown after a parent menu item. */
  }
  div.menu--hamburger .menu--navigation {
    min-height: 2.5rem;
    padding-top: .6rem;
    /* @see #header.small */
    transition: font-size 1s;
  }
  div.menu--hamburger .menu--navigation > .menu > .menu-item {
    line-height: normal;
  }
  div.menu--hamburger .menu .menu-item {
    padding: 0 1%;
  }
  div.menu--hamburger .menu .menu-item .menu-link {
    padding-right: 0;
  }
}

@media screen and (min-width: 48.0625em) and (min-width: 769px) and (max-width: 800px) {
  div.menu--hamburger .menu .menu-item .menu-link {
    font-size: 15px;
  }
}

@media screen and (min-width: 48.0625em) {
  div.menu--hamburger .submenu {
    left: 0;
    top: 1.25em;
    /* Default width of 100% is not enough as submenu items could be longer
         than the top level menu items. */
    /* Remove bottom padding from the last link in a submenu. */
  }
}

@media screen and (min-width: 48.0625em) and (min-width: 48.0625em) {
  div.menu--hamburger .submenu {
    width: auto;
  }
}

@media screen and (min-width: 48.0625em) {
  div.menu--hamburger .submenu > .menu-item:last-child > .menu-link {
    padding-bottom: 0;
  }
  div.menu--hamburger .submenu .menu-item .menu-link {
    /* Again, default width is not enough. */
  }
}

@media screen and (min-width: 48.0625em) and (min-width: 48.0625em) {
  div.menu--hamburger .submenu .menu-item .menu-link {
    width: 14em;
    margin-right: auto;
  }
}

@media screen and (min-width: 48.0625em) {
  div.menu--hamburger .more.menu-item > .menu-link:after {
    right: -1rem;
    top: -16%;
  }
}

/**
 * Login/Logout menu.
 */
.menu--account {
  display: none;
  height: 3rem;
  /* A "man" icon should appear before the username of a logged in user. */
}

@media screen and (min-width: 48.0625em) {
  .menu--account {
    display: block;
    position: absolute;
    top: 0;
  }
}

.menu--account > .menu {
  width: 100%;
  margin: auto;
  padding-top: 0.5rem;
  padding-left: 0.4rem;
}

@media screen and (min-width: 48.0625em) {
  .menu--account > .menu {
    width: auto;
    margin-top: 0.25rem;
  }
}

.menu--account .menu-item {
  display: inline-block;
  width: 45%;
}

@media screen and (min-width: 48.0625em) {
  .menu--account .menu-item {
    width: auto;
    margin-right: .25rem;
  }
}

.menu--account a {
  padding: .3rem .5rem;
}

.menu--account .menu-link.user__name:before {
  content: "";
  font-family: fontAwesome;
  font-size: 1rem;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  padding-right: 1.25rem;
}

/**
 * In larger displays, Login/Register links appear as pseudo-buttons
 * for anonymous users.
 */
@media screen and (min-width: 48.0625em) {
  .role--anonymous .menu--account .menu-item {
    border: solid 1px #5b5b5b;
    border-radius: 5px;
  }
}

/**
 * In smaller displays, Username and Logout links appear closer to the left
 * and right edges respectively.
 */
@media screen and (min-width: 48.0625em) {
  .role--authenticated .menu--account > .menu {
    width: auto;
  }
}

.role--authenticated .menu--account .menu-item {
  width: auto;
  float: right;
  /* Username */
}

.role--authenticated .menu--account .menu-item:first-child {
  float: left;
}

@media screen and (min-width: 48.0625em) {
  .role--authenticated .menu--account .menu-item:first-child {
    width: auto;
    padding-left: .25rem;
  }
}

/**
 * Display the Login/Logout menu when the main menu is shown.
 */
.menu--hamburger.is-open + .menu--account {
  display: block;
}

/* Empty h1 is causing trouble in mobile display. */
.block-classic-page-title h1:empty {
  display: none;
}

/**
 * @file
 * CSC site-specific footer layout rules.
 *
 * External variables used:
 *  $base-font-size
 *  $wide-footer-menu-height
 *  $wide-screen-mode
 */
footer {
  padding-bottom: 4rem;
  /* Hide the main menu in smaller displays. */
}

@media screen and (min-width: 48.0625em) {
  footer .block-buy-magazine {
    float: left;
    display: block;
    margin-right: 2.12766%;
    width: 31.91489%;
    margin-left: 68.08511%;
    min-height: 336px;
    text-align: inherit;
  }
  footer .block-buy-magazine:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 48.0625em) {
  footer .block-buy-magazine .magazine-print {
    margin-left: 0%;
  }
}

footer .block-social-media {
  padding: 1rem 0;
  text-align: center;
  /* Override icon size.  Hide text and only display the icons. */
}

footer .block-social-media .social-media-sharing li {
  width: 3rem;
}

footer .block-social-media .share {
  text-indent: 20%;
  white-space: nowrap;
}

footer .block-social-media .share.facebook-share {
  text-indent: 42%;
}

footer .menu--footer {
  text-align: center;
  padding: 0 0.5rem 1.5rem;
}

footer .menu--footer > h2 {
  display: none;
}

footer .menu--footer .menu-item {
  display: inline-block;
}

@media screen and (min-width: 48.0625em) {
  footer .menu--footer .menu-item {
    display: inherit;
  }
}

footer .menu--footer .menu-item::after {
  content: "|";
}

@media screen and (min-width: 48.0625em) {
  footer .menu--footer .menu-item::after {
    content: none;
  }
}

footer .menu--footer .menu-item:last-child::after {
  content: none;
}

footer .menu--main {
  display: none;
}

@media screen and (min-width: 48.0625em) {
  footer .menu--main {
    margin-left: 34.04255%;
  }
}

@media screen and (min-width: 48.0625em) {
  footer .menu--follow-us {
    /* Do not overlap with other blocks. */
    clear: both;
    padding-top: 0;
  }
}

footer .menu--account {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal;
}

@media screen and (min-width: 48.0625em) {
  footer .menu--account {
    position: inherit;
    clip: auto;
    overflow: inherit;
    height: auto;
    width: auto;
    word-wrap: inherit;
    /* Position it at the middle of the empty space under the
       * "Terms of use menu" block. */
    position: absolute;
    top: 240px;
  }
}

@media screen and (min-width: 48.0625em) {
  footer .menu--account .menu .menu-item {
    border: solid 1px #adadad;
    border-radius: 5px;
  }
  footer .menu--account .menu .menu-item a {
    display: inline-block;
    padding: 0.4rem;
  }
}

footer .link--subscribe-now::after {
  content: "\f105";
  font-family: fontAwesome;
  padding-left: .5rem;
  display: inline-block;
}

footer .copyright-notice--haymarket::before {
  margin-bottom: 0.25rem;
}

/**
 * Footer container side padding.
 *
 * This needs to override ".front_page .container".  Hence is the use of the id
 * selector.
 */
#footer > .container {
  /* Override theme-wide container side padding. */
  padding-left: 0;
  padding-right: 0;
  /* But we need that padding in larger displays. */
}

@media screen and (min-width: 48.0625em) {
  #footer > .container {
    padding-left: 10px;
    padding-right: 10px;
    max-width: 60em;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }
  #footer > .container::after {
    clear: both;
    content: "";
    display: block;
  }
}

/**
 * Partial for menus placed in the footer area.
 *
 * Only deals with wide screen.
 */
@media screen and (min-width: 48.0625em) {
  footer .menu--footer, footer .menu--main {
    float: left;
    display: block;
    margin-right: 2.12766%;
    width: 31.91489%;
    min-height: 336px;
    padding-left: 0;
    padding-right: 0;
    position: absolute;
    top: 0;
    text-align: inherit;
  }
  footer .menu--footer:last-child, footer .menu--main:last-child {
    margin-right: 0;
  }
  footer .menu--footer h2, footer .menu--main h2 {
    display: inherit;
    margin-top: 1rem;
    margin-bottom: .5rem;
  }
}

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