@charset "UTF-8";
/* CSS written by Pam @ WDK */
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

/*Defaults*/
html {
    --main-blue: #0099cc;
    --green: #0e9749;
    --orange: #f79721;
    --red: #bf2030;
    
    --purple: #5a72a3;
    --teal: #2d98a2;
    --yellow: #e7c683;
    --peach: #f79475;
    
    --lt-blue: #7bd3f7;
    --lt-green: #d3e8c4;
    --lt-red: #fccbc2;
    --lt-purple: #dbbbd9;
    
    --white: #fff;
    --lt-bg: rgba(123, 211, 246, 0.45);
    --dk-color: #155f66;
    
    --base-font: 'Arimo', Arial, Helvetica, sans-serif;
    --content-padding: 15px 20px;
    --content-space: 40px;
    --border-radius: 12px;
    --btn-border-radius: 50px;
    
    scroll-behavior: smooth;
}

/* global styling*/

body {
    background: var(--white);
    min-height: 100vh;
    padding: 30px;
    font-family: var(--base-font);
}

body * {box-sizing: border-box;}

h1,h2,h3,h4,h5,h6, strong {font-weight: 700;}
em {font-style:italic;}

h1 {font-size: 40px; line-height: 1.2; margin-bottom: 10px}
h2 {font-size: 34px; line-height: 1.2; margin-bottom: 20px;}
h3 {font-size: 28px; line-height: 1.2; margin-bottom: 15px;}
h4 {font-size: 24px; line-height: 1.3; margin-bottom: 12px;}
h5, dl > dt {font-size: 20px; line-height: 1.3; margin-bottom: 10px;}
h6 {font-size: 18px; line-height: 1.3; margin-bottom: 8px;}

h1 abbr,h2 abbr,h3 abbr,h4 abbr {text-decoration: none;}

dl > dt {font-weight: 600;}

p, dl > dd, .styled-list li {font-size: 16px; line-height: 1.4;}
main p:not(:last-child) {margin-bottom: 15px;}

p.lg-text {font-size: 20px;}

a {color: var(--lt-green); text-decoration: none; opacity: 0.9; transition: 0.3s;}
a:hover {color: var(--lt-red); opacity: 1; text-decoration: underline;}

img {max-width: 100%; height: auto;}

dl, ol, ul {margin-bottom: 12px}

hr {margin: 20px 40px; border:0; border-top: 1px dotted var(--lt-bg);}

main *:not(nav) ul:not([class]), 
main ol:not([class]), 
ul.styled-list 
{ margin-left: 40px;}

main *:not(nav) ul:not([class]) li, main ol:not([class]) li, ul.styled-list li { line-height: 1.1; padding: 3px 0;}

main *:not(nav) ul:not([class]) li ul, main ol:not([class]) li ol, ul.styled-list li ul { margin-bottom: 0;}

main *:not(nav) ul:not([class]) li ul li:last-child, main ol:not([class]) li ol li:last-child, ul.styled-list li ul li:last-child { padding: 3px 0 0;}

main *:not(nav) ul:not([class]), ul.styled-list { list-style: disc;}

main *:not(nav) ul:not([class]) li ul, ul.styled-list li ul {list-style: circle;}

main ol:not([class]) {list-style: decimal;}

main ol:not([class]) li ol {list-style: lower-alpha;}

/* Functions */

.cf:before, .cf:after {
     content:"";
     display:table;    
}

.cf:after {
     clear:both;
}

.hide, .outliner-hide {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
}

/*layout*/

header, main {color: var(--white);}

.site-wrap { width: 100%; max-width: 1500px; margin: 0 auto;}

.site-banner, .title-bar, main { background: var(--main-blue); padding: var(--content-padding);}

.site-banner { border-radius: var(--border-radius); margin-bottom:20px;}

.title-bar { border-radius: var(--border-radius) var(--border-radius) 0 0; padding-bottom: 5px;}

main {border-radius: 0 0 var(--border-radius) var(--border-radius); padding-bottom: 30px; margin-bottom: 30px;}

section:not(:last-of-type) {margin-bottom: var(--content-space);}

footer {text-align: center;}

/*Header*/

