/*  Extension des media queries utilisées par Bootstrap 3. Voir https://stackoverflow.com/a/21017488 
    Utilisation de l'attribut min-width (plutôt que max-width) pour pouvoir utiliser une approche plutôt mobile first dans la définition des media queries.
*/

/* Extra Small */
@media (min-width: 0px) {
  .spaced-content {
    padding: 0.4em 1.5em 0em 1.5em;
  }
  .left-column {
    position: relative !important;
    height: auto !important;
  }
  .right-column h2 {
    margin: 0;
    margin-top: 1.3em;
    font-size: 1.5em;
  }
  .group-info h1 {
    font-size: 2.3em;
  }
  .summary-left {
    padding-bottom: 2em;
  }
}

/* Small */
@media (min-width: 768px) {
  .left-column {
    position: sticky !important;
    min-height: calc(100vh - var(--navbar-height) - var(--progress-bar-height)); /* Progress bar + Header */
    top: var(--navbar-height);
    left: 0;
    overflow-y: scroll;
    border-right: 1px solid #b7b7b7;
    border-left: 1px solid #b7b7b7;
  }
  .right-column {
    min-height: calc(100vh - var(--navbar-height) - var(--progress-bar-height));
  }
  .summary-left {
    position: sticky !important;
    left: 0;
    top: var(--navbar-height);
    bottom: var(--navigator-height);
    height: var(--view-height);
    padding-left: 30px;
  }
  .summary-right {
    padding: 45px 30px 0px 22px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    padding-bottom: calc(var(--navigator-height) * 2);
  }
  .group-content h2 {
    font-size: 1.6em;
  }
  .group-info h1 {
    font-size: 1.6em;
  }
}

/* Medium */
@media (min-width: 992px) {
  .container-fluid {
    margin-left: 0;
    margin-right: 0;
  }
  .group-info h1 {
    font-size: 1.6em;
  }
}

/* Large */
@media (min-width: 1200px) {
  .spaced-content {
    padding: 1.2em 2.5em 0em 2.5em;
  }
  .group-info h1 {
    font-size: 1.8em;
  }
}

/* Bigger than what Bootstrap 3 has */
@media only screen and (min-width: 1440px) {
  .container-fluid {
    /* Centers the container horizontally */
    margin-left: auto;
    margin-right: auto;
  }
  .group-info h1 {
    font-size: 2.6em;
  }
  .container-fluid {
    max-width: 1600px;
  }
  .right-column {
    border-right: 1px solid #b7b7b7;
  }
}