/* Medium devices (tablets, 768px and up) */
  @media (min-width:576px) {
    :root {
      --site-margin: 30px;
      --circle-size-tiny: 4vw;
      --circle-size-small: 10vw;
      --circle-size-medium: 20vh;
      --head-text-size:1.5rem;
      --dot-size: 8px;
    }

    body:not(.level-0) #main-nav a:not(.active) {
      display: initial;
    }

    body:not(.level-0) #main-nav a::after {
      content: "";
      margin: 0;
    }

    body:not(.level-0) #main-nav a:last-child::after {
      content: "•" !important;
      margin: 0 .5rem !important;
    }

    #main-nav, #sub-nav {
      margin-bottom: var(--site-margin);
    }

    #sub-nav > * {
      margin: 0 calc( var(--site-margin) * 0.33)
    }

    #article-grid {
      padding:  calc( var(--inner-margin) + calc( var(--circle-size-tiny) * 1 ) + calc(var(--site-margin) * 1))
                var(--inner-margin);
    }

    #article-detail > article {
      padding:  calc(var(--top-margin) + var(--circle-size-tiny))
                0
                calc(var(--inner-margin) + var(--letter-size))
                0;
    }

    #article-grid article a {
      height: initial;
    }

    #lang-switch span {
      display: initial;
    }

    #main-nav, #sub-nav {
      height: initial;
      margin-bottom: initial;
    }

    .site-title {
      height: initial;
    }

    header > div {
      height: var(--letter-size);
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }

    header {
      height: calc(var(--circle-size-tiny) + var(--top-margin) + -2px );
    }

    #sub-nav {
      margin-top: calc(var(--site-margin) / 2);
    }

    #article-detail .calendar {
      display: initial;
    }

    #article-detail .calendar > article,
    #article-detail .calendar > article > * {
      font-weight: initial;
      font-size: var(--subhead-text-size);
      color: var(--grijs);
    }

    /* home */

      #home-calendar > section > a {
        display: block;
      }

      #home > section article img {
        width: var(--inner-height);
      }

      .flickity-page-dots {
        top: calc(50vh - (var(--inner-height) / 2) + 4vh);
      }

    /* calendar */

      #calendar {
        display: flex;
        justify-content: center;
      }

      #calendar table {
        display: table;
        width: 100%;
        max-width: var(--inner-width);
      }

      /* calendar reset for non-phone displays */
        #calendar thead { display: table-header-group; }
        #calendar tbody { display: table-row-group; }
        #calendar tr { display: table-row; }
        #calendar td:last-child { padding-bottom: initial; }
        #calendar tr { margin-bottom: initial; }
        #calendar td:nth-child(1) { max-width: calc( ( var(--inner-width) * .2 ) - 1vw ); }
        #calendar td:nth-child(2) { max-width: calc( ( var(--inner-width) * .4 ) - 1vw ); }
        #calendar td:nth-child(3) { max-width: calc( ( var(--inner-width) * .15 ) - 1vw ); }
        #calendar td:nth-child(4) { max-width: calc( ( var(--inner-width) * .15 ) - 1vw ); }
        #calendar td:nth-child(5) { max-width: calc( ( var(--inner-width) * .1 ) - 1vw ); }
        #calendar td {
          display: table-cell;
          border-bottom: 1px dashed var(--grijs);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding-right: 1vw;
        }
        #calendar th {
          text-transform: uppercase;
          text-align: left;
          white-space: nowrap;
        }
  }

/* Large devices (desktops, 992px and up) */
  @media (min-width:992px) {
    :root {
      --site-margin: 30px;
      --circle-size-tiny: 2.5vw;
      --circle-size-small: 8vw;
      --circle-size-medium: 15vw;
      --dot-size: 9px;
    }

    #home-calendar article:not(:first-child) {
      display: initial;
    }

    #article-list {
      display: flex;
      justify-content: center;
    }

    #article-grid {
      grid-template-columns: auto auto auto auto;
      grid-gap: 4vw;
      grid-auto-rows: minmax(min-content, max-content);
      padding-left: 0;
      padding-right: 0
    }

    #article-detail > article {
      display: flex;
      width: 60vw
    }

    #article-detail > article > aside {
      flex: 1;
      flex-direction: column;
    }

    #article-detail > article > aside > span,
    #article-detail > article > aside > picture {
      position: absolute;
    }

    #article-detail > article > aside > picture > img {
      margin-right: initial;
    }

    #article-detail > article > aside > div {
      margin-left: initial;
      margin-top: calc(var(--normal-text-size) + var(--circle-size-medium));
    }

    #article-detail > article > section {
      flex: 2;
    }

    .grid-5,.grid-6{grid-template-columns:repeat(3,1fr)!important}

    #calendar table {
      max-width: 60vw;
      padding: calc(var(--top-margin) + (var(--circle-size-tiny) * 2)) var(--inner-margin) var(--bottom-margin) var(--inner-margin);
    }

    #calendar nav {
      top: var(--top-margin);
    }
  }

/* Extra large devices (large desktops, 1200px and up) */
  @media (min-width:1200px) {
    :root {
      --circle-size-medium: 10vw;
      --dot-size: 10px;
    }

    #article-grid {
      max-width: 60vw;
    }

    #calendar table {
      padding: calc(var(--top-margin) + (var(--circle-size-tiny))) var(--inner-margin) var(--bottom-margin) var(--inner-margin);
    }
  }