/* Universal */

:root { 
    /* Base Colors */
        /* primary */
            /* color */
    --color-1--9: hsla(208, 57%, 5%, 1);
    --color-1--8: hsla(208, 57%, 10%, 1);
    --color-1--7: hsla(208, 57%, 15%, 1);
    --color-1--6: hsla(208, 57%, 20%, 1);
    --color-1--5: hsla(208, 57%, 25%, 1);
    --color-1--4: hsla(208, 57%, 30%, 1);
    --color-1--3: hsla(208, 57%, 35%, 1);
    --color-1--2: hsla(208, 57%, 40%, 1);
    --color-1--1: hsla(208, 57%, 45%, 1);
    --color-1-0: hsla(208, 57%, 50%, 1);
    --color-1-1: hsla(208, 57%, 55%, 1);
    --color-1-2: hsla(208, 57%, 60%, 1);
    --color-1-3: hsla(208, 57%, 65%, 1);
    --color-1-4: hsla(208, 57%, 70%, 1);
    --color-1-5: hsla(208, 57%, 75%, 1);
    --color-1-6: hsla(208, 57%, 80%, 1);
    --color-1-7: hsla(208, 57%, 85%, 1);
    --color-1-8: hsla(208, 57%, 90%, 1);
    --color-1-9: hsla(208, 57%, 95%, 1);
    --color-1-99: hsla(208, 57%, 99%, 1);
    
            /* contrast */
    --contrast-1--9: hsla(51, 100%, 5%, 1);
    --contrast-1--8: hsla(51, 100%, 10%, 1);
    --contrast-1--7: hsla(51, 100%, 15%, 1);
    --contrast-1--6: hsla(51, 100%, 20%, 1);
    --contrast-1--5: hsla(51, 100%, 25%, 1);
    --contrast-1--4: hsla(51, 100%, 30%, 1);
    --contrast-1--3: hsla(51, 100%, 35%, 1);
    --contrast-1--2: hsla(51, 100%, 40%, 1);
    --contrast-1--1: hsla(51, 100%, 45%, 1);
    --contrast-1-0: hsla(51, 100%, 50%, 1);
    --contrast-1-1: hsla(51, 100%, 55%, 1);
    --contrast-1-2: hsla(51, 100%, 60%, 1);
    --contrast-1-3: hsla(51, 100%, 65%, 1);
    --contrast-1-4: hsla(51, 100%, 70%, 1);
    --contrast-1-5: hsla(51, 100%, 75%, 1);
    --contrast-1-6: hsla(51, 100%, 80%, 1);
    --contrast-1-7: hsla(51, 100%, 85%, 1);
    --contrast-1-8: hsla(51, 100%, 90%, 1);
    --contrast-1-9: hsla(51, 100%, 95%, 1);
    --contrast-1-99: hsla(51, 100%, 99%, 1);      
    
        /* secondary */
            /* color */
    --color-2--9: hsla(188, 68%, 5%, 1);
    --color-2--8: hsla(188, 68%, 10%, 1);
    --color-2--7: hsla(188, 68%, 15%, 1);
    --color-2--6: hsla(188, 68%, 20%, 1);
    --color-2--5: hsla(188, 68%, 25%, 1);
    --color-2--4: hsla(188, 68%, 30%, 1);
    --color-2--3: hsla(188, 68%, 35%, 1);
    --color-2--2: hsla(188, 68%, 40%, 1);
    --color-2--1: hsla(188, 68%, 45%, 1);
    --color-2-0: hsla(188, 68%, 50%, 1);
    --color-2-1: hsla(188, 68%, 55%, 1);
    --color-2-2: hsla(188, 68%, 60%, 1);
    --color-2-3: hsla(188, 68%, 65%, 1);
    --color-2-4: hsla(188, 68%, 70%, 1);
    --color-2-5: hsla(188, 68%, 75%, 1);
    --color-2-6: hsla(188, 68%, 80%, 1);
    --color-2-7: hsla(188, 68%, 85%, 1);
    --color-2-8: hsla(188, 68%, 90%, 1);
    --color-2-9: hsla(188, 68%, 95%, 1);
    --color-2-99: hsla(188, 68%, 99%, 1);
            /* contrast */
    --contrast-2--9: hsla(19, 100%, 5%, 1);
    --contrast-2--8: hsla(19, 100%, 10%, 1);
    --contrast-2--7: hsla(19, 100%, 15%, 1);
    --contrast-2--6: hsla(19, 100%, 20%, 1);
    --contrast-2--5: hsla(19, 100%, 25%, 1);
    --contrast-2--4: hsla(19, 100%, 30%, 1);
    --contrast-2--3: hsla(19, 100%, 35%, 1);
    --contrast-2--2: hsla(19, 100%, 40%, 1);
    --contrast-2--1: hsla(19, 100%, 45%, 1);
    --contrast-2-0: hsla(19, 100%, 50%, 1);
    --contrast-2-1: hsla(19, 100%, 55%, 1);
    --contrast-2-2: hsla(19, 100%, 60%, 1);
    --contrast-2-3: hsla(19, 100%, 65%, 1);
    --contrast-2-4: hsla(19, 100%, 70%, 1);
    --contrast-2-5: hsla(19, 100%, 75%, 1);
    --contrast-2-6: hsla(19, 100%, 80%, 1);
    --contrast-2-7: hsla(19, 100%, 85%, 1);
    --contrast-2-8: hsla(19, 100%, 90%, 1);
    --contrast-2-9: hsla(19, 100%, 95%, 1);
    --contrast-2-99: hsla(19, 100%, 99%, 1);
        
        /* tertiary */
            /* color */
    --color-3--9: hsla(180, 62%, 5%, 1);
    --color-3--8: hsla(180, 62%, 10%, 1);
    --color-3--7: hsla(180, 62%, 15%, 1);
    --color-3--6: hsla(180, 62%, 20%, 1);
    --color-3--5: hsla(180, 62%, 25%, 1);
    --color-3--4: hsla(180, 62%, 30%, 1);
    --color-3--3: hsla(180, 62%, 35%, 1);
    --color-3--2: hsla(180, 62%, 40%, 1);
    --color-3--1: hsla(180, 62%, 45%, 1);
    --color-3-0: hsla(180, 62%, 50%, 1);
    --color-3-1: hsla(180, 62%, 55%, 1);
    --color-3-2: hsla(180, 62%, 60%, 1);
    --color-3-3: hsla(180, 62%, 65%, 1);
    --color-3-4: hsla(180, 62%, 70%, 1);
    --color-3-5: hsla(180, 62%, 75%, 1);
    --color-3-6: hsla(180, 62%, 80%, 1);
    --color-3-7: hsla(180, 62%, 85%, 1);
    --color-3-8: hsla(180, 62%, 90%, 1);
    --color-3-9: hsla(180, 62%, 95%, 1);
    --color-3-99: hsla(180, 62%, 99%, 1);

    /* Font */
    --default-color: var(--color-2--9);
    --content-bg-color: var(--contrast-1-99);
    --content-shadow-color: var(--contrast-1-0);
    --default-bg-color: var(--color-1-9);
    --bg-shadow-color: var(--color-1--2);
    --content-shadow-color: var(--contrast-1-0);
    --h1-color: var(--color-1--9);
    --h2-color: var(--color-2--9);
    --h3-color: var(--color-1--8);
    --h4-color: var(--color-2--8);


    /* spacings */
    --grid-column-gap: 2rem;
    --grid-row-gap: 0rem;

    /* Timeline */
    --timeline-main-bg-color: var(--content-bg-color);
    --timeline-border-color: var(--color-2-5);
    /*--timeline-arrow-color: var(--contrast-2--2);*/

    /* Tier 1 Passive */
    --timeline-level-1-bgcolor: var(--contrast-1-99);
    --timeline-level-1-color: var(--color-2--2);
    /* Tier 1 Hover */
    --timeline-hover-1-color: var(--color-2--7);
    --timeline-hover-1-bgcolor: var(--contrast-1-7);
    /* Tier 1 Active */
    --timeline-active-1-color: var(--color-2--7);
    --timeline-active-1-bgcolor: var(--contrast-1-7);

    /* Tier 2 Passive */
    --timeline-level-2-color: var(--color-2--7);
    --timeline-level-2-bgcolor: var(--color-3-99);
    /* Tier 2 Hover */
    --timeline-hover-2-color: var(--color-2--9);
    --timeline-hover-2-bgcolor: var(--contrast-1-7);
    /* Tier 2 Active */
    --timeline-active-2-color: var(--color-2--9);
    --timeline-active-2-bgcolor: var(--contrast-1-8);

    /* Tier 3 Passive */
    --timeline-level-3-bgcolor: #feefb2;
    --timeline-level-3-color: #000;
    /* Tier 3 Hover */
    --timeline-hover-3-color: #000;
    --timeline-hover-3-bgcolor: #fedfa0;
    /* Tier 3 Active */
    --timeline-active-3-color: #000;
    --timeline-active-3-bgcolor: #feefb2;
}

