li {
   font-size: medium;
}

figure {
   display: table;
}

figcaption {
   font-size: small;
   display: table-caption;
   caption-side: bottom;
}

img {
   max-width: 100%;
   max-height: 100%;
   vertical-align: middle;
}

.alert {
   color: #08457E;
   font-style: italic;
   /*#076678;*/
}

.title-color {
   color: #08457E;
}

h1 {
   font-size: 100%!important;
}

h2 {
   font-size: 80%!important;
   color: #08457E!important;

}

h3 {
   font-size: 70%!important;
   color: #08457E!important;
}


figcaption.col-title {
   font-size: medium;
   font-weight: bold;
   caption-side: top;
}


/* Emulate footnote placements */
.small-note{
   text-align: left;
   font-size: small;
}



/* Split the page into multiple equally sized columns */
.column-layout{
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: 1fr;
}

/*  Split the page into multiple equally sized rows */
.row-layout {
   display: grid;
   grid-auto-flow: row;
   grid-auto-rows: 1fr;
}


/* Simple grid for two col, bottom row layout */
.two-col-bottom-row-layout {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   grid-template-rows: auto;
   grid-template-areas:
      "tr-1 tr-1 tr-1 tr-2 tr-2 tr-2"
      "br-1 br-1 br-2 br-2 br-3 br-3";

}

.tc-br-col1 {
   grid-area: tr-1;

}
.tc-br-col2 {
   grid-area: tr-2;

}
.tc-br-bottom-row-1 {
   grid-area: br-1;
}

.tc-br-bottom-row-2 {
   grid-area: br-2;
}

.tc-br-bottom-row-3 {
   grid-area: br-3;
}
/* ---------- */



/* Grid layout for the rollouts */
.grid-5-col {
   display: grid;
   row-gap: 10px;
   grid-template-columns: repeat(5, 1fr);
   grid-auto-rows: minmax(100px, auto);
}

.master-grid {
   display: grid;
   grid-template-columns:  2fr 1fr 1fr;
   grid-auto-rows: minmax(200px, auto);
}

.master-grid-text {
   display: flex;
   flex-direction: row;
   align-items: center;
   grid-column: 1;
   grid-row: 1;
}

.master-grid-fig-1{
   grid-column: 2;
   grid-row: 1;
}

.master-grid-fig-2 {
   grid-column: 3;
   grid-row: 1;
}


/* Column layout for the results */
.results-grid {
   display: grid;
   row-gap: 1em;
   grid-template-columns: repeat(4, 1fr);
   grid-template-areas: 
   "fig-1 fig-1 fig-2 fig-2"
   "text text text text" 
}

.results-grid-fig-1{
   grid-area: fig-1;
}

.results-grid-fig-2 {
   grid-area: fig-2;
}

.results-grid-text {
   grid-area: text;
   display: flex;
   flex-direction: column;
   align-items: center;
}


/* Grid with 2/3 split of vertical space*/
/* Layout:
 * top-left    | top-right
 * top-left    | top-right
 * -------------------------
 * bottom-left | bottom-right
 */
.two-thirds-vert-layout {
   display: grid;
   grid-gap: 10px;
   grid-template-rows: 2fr 1fr;
   grid-template-columns: 1fr 1fr 1fr;
}

.two-thirds-vert-layout-pos-1-1 {
   grid-row: 1;
   grid-column: 1;
}


.two-thirds-vert-layout-pos-1-2 {
   grid-row: 1;
   grid-column: 2;
}


.two-thirds-vert-layout-pos-1-3 {
   grid-row: 1;
   grid-column: 3;
}


.two-thirds-vert-layout-pos-2 {
   grid-row: 2;
   grid-column: 1/4;
   display: flex;
   flex-direction: column;
   align-items: center;
}




.text-vbox {
   display: flex;
   flex-direction: row;
   align-items: center;
}

.text-box {
   display: flex;
   flex-direction: column;
   align-items: center;
}

/* layout:
 * top-left | top-right
 * ---- bottom ------
 * */
.triangle-layout {
   display: grid;
   grid-template-rows: 1fr 1fr;
   grid-template-columns: 1fr 1fr;
}

.triangle-top-left {
   grid-row: 1;
   grid-column: 1/2;
}

.triangle-top-right {
   grid-row: 1;
   grid-column: 2/3;
}

.triangle-bottom {
   grid-row: 2;
   grid-column: 1/3;
}

.text-col-two-fig-layout {
   display: grid;
   grid-template-areas:
   "text fig1"
   "text fig1"
   "text fig2";
}

.text-col-two-fig-layout-fig1 {
   grid-area: fig1;
}

.text-col-two-fig-layout-fig2 {
   grid-area: fig2;
}

.text-col-two-fig-layout-text {
   grid-area: text;
}


.main-fig-text-fig-layout {
   display: grid;
   grid-template-areas: 
   "fig1 fig1 fig1 fig1 fig1"
   "ltext ltext ltext fig2 fig2";
}

.main-fig-text-fig-layout-text {
   grid-area: ltext;
}

.main-fig-text-fig-layout-fig1 {
   grid-area: fig1;
}

.main-fig-text-fig-layout-fig2 {
   grid-area: fig2;
}

.two-col-bottom-fig-layout {
   display: grid;
   grid-template-areas:
   "textl fig1"
   "fig2 fig2";
}
.two-col-bottom-fig-layout-text {
   grid-area: textl;
}

.two-col-bottom-fig-layout-fig1 {
   grid-area: fig1
}

.two-col-bottom-fig-layout-fig2 {
   grid-area: fig2
}

.split-col-one-col-layout {
   display: grid;
   grid-template-areas:
   "textl fig1"
   "fig2 fig1"
}

.split-col-one-col-layout-text{
   grid-area: textl;
}

.split-col-one-col-layout-fig1{
   grid-area: fig1;
}

.split-col-one-col-layout-fig2{
   grid-area: fig2;
}


/* Split horizontal space into two thirds and rest
 * left | right right
 */
.two-one-hsplit {
   display: grid;
   grid-template-columns: 1fr 2fr;
}

.two-one-hsplit-col-1 {
   display: flex;
   justify-content: center;
   flex-direction: column;
}

.four-six-hsplit {
   display: grid;
   grid-template-columns: 4fr 6fr;
}


/* <-- Slide specific styles --> */
#rollouts figcaption {
   caption-side: top;
}

#problem-setting-and-assumptions div {
   grid-gap: 10px;
}

#experiment-setup img {
   width: 300px;
}

/* Add gap between columns in last-slide */
#summary-and-future-directions div {
   grid-gap: 20px;
}

#references p {
  font-size: small; 
}