/*
 * @file
 * Provides the layout styles for layout_twocol.
 *
 * @todo Using display: flex requires https://www.drupal.org/node/2842298 to be
 * in before this can be marked as stable.
 */
/**
 * Default Variables.
 *
 * Modify this file to provide default Bootstrap Framework variables. The
 * Bootstrap Framework will not override any variables defined here because it
 * uses the `!default` flag which will only set their default if not already
 * de#143759fined here.
 *
 * You can copy existing variables directly from the following file:
 * ./THEMENAME/bootstrap/assets/stylesheets/bootstrap/_variables.scss
 */
/* Extra small devices (phones < 768px) */
/* Small devices (tablets > 768px ) */
/* Medium devices (desktops > 992px) */
/* Large devices (desktops > 1200px) */
.layout--sidebar {
  display: flex;
  justify-content: space-between; }
  .layout--sidebar > .layout__region.layout__region--first {
    width: calc(70% - 20px);
    margin-right: 20px; }
    @media only screen and (max-width: 768px) {
      .layout--sidebar > .layout__region.layout__region--first {
        width: 100%;
        padding: 0;
        border: 0;
        margin: 0; } }
  .layout--sidebar > .layout__region.layout__region--second {
    width: 30%; }
    @media only screen and (max-width: 768px) {
      .layout--sidebar > .layout__region.layout__region--second {
        width: 100%;
        padding: 0;
        border: 0;
        margin: 20px 0 0 0; } }
  @media only screen and (max-width: 768px) {
    .layout--sidebar {
      flex-direction: column; } }