* {
    margin: 0px;
    padding: 0px;    
}

html, body {
    font-family: 'Montserrat', sans-serif;
    color: var(--default-color);
    line-height: 1.5;
    font-weight: 400;
    font-size: 16px;
    background-color: var(--default-bg-color);
}

@media (max-width: 608px) {
    html, body {
        font-size: 12px;
    }
}

body {
    padding-bottom: 3rem;
}

ul, ol {
    padding-left: 3rem;
}

li {
    line-height: 1.75rem;
}

p, ul, ol, blockquote {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: justify;
}

h1 {
    font-weight: 500;
    font-size: 2rem;
}

h2 {
    font-weight: 500;
    font-size: 1.5rem;
}

h3 {
    font-weight: 400;
    font-size: 1.25rem;
}

.centred {
    width: 75%;
    margin: auto;
    text-align: center;
}

.inlineHeading {
    font-weight: 500;
    max-height: 2rem;
    margin-right: 1rem;
}

.flexBoxContainer {
    display: flex;
    flex-wrap: wrap;
}

.flexBox {
    height: 100%;
}

.quoteHeading {
    margin-bottom: 1rem;
    display: block;
}

blockquote {
    padding-left: 1rem;
    quotes: "\201C""\201D""\2018""\2019";
    font-style: italic;
}

