:root {
   --light: #FFFFF0;
   --dark: #020202;
}

/** 1. Block Elements */

/* 1.1. Flexible Grid */

@supports not (display:grid) {
   * {
       box-sizing: border-box;
   }

   .row::after {
      content: "";
      clear: both;
      display: block;
   }

   [class*="col-"] {
      float: left;
      padding-right: 15px;
      padding-left: 15px;
      width: 100%;
      background-color: transparent;
   }

   @media only screen and (min-width: 768px) {
      .col-m-1 {width: 8.33%;}
      .col-m-2 {width: 16.66%;}
      .col-m-3 {width: 25%;}
      .col-m-4 {width: 33.33%;}
      .col-m-5 {width: 41.66%;}
      .col-m-6 {width: 50%;}
      .col-m-7 {width: 58.33%;}
      .col-m-8 {width: 66.66%;}
      .col-m-9 {width: 75%;}
      .col-m-10 {width: 83.33%;}
      .col-m-11 {width: 91.66%;}
      .col-m-12 {width: 100%;}
   }

   @media only screen and (min-width: 1024px) {
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
   }

   @media only screen and (min-width: 1444px) {
      .col-w-1 {width: 8.33%;}
      .col-w-2 {width: 16.66%;}
      .col-w-3 {width: 25%;}
      .col-w-4 {width: 33.33%;}
      .col-w-5 {width: 41.66%;}
      .col-w-6 {width: 50%;}
      .col-w-7 {width: 58.33%;}
      .col-w-8 {width: 66.66%;}
      .col-w-9 {width: 75%;}
      .col-w-10 {width: 83.33%;}
      .col-w-11 {width: 91.66%;}
      .col-w-12 {width: 100%;}
   }
}