.site-banner {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.site-title, h1.site-title {font: 700 45px/1.2 var(--base-font); margin: 20px 0 0 0;}

.logo-wrap  {
    flex-grow: 1;
    display:flex;
    align-items: center;
    gap: 15px;
}

.site-banner a { color: var(--white); opacity: 1;}

.site-banner a:hover { 
    color: var(--white); 
    opacity: .85;
    text-decoration: none;
    cursor: pointer;
}

.logo-wrap img {height: 120px; width: auto;}

.logo-wrap p { font-size: 20px; line-height: 1.4;}

.logo-wrap p.terms span.term-line {display:block;}

.logo-wrap p.terms span.term-line dfn:not(:last-child)::after {content: '|'; margin-left: 10px; margin-right: 5px;}

/*Page Title*/

body:not(.home) .title-bar { display:flex; flex-direction: column-reverse;}

body:not(.home) .title-bar h1 { margin-bottom:0;}

body.home .title-bar {padding-bottom: 10px;}

nav.site-nav {display:flex; margin-bottom: 20px;}

body.home .title-bar nav { margin-bottom: 0px;}

nav h2, nav a {font-size: 18px; line-height: 1.2; margin-bottom:0;}

nav.site-nav h2 {display: inline-block; margin-right: 5px;}

nav.site-nav > ul {flex-grow: 1; margin-bottom: 0;}
nav.site-nav > ul > li {display: inline-block;}
nav.site-nav > ul > li:not(:last-child)::after {content: '/'; padding-right: 6px; padding-left: 6px;}

nav.site-nav ul > li > a {
    opacity: 1;
    color: var(--white); 
    font-weight: 600;
    text-decoration: underline;
    transition: 0.4s;
}

nav.site-nav ul > li > a:hover, nav.site-nav ul > li > a.current {
    text-decoration: none;
    color: var(--white);
}

nav.site-nav ul > li > a.current { cursor:default}

/*Footer*/

footer {text-align: center; color: var(--main-blue); margin-bottom: 10px;}

footer p, footer ul {font-size: 14px; line-height: 1.2;}

footer p:not(:last-child) {margin-bottom: 10px;}

footer a, footer a:hover {color: var(--main-blue);}
footer a:hover, footer abbr { text-decoration: none;}

footer ul {
    display: flex;
    width: 100%;
    justify-content: center;
    column-gap: 20px;
}

footer .copyright {margin: 30px 3% 0; padding-top: 20px; border-top:2px solid var(--main-blue);}

/* secondary nav */
nav.secondary-nav {
    background: var(--lt-bg);
    padding: var(--content-padding);
    border-radius: var(--border-radius);
    margin-bottom: 30px;
}
nav.secondary-nav h2, nav.secondary-nav h3 {font-size: 18px; margin-top:0; margin-bottom:10px;}

ul.btn-nav { 
    display:flex;
    flex-wrap: wrap;
    gap:10px; 
    margin-bottom: 5px;
}

ul.btn-nav > li > a {
    display:block;
    opacity: 1;
    color: var(--white);
    font-weight: 600;
    text-shadow: 1px 1px 6px rgba(0,0,0, .3);
    padding: 5px 20px;
    border-radius: var(--btn-border-radius);
    transform: translate(0, 0)
}

ul.btn-nav > li > a:hover { 
    text-decoration: none; 
    box-shadow: none;
    transform: translate(-2px, -2px);
    opacity: .9;
}

    /*rotating colour buttons*/
    ul.btn-nav > li:nth-of-type(8n+1) > a {background: var(--main-blue);}
    ul.btn-nav > li:nth-of-type(8n+2) > a {background: var(--green);}
    ul.btn-nav > li:nth-of-type(8n+3) > a {background: var(--orange);}
    ul.btn-nav > li:nth-of-type(8n+4) > a {background: var(--red);}
    ul.btn-nav > li:nth-of-type(8n+5) > a {background: var(--purple);}
    ul.btn-nav > li:nth-of-type(8n+6) > a {background: var(--teal);}
    ul.btn-nav > li:nth-of-type(8n+7) > a {background: var(--yellow);}
    ul.btn-nav > li:nth-of-type(8n+8) > a {background: var(--peach);}

/*Elements*/

.sm-space { margin: 10px 40px;}
.md-space { margin: 30px 40px;} 
.lg-space { margin: 50px 40px;}
.t-sm-space { margin: 20px 40px 30px;}
.b-sm-space { margin:30px 40px 20px;}

.banner-image {border-radius: var(--border-radius); margin-bottom: var(--content-space);}

.banner-image.sm-banner {display: block; max-width: 70%; margin: 0 auto var(--content-space);}

a.strong-link {opacity: 1; font-weight: 700; color: var(--lt-green);}
a.strong-link:hover {text-decoration: none; color: var(--yellow);}

a.btn, a.btn-lg {
    opacity: 1;
    display: inline-block;
    color: var(--white);
    background: var(--orange); 
    text-decoration: none; 
    transition: 0.3s;
    line-height: 1.2;
    padding: 8px 15px;
    border-radius: var(--btn-border-radius);
}

a.btn-lg {font-size: 20px; padding: 10px 26px;}

a.btn:hover, a.btn-lg:hover {background: var(--purple);}

a.btn-green {background: var(--green);}
a.btn-peach {background: var(--peach);}

    /*content boxes*/

.content-boxes-wrap {
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    row-gap: 30px;
}

.content-box {
    padding: var(--content-padding);
    background: var(--lt-bg);
    border-radius: var(--border-radius);
    width: calc(33.33% - 20px);
}

.content-box > img, .content-box.box-profile > .pp-wrap img {
    border-radius: var(--border-radius);
    margin-bottom: 10px;
}


.content-box:not(.box-profile) > img {
    width: 100%;
    aspect-ratio: 3/2;
    padding: var(--content-padding);
    object-fit: contain;
    object-position: 50% 50%;
    background: var(--white);
}

.content-box:not(.box-profile) > img.no-frame {padding: unset;}

.content-box > h3 { margin-bottom: 5px;}
    
.content-box > time { display: block; font: 600 20px/1.1 var(--base-font); margin-bottom: 10px;}

    /*profile content box */

.content-box.box-profile > .pp-wrap {
    text-align: center;
    padding: 12px 20px 0 0;
}

.content-box.box-profile > .pp-wrap img {
    width: 100%;
    aspect-ratio: 55/58;
    object-fit: cover;
    object-position: 50% 50%;
    max-width: 275px;
    box-shadow: 20px -12px 0 0 var(--purple);
}

.profile-name { margin-bottom: 5px;}

.profile-name h3 {font-size: 24px; display: inline-block; margin-bottom: 0px;}

.profile-name dfn {font-size: 13px; display: inline-block; min-width: fit-content;}

.profile-title {
    margin-bottom: 8px;
    align-items: baseline;
}
.profile-title h4 {font-size: 22px; line-height: 1.2; margin-bottom: 0px; display: inline-block;}
.profile-title p.profile-time {display:inline-flex;}

    /*featured profile content box*/

.featured-profile { display:flex; column-gap: 30px;}

.featured-profile > .featured-profile-image { 
    width: 40%; 
    max-width: 450px; 
    oveflow: hidden;
    padding-left:30px;
    padding-top: 15px;
}

.featured-profile > .featured-profile-image img { 
    border-radius: var(--border-radius);
    box-shadow: -30px -12px 0 0 var(--lt-bg);
}

.featured-profile > .featured-profile-content {flex-grow: 1; width: calc(60% - 30px);}

.featured-profile .featured-intro-info {margin-bottom: 20px;}

.featured-profile .featured-intro-info h3 { margin-bottom: 15px;}

ul.featured-info-links, ul.info-links {
    display:flex;
    column-gap: 10px;
    margin-bottom: 20px;
}

a.info-btn {
    opacity: 1;
    display: inline-block;
    color: var(--dk-color);
    background: var(--white);
    font-weight: 600;
    text-decoration: none; 
    transition: 0.3s;
    line-height: 1.2;
    padding: 5px 10px;
    border-radius: var(--btn-border-radius);
}

a.info-btn:hover { color: var(--white); background: var(--purple);}

.featured-profile a.info-btn:hover { color: var(--white); background: var(--lt-bg);}

ul.info-links a.info-btn {font-size: 14px;}

ul.professional-info { font-size: 17px; font-weight: 600; margin-bottom: 15px;}

ul.professional-info > li:not(:last-child) { margin-bottom: 5px;}

/* Text Blocks w/image to left */

div.img-text-articles-wrap > article:not(:last-of-type) { margin-bottom: 30px;}

div.img-text-articles-wrap > article > img {
    float: left;
    display:block;
    border-radius: var(--border-radius);
    width: 35%;
    max-width: 500px;
    margin: 15px 30px 10px;
    box-shadow: -30px -12px 0 0 var(--lt-bg);
    padding: var(--content-padding);
    background: var(--white);
}

div.img-text-articles-wrap > article p:first-of-type {padding-top: 12px;}

.list-header {font-size: 18px;}

div.papers-info {
    clear: both;
    margin: 30px 30px 0 28px;
    padding-left: 20px;
    border-left: 2px solid var(--lt-blue);
}

div.papers-info h4 {font-size: 16px;}

main div.papers-info ul{
    list-style-type: "»  ";
    margin-left: 20px;
    font-size: 15px;
}

/*course details*/

.course-details h3, .course-details p.lg-text {margin-bottom: 8px}

    /*return to top*/

.to-top-bar:not(.to-top-bar-bottom) {
   padding-bottom: 10px;
    border-bottom: 1px dotted rgba(225, 225, 225, .65);
}

.to-top-bar, .to-top-bar-bottom {
    padding-top: 30px;
    text-align: right;
}

/*icons*/
.material-icons, .material-icons-outlined {
    font-size: inherit;
    line-height: inherit!important;
    vertical-align: middle;
    display: inline;
}