.site-wrap {
  /* Critical position and size styles */
  min-height: 100%;
  min-width: 100%;
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  background-color: white;
  z-index: 0;

  margin: 0 auto 0 auto;
}

.page {
   max-width: 94%;
   padding-left: 3%;
}

.navigation {
  /* critical sizing and position styles */
  width: 200px;
  height: 100%;
  position: fixed;
  clip: rect(0, 0, 0, 0);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  list-style: none;
}

/* Navigation Menu - List items */

.nav-item {
  /* non-critical appearance styles */
  width: 200px;
  border-bottom: 2px solid #200e14; /* #CABFB0; /* #101010; */

}

.nav-item a {
  /* non-critical appearance styles */
  display: block;
  padding: 8px 1em 8px 1em;
  color: white;
  font-size: 1em;
  text-decoration: none;
  transition: color 0.2s, background 0.5s;
}

.nav-item a:hover {
  color: #d9ba3d;
}


/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 15px; top: 15px;
  z-index: 3;

  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-size: contain;
}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
  transition: left 0.2s;
}


.nav-trigger:checked + label {
  left: 250px;
}

.nav-trigger:checked ~ .navigation {
  background-color: #32293b;
  clip: auto;
}

.foot1 {
    margin-top: 36pt;
}

.foot {
    font-size: 8pt;
    color: #32293b;
    text-align: center;
    margin-bottom: 6pt;
}


body {
    /* Without this, the body has excess horizontal scroll
       when the menu is open */
  background-color: white;
  overflow-x: hidden;
  max-width: 620px;
  margin: 0 auto 0 auto;
  font-family: 'Libre Baskerville', Baskerville, Garamond, Times, Serif;
}

.container {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, 200px);
    text-align: center;
    justify-content: center;
}

.c {
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

.bigcontainer {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, 300px);
    text-align: center;
    justify-content: center;
}

.bigc {
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

.logo-box {
   width: 100%;
}

.ctr {
    text-align: center;
    margin: auto;
}

.ctrlogo {
    text-align: center;
    margin: auto;
    padding: 10px;
}

.dark {
    background-color: #32293b;
}

.c-red {
    border: 1px #c44848 solid;
}

.c-orange {
    border: 1px #da8640 solid;
}

.c-yellow {
    border: 1px #d9ba3d solid;
}

.c-green {
    border: 1px #6e7f5b solid;
}

.c-indigo {
    border: 1px #32293b solid;
}

.c-indigo:hover {
    border: 1px #c00 solid;
}

.c-violet {
    border: 1px #704f5e solid;
}

#mirologo {
    text-align: center;
}

.white {
	/* background-color: white; */
}

.grey {
	/* background-color: #DDDDDD; */
}


.papers td {
    padding: 8px;
}

.i {
    font-style: italic;
}

.yt {
    padding: 20px 0 20px 0;
}


.navigation a:link {color: white; text-decoration: none;}
.navigation a:hover {color: white; background-color: #d9ba3d;}
.navigation a:visited {color: white; text-decoration: none;}

h1, h3 {
    text-align: center;
}

.circular-image {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

.circular-image img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
}