@supports(display: grid) {
   body, header, nav, main, article, section, aside, footer, div {
      display: grid;
   }
   
   div#wpadminbar, div#wpadminbar div, div.nav-links {
      display: block;
   }
   
   #site-wrapper {
      grid-gap: 10px;
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr 2.5%;
      justify-items: center;
      align-items: center;
      min-height: 100vh;
      grid-template-areas:
	 "header"
	 "page-container"
	 "footer";
   }
   @media only screen and (min-width: 1024px) {
      #site-wrapper {
	 grid-template-columns: 2.5% 1fr 2.5%;
	 grid-template-rows: auto 1fr 2.5%;
	 min-height: calc(100vh - 4em);
	 grid-template-areas:
	    "header header header"
	    ". page-container ."
	    "footer footer footer";
	border: 2px solid black;
	margin: 2em;
      }
   }

   #site-header {
      grid-area: header;
      grid-gap: 0px;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      grid-template-areas:
	 "header-nav";
   }
   
   #site-header > nav {
      grid-area: header-nav;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 0.7fr auto;
      grid-template-areas:
	 "header-top header-top header-top"
	 "header-middle header-middle header-middle"
	 "header-left header-center header-right";
   }
   
   #site-header > nav > div {
      padding: 5px;
   }
   #site-header > nav > div:nth-child(1) {
      grid-area: header-top;
   }
   #site-header > nav > div:nth-child(2) {
      grid-area: header-middle;
   }
   #site-header > nav > div:nth-child(3) {
      grid-area: header-left;
   }
   #site-header > nav > div:nth-child(4) {
      grid-area: header-center;
   }
   #site-header > nav > div:nth-child(5) {
      grid-area: header-right;
   }

   body > main {
      grid-area: page-container;
   }
   
   #centred-page {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      justify-items: center;
      align-items: center;
   }
   
   #list-page {
      grid-gap: 10px;
      grid-template-columns: 1fr;
      grid-template-rows: 150px auto 60px;
      justify-items: center;
      align-items: center;
      grid-template-areas:
	 "list-page-header"
	 "list-page-grid"
	 "list-page-footer";
   }
   #list-page > header {
      grid-area: list-page-header;
      text-align: center;
   }
   
   #list-page > header .nav-links {
      margin-top: 5px;
   }
   
   #list-page > header h2 {
      margin-top: 12px;
   }
   
   #list-page > section#grid {
      grid-gap: 10px;
      grid-area: list-page-grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(8, 1fr);
      justify-items: stretch;
      align-items: stretch;
      grid-template-areas:
         "li1"
         "li2"
         "li3"
         "li4"
         "li5"
         "li6"
         "li7"
         "li8";
   }
   @media only screen and (min-width: 620px) {
      #list-page > section#grid {
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: repeat(4, 1fr);
         grid-template-areas:
            "li1 li2"
            "li3 li4"
            "li5 li6"
            "li7 li8";
      }
   }
   @media only screen and (min-width: 1024px) {
      #list-page > section#grid {
         grid-gap: 6px 5px;
         grid-template-columns: repeat(4, 1fr);
         grid-template-rows: repeat(2, 1fr);
         grid-template-areas:
            "li1 li2 li3 li4"
            "li5 li6 li7 li8";
      }
   }
   
   article.tile {
      min-height: 180px;
      grid-template-columns: 5% auto 5%;
      grid-template-rows: 2.5% auto 2.5%;
      grid-template-areas:
	 ".       .      ."
	 ". tile-details ."
	 ".       .      .";
   }
   #list-page > section#grid article.tile:nth-child(1) { grid-area: li1; } 
   #list-page > section#grid article.tile:nth-child(2) { grid-area: li2; } 
   #list-page > section#grid article.tile:nth-child(3) { grid-area: li3; } 
   #list-page > section#grid article.tile:nth-child(4) { grid-area: li4; } 
   #list-page > section#grid article.tile:nth-child(5) { grid-area: li5; } 
   #list-page > section#grid article.tile:nth-child(6) { grid-area: li6; } 
   #list-page > section#grid article.tile:nth-child(7) { grid-area: li7; } 
   #list-page > section#grid article.tile:nth-child(8) { grid-area: li8; } 
   
   article.tile > header {
      grid-area: tile-details;
      grid-template-columns: 5px auto 5px;
      grid-template-rows: auto auto;
      grid-template-areas:
	 ".  tile-title ."
	 ". tile-subtitle .";
   }
   article.tile > header > h1 {
      grid-area: tile-title;
      align-self: end;
   }
   article.tile > header > h2 {
      grid-area: tile-subtitle;
      align-self: start;
   }
   #list-page > footer {
      grid-area: list-page-footer;
   }
   
   #split-page,
   #split-page > #wrapper {
      width: 100vw;
   }
   @media only screen and (min-width: 1024px) {
      #split-page,
      #split-page > #wrapper {
	 width: 100%;
      }
   }
   
   #split-page {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      justify-items: center;
      align-items: center;
      grid-template-areas:
	 "post"
	 "comments";
   }
   
   #split-page > #wrapper {
      grid-area: post;
      grid-template-columns: 1fr;
      grid-template-rows: 70vh auto;
      justify-items: center;
      align-items: center;
      grid-template-areas:
	 "post-content-header"
	 "post-content";
   }
   @media only screen and (min-width: 1024px) {
      #split-page > #wrapper {
	 grid-template-columns: 1fr 1fr;
	 grid-template-rows: 70vh auto;
	 justify-items: center;
	 align-items: center;
	 grid-template-areas:
	    "post-content-header post-content"
	    "         .          post-content";
      }
   }
   
   #split-page > #wrapper > header {
      grid-area: post-content-header;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      min-height: 80vh;
      height: 100%;
      margin-bottom: 4em;
      width: 100vw;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      grid-template-areas:
	 "post-header-details";
   }
   @media only screen and (min-width: 1024px) {
      #split-page > #wrapper > header {
	 grid-area: post-content-header;
	 min-height: 180px;
	 height: 100%;
	 width: 100%;
	 grid-template-columns: 15% 1fr 15%;
	 grid-template-rows: 20% 1fr 20%;
	 grid-template-areas:
	    ".           .         ."
	    ". post-header-details ."
	    ".           .         .";
      }
   }
   #split-page > #wrapper > header > div {
      grid-area: post-header-details;
      grid-template-columns: 1fr;
      padding: 20px;
      grid-template-rows: 1fr auto auto 1fr auto 1fr;
      justify-items: center;
      align-items: center;
      grid-template-areas:
	 "."
	 "post-title"
	 "post-subtitle"
	 "."
	 "post-date"
	 ".";
   }
   #split-page > #wrapper > header > div > h1 {
      grid-area: post-title;
   }
   #split-page > #wrapper > header > div > h2 {
      grid-area: post-subtitle;
   }
   #split-page > #wrapper > header > div > h3 {
      grid-area: post-date;
   }
   
   #split-page > #wrapper > .body {
      grid-area: post-content;
      display: block;
   }
   
   #split-page > #wrapper > #organisation-body {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto auto auto auto auto auto auto auto;
      grid-template-areas:
	 "description"
	 "timeline"
	 "related"
	 "posts"
	 "websites"
	 "programs"
	 "writings"
	 "videos"
	 "others"
	 "quals-and-awards";
   }
   
   #organisation-body > #description {
      grid-area: description;
   }
   #organisation-body > #timeline {
      grid-area: timeline;
   }
   #organisation-body > #related {
      grid-area: related;
   }
   #organisation-body > #quals-and-awards {
      grid-ares: quals-and-awards;
   }
   #organisation-body > #related,
   #organisation-body > #quals-and-awards {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      text-align: left;
      grid-template-areas:
	 "left right";
   }
   #organisation-body > #related > #children {
      grid-area: left;
   }
   #organisation-body > #related > #parents {
      grid-area: right;
   }
   #organisation-body > #post {
      grid-area: posts;
   }
   #organisation-body > #website {
      grid-area: websites;
   }
   #organisation-body > #program {
      grid-area: programs;
   }
   #organisation-body > #writing {
      grid-area: writings;
   }
   #organisation-body > #video {
      grid-area: videos;
   }
   #organisation-body > #other {
      grid-area: others;
   }
   #organisation-body > #qualifcations {
      grid-area: left;
   }
   #organisation-body > #awards {
      grid-area: right;
   }
   #organisation-body > .org-items {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      grid-template-areas:
	 "title"
	 "items";
   }
   #organisation-body > .org-items h2.subheading {
      grid-area: title;
   }
   #organisation-body > .org-items .index {
      grid-gap: 6px 5px;
      grid-area: items;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(1, 1fr);
      justify-items: stretch;
      align-items: stretch;
      grid-template-areas:
	 "item1 item2";
   }
   #organisation-body > .org-items .index .item:nth-child(1) {
      grid-area: item1;
   }
   #organisation-body > .org-items .index .item:nth-child(2) {
      grid-area: item2;
   }
   
   #split-page > #comments {
      grid-area: comments;
      width: 100%;
   }
   
   #split-page > #comments > .row {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      grid-template-areas:
	 "comment-entry"
	 "comments";
   }
   @media only screen and (min-width: 1024px) {
      #split-page > #comments > .row {
	 grid-template-columns: 1fr 1fr;
	 grid-template-rows: 1fr;
	 grid-template-areas:
	    "comments comment-entry";
      }
   }
   #split-page > #comments #comments-list {
      grid-area: comments;
      justify-items: center;
      align-items: start;
   }
   #split-page > #comments #comments-reply {
      grid-area: comment-entry;
      justify-items: center;
      align-items: start;
      text-align: center;
   }
   
   #related-organisations {
   
   }
   
   body > footer {
      grid-area: footer;
   }
}