blockquote:before {
    content: open-quote;
}

blockquote:after {
    content: close-quote;
}

blockquote span {
}

blockquote span:before {
}

blockquote span:after {
}

.navLocation {
    position: relative;
    top: -2rem;
}

/* Main Body*/
#banner {
    text-align: center;
    margin-top: 3rem;
}

#pageHeading {
    display: inline-block;
    font-size: 4rem;
    vertical-align: middle;
}

#gmcLogo {
    vertical-align: middle;
    display: inline-block;
}

#profilePicture {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

#profilePicture img {
 
}

@media (min-width: 50rem) {
    #profilePicture img {
        width: 50rem;
    }
}

@media (max-width: 50rem) {
    #profilePicture img {
        width: 100%;
        min-width: 38rem;
    }
}

.content {
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 72rem) {
    .content {
        width: 72rem;
    }
}

@media (max-width: 72rem) {
    .content {
        width: auto;
        min-width: 38rem;
    }
}

.timelineContent {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
}

/* Timeline Expandable */

#timelineBoxContainer {
    padding-top: 2rem;
}

.timelineTop {
    border-bottom: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.timelineCollapse1.timelineTop {
    border-radius: 10px 10px 0px 0px;
}

.timelineBetween {
    border-top: 1px solid var(--timeline-border-color);
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.timelineBottom {
    border-radius: 0px 0px 10px 10px;
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.timelineCollapse1.timelineBottom {
    border-top: 1px solid var(--timeline-border-color);
}

.timelineBox {
    border-radius: 10px;
    border: 1px solid var(--timeline-border-color);
    box-shadow: 0px 0px 3px var(--bg-shadow-color);
}

.timelineCollapse1, .timelineCollapse2, .timelineCollapse3{
    display: button;
    min-height: 3rem;
    line-height: 3rem;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.timelineCollapse1 {
    font-size: 1.5rem;
    font-weight: 600;
    background-color: var(--timeline-level-1-bgcolor);
    color: var(--timeline-level-1-color);
}

.timelineCollapse2 {
    background-color: var(--timeline-level-2-bgcolor);
    color: var(--timeline-level-2-color);
}

.timelineCollapse3 {
    background-color: var(--timeline-level-3-bgcolor);
    color: var(--timeline-level-3-color);
    font-weight: 400;
}

.timelineVerticalMiddle {
    display: inline-block;
    pointer-events: none;
    padding-left: 1rem;
    line-height: 1rem;
    width: 90%;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.timelineHeadingGrid {
    display: inline-grid;
    grid-template-columns: auto 13rem;
    grid-column-gap: 2%;
}

.timelineHeading {
    display: flex;
    flex-wrap: nowrap;
    grid-column-start: 1;
    grid-column-end: 2;
    gap: 1rem;
}

.timelinePosition {
    font-weight: 600;
    font-size: 1rem;
    display: block;
}

.timelineOrganisation {
    font-size: 1rem;
    font-weight: 400;
    display: block;
}

.timelineDate {
    min-width: 13.5rem;
    text-align: center;
    grid-column-start: 2;
    grid-column-end: 3;
    position: relative;
    display: inline-grid;
    grid-template-columns: 2.5rem 3.25rem 1.5rem 2.5rem auto;
    grid-column-gap: 0rem;
    vertical-align: middle;
    right: -1rem;
}

.timelineDateStartMonth {
    grid-column-start: 1;
    grid-column-end: 2;
    display: block;
}

.timelineDateStartYear {
    grid-column-start: 2;
    grid-column-end: 3;
    display: block;
}

.timelineDateGap {
    grid-column-start: 3;
    grid-column-end: 4;
    display: block;
}

.timelineDateLine {
    margin-left: auto;
    margin-right: auto;
    height: 2px;
    display: inline-block;
    vertical-align: middle;
    width: 0.5rem;
    border-top: 1px solid black;
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.timelineDateEndMonth {
    grid-column-start: 4;
    grid-column-end: 5;
    display: block;
}

.timelineDateEndYear {
    grid-column-start: 5;
    grid-column-end: 6;
    display: block;
}

.timelineCollapse1:hover {
    background-color: var(--timeline-hover-1-bgcolor);
    color: var(--timeline-hover-1-color);
}

.timelineCollapse2:hover {
    background-color: var(--timeline-hover-2-bgcolor);
    color: var(--timeline-hover-2-color)
}

.timelineCollapse3:hover {
    background-color: var(--timeline-hover-3-bgcolor);
    color: var(--timeline-hover-3-color)
}

.timelineActive1 {
    background-color: var(--timeline-active-1-bgcolor);
    color: var(--timeline-active-1-color);	
}

.timelineActive2 {
    background-color: var(--timeline-active-2-bgcolor);
    color: var(--timeline-active-2-color);
}

.timelineActive3 {
    background-color: var(--timeline-active-3-bgcolor);
    color: var(--timeline-active-3-color);
}

.timelineActive1.timelineBottom, .timelineActive2.timelineBottom, .timelineActive3.timelineBottom {
    border-radius: 0px;
}

.timelineCollapse1:after, .timelineCollapse2:after, .timelineCollapse3:after {
    padding-right: 0.75rem;
    content: '\2bc6';
   /* color: var(--timeline-arrow-color); */
    display: inline;
    float: right;
}

.timelineCollapse1:after {
    font-weight: normal;
    font-size: 1.5rem;
}

.timelineCollapse2:after {
    font-weight: normal;
    font-size: 1.25rem;
}

.timelineCollapse3:after {
    font-weight: normal;
    font-size: 1rem;
}

.timelineActive1:after, .timelineActive2:after, .timelineActive3:after {
    content: "\2bc5"; 
}

.timelineTransition {
    height: 0;
    transition: height 0.2s ease-out;
    overflow: hidden;
    background-color: var(--timeline-main-bg-color);   
}

.timelineExpanded1, .timelineExpanded2, .timelineExpanded3 {
    border-top: 1px solid var(--timeline-border-color);	
}

/* Timeline Items */