/* 1.2. Appearance */

@supports (color: var(--yin)) {
   body {
      color: var(--dark);
   }
   
   body,
   body > header {
      background-color: var(--light);
   }
   
   article.tile > header {
      background-color: var(--dark);
      opacity: 0.8;
   }
}

body:not(.page-template-centred-page) > main {
   margin-top: 80px;
}

body > header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   text-align: center;
   border-bottom: 2px solid var(--dark);
   z-index: 1;
}

body > header > h1 {
   padding: 20px 50%;
}

body > header > nav > a {
   padding: 20px 50%;
}

article.tile {
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}

article.tile > header {
   text-align: center;
}

article #details {
   width: 85%;
   margin: auto;
   display: block;
   background-color: #DDDDD0;
   border: 1px solid gray;
   padding-right: 1em;
   margin-bottom: 1.6em;
}

.sharedaddy, .jp-relatedposts {
   text-align: center;
}
.jp-relatedposts-items {
   display: block;
}

#split-page >

/** 2.Inline Elements */

/* 1.1. Appearance */

body { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; }

h1, h2, h3, h4, h5, h6 {
   margin: 0;
}

a:hover {
   opacity: 1;
}

ul {
   list-style: circle;
   color: var(--dark);
   padding-left: 1.8em;
}

ol {
   list-style: decimal;
   color: var(--dark);
   padding-left: 1.8em;
}

strong { font-weight: bold; }

sup, sup { 
   font-size:xx-small; 
   line-height: 1.2em; 
} 
sup { vertical-align:top; } 
sub { vertical-align:bottom; }

pre { 
   border: none !important; 
   border-left: 2px outset var(--dark) !important;
}

.latex {
   display: inline !important;
}

blockquote,
pre {
   padding-left: 1em;
   border-left: 2px outset var(--dark);
   display: inline-block;
   width: 85%;
}
pre {
   overflow: hidden;
}
@media only screen and (min-width: 1024px) {
   blockquote,
   pre {
      margin: 1em 2em 1em 2em;
   }
}
blockquote footer {
   text-align: right;
   margin-right: 10%;
   font-style: normal;
   display: block;
   float: right;
}
blockquote footer:before {
   content: '—';
}
q, blockquote {
   quotes: "‘" "’" "“" "”" ;
}
q.guillemets {
   quotes: "«" "»" "«" "»";
}
q:before, blockquote p:first-of-type::before {
   content: open-quote;
}
q:after, blockquote p:last-of-type::after {
   content: close-quote;
}

cite:not(.smallcite), i, em { font-style: italic; }
cite.smallcite:before { content: '“'; }
cite.smallcite:after { content: '”'; }

code, 
samp, 
var,
pre {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 0.8em;
}

pre .nocode {
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
   font-size: 1em;
   padding: 1px 3px;
   border-radius: 6px;
   border: dashed 1px black;
}
:not(.post-title):not(pre) code,
:not(.post-title):not(pre) samp,
:not(.post-title):not(pre) var {
    background-color: #d1d1d1;
    border-radius: 5px;
    padding: 2px 2px;
}
.heading code,
.subheading code {
    background-color: transparent;
}

li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
  list-style-type: decimal !important;
}
samp {
    display: block;
    width: 80ch;
    margin: 1em 4em 1em 4em;
    border-left: 2px solid #ccc;
    color: #333;
}
kbd {
   padding: 0.1em 0.6em;
   border: 1px solid #ccc;
   font-size: 11px;
   font-family: Arial, Helvetica, sans-serif;
   background-color: #f7f7f7;
   color: #333; 
   box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px white inset;
   border-radius: 3px;
   display: inline-block;
   margin: 0 0.1em;
   text-shadow: 0 1px 0 white;
   line-height: 1.4;
   white-space: nowrap;
}

.post-nominals {
   font-size: 0.6em;
}

#comments-list-title {

}

@supports (color: var(--light)) {
   h1, h2, h3, h4, h5, h6 {
      color: var(--dark);
   }
   
   a { color: var(--dark); }
   
   ul { color: var(--dark); }
   
   .nav-links>.page-numbers {
      background-color: var(--dark);
      color: var(--light);
   }
   .nav-links>.current {
      background-color: var(--light);
      color: var(--dark);
   }
   
   article.tile > header > h1,
   article.tile > header > h2 {
      color: var(--light);
   }
   
   main#split-page > #wrapper > header > div {
      background-color: var(--dark);
   }
   main#split-page > #wrapper > header > div > h1,
   main#split-page > #wrapper > header > div > h2,
   main#split-page > #wrapper > header > div > h3 {
      color: var(--light);
   }
}

h1 {
   font-size: 5em;
}

body > header h1 {
   font-size: 1.4em;
}
@media only screen and (min-width: 1024px) {
   body > header h1 {
      font-size: 2em;
   }
}

#split-page > #wrapper > header {
   text-align: center;
}
#split-page > #wrapper > header > div {
   opacity: 0.8;
}

#split-page > #wrapper > header > div > h1 {
   font-weight: bold;
   margin-top: 20%;
   font-size: 2.5em;
}
#split-page > #wrapper > header > div > h2 {
   margin-top: 10px;
   font-size: 1.6em;
}
#split-page > #wrapper > header > div > h3 {
   margin-top: 20%;
   font-size: 1em;
}
@media only screen and (min-width: 1024px) {
   #split-page > #wrapper > header > div > h1 {
      font-size: 3.5em;
   }
   #split-page > #wrapper > header > div > h2 {
      font-size: 2.6em;
   }
}

#comments-list-title, #comments-reply-title {
   font-size: 1.6em;
}

main#split-page > #wrapper > .body {
   text-align: justify;
   padding: 0 2em 2em 2em;
}
main#split-page > #wrapper > .body blockquote:first-of-type {
   font-size: 1.2em;
   text-align: center;
   margin: 0;
   border-left: 0;
   padding-left: 0;
   width: 100%;
   padding-top: 1em;
   padding-bottom: 1.2em;
   border-top: 2px outset var(--dark);
   border-bottom: 2px inset var(--dark);
}
main#split-page > #wrapper > .body p,
main#split-page > #wrapper > .body ul li,
main#split-page > #wrapper > .body ol li {
   font-size: 1em;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   line-height: 1.2em;
}
main#split-page > #wrapper > .body h2.subheading {
   font-size: 1.6em;
   border-bottom: 2px inset var(--dark);
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   line-height: 1.2em;
   text-align: center;
}
main#split-page > #wrapper > #organisation-body h2.subheading a {
   font-size: 0.5em;
}

article.tile > header > h1 {
   font-size: 1.4em;
}
article.tile > header > h2 {
   font-size: 0.8em;
}

a {
   opacity: 0.8;
   text-decoration: underline;
}
a:hover, a:focus {
   opacity: 1;
   text-decoration: none;
}

.nav-links>.next,
.nav-links>.prev {
   display: none;
}
.nav-links>.page-numbers {
   text-align: center;
   border-radius: 0.8em;
   width: 1.6em;
   display: inline-block;
   line-height: 1.6em;
   text-decoration: none;
   font-weight: normal;
   margin-left: 0.5em;
   margin-right: 0.5em;
}

/* TEMP */


#experience-wrapper {
   grid-area: page-container;
}
.company-info-container {
	background-color: #ffffff;
	max-width: 60px;
	overflow: hidden;
	border-bottom: 1px solid #000000;
}

.company-info-container.left {
	border-radius: 0px 0px 15px 0px;
	float: left;
	border-right: 1px solid #000000;
}

.company-info-container.right {
	border-radius: 0px 0px 0px 15px;
	float: right;
	border-left: 1px solid #000000;
}

#timeline {
   display: block;
   margin: auto;
   min-height: 200px;
}

.loading {
   margin: auto;
   display: block;
   margin-top: 84px;
   height: auto;
}

#companies-grid-small {
   height: 0;
}

#companies-grid:hover li:hover,
#companies-grid-small:hover li:hover {
   opacity: 1;
}

#companies-grid li,
#companies-grid-small li {
   display: block;
   float: left;
   width: 18%;
   height: 10vh;
   overflow: hidden;
   background-color: #ffffff;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   background-origin: content-box;
   background-clip:content-box;
   padding: 7.5px;
}

#companies-grid li {
   min-height: 25vh;
}

#companies-grid-small li {
   min-height: 140px;
}

.company-name {
   font-size: 1.5em;
   margin-top: 25%;
}

.company-info-container.right .company-info {
	padding-left: 4px;
	font-size: 1em;
	line-height: 1.3em;
	color: #000000;
	opacity: 0.8;
	padding: 2px;
	width: auto;
}

.children {
   background-size: cover;
}


.taxonomy-background {
	height: 100%;
	width: 100%;
	object-fit: contain;
	padding: 10vh 20vw;
}

#split-page > #wrapper > .body {
  grid-area: post-content;
  display: block;
}

#split-page > #wrapper > .body > figure {
    max-width: none !important;
    width: 100%;
    text-align: center;
}

#split-page > #wrapper > .body > figure > figcaption {
    font-size: 0.8em;
    font-style: italic;
}

#split-page > #wrapper > .body img,
#split-page > #wrapper > .body > figure img {
    max-height: 40vh;
    width: auto;
    max-width: 100%;
}

#split-page > #wrapper > .body img {
    margin: auto;
    display: block;
}

.latex {
   vertical-align: middle;
}