@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

:root {
    --font-family: 'Lato', Arial, sans-serif;
    --background-color: white;
    --background-color-light: #F3F9FD;
    --text-color: #333;
    --text-color-light: #666;

    --border-color: #e7e7e7;

    --highlight-color: #125B67;
    --highlight-color-darker: rgb(from var(--highlight-color) r g b / .1);
    --highlight-color-2: #283593;

    --link-color: #125B67;
    --link-hover-color: #283593;
}

*, html {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth !important;
}

body {
    font-family: var(--font-family);
    background: var(--background-color);
    color: var(--text-color);
    font-size: 15px;
}

a {
    text-decoration: none;
    color: var(--link-color);
    border-bottom: 2px solid rgba(28, 129, 145, 0.25);
}

a:hover {
    color: var(--highlight-color-2);
    border-bottom: 2px solid var(--highlight-color-2);
}

dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 650px;
    padding: 64px 64px 24px;
    border-radius: 8px;
    border: 1px solid #e7e7e7;
}

dialog.videoDialog {
    width: 960px;
}

.iframeDialog {
    padding: 0;
}

dialog:focus {
    outline: none;
}

dialog::backdrop {
    background: rgba(255,255,255,.8);
}

.dialogClose {
    position: absolute;
    right: 20px;
    top: 16px;
    color: #666;
    font-size: 1.1em;
    cursor: pointer;
    mask: url('/img/icon-close.svg');
    background: #333;
    width: 20px;
    height: 24px;
    content:'';
}

.dialogClose:hover {
    background: black;
}

.bigLink {
    font-size: 1.1em;
}

a.anchor, a.anchor:hover {
    border-bottom: none;
}

.button {
    padding: 12px 24px;
    border-radius: 25px;
    border-bottom: none;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    cursor: pointer;
    background: var(--background-color);
}

.button:hover, .selected {
    background: var(--text-color);
    color: white;
    border-bottom-width: 1px;
}

.magicappButton {
    display: block;
    margin-bottom: 36px;
}

header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: var(--highlight-color);
}

a.headerLogo {
    display: inline-block;
    width: 220px;
    padding: 20px;
    border-bottom: none;
}

.headerLogo img {
    width: 180px;
}

.custom-shape-divider-top {
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top svg {
    position: relative;
    display: block;
    width: calc(126% + 1.3px);
    height: 36px;
}

.custom-shape-divider-top .shape-fill {
    fill: #125B67;
}

nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

nav ul, footer ul {
    list-style: none;
}

nav li, footer li {
    display: inline-block;
    margin-right: 36px;
}

nav a, .headerLink {
    border-bottom: none;
    color: white;
}

nav a:hover, .headerLink:hover {
    color: white;
    border-bottom: 2px solid rgba(255, 255, 255, .5);
}

.headerLink {
    align-self: center;
    margin-right: 24px;
}

nav a.active {
    border-bottom: 2px solid rgba(255, 255, 255, .5);
}

.socialLogos {
    display: flex;
    flex-direction: row;
}

.socialLogos a {
    border-bottom: none;
    cursor: pointer;
}

.socialLogos a:hover {
    border-bottom: none;
    opacity: .8;
}

.twitterIcon, .linkedInIcon {
    width: 18px;
    height: 18px;
    display: inline-block;
    margin-right: 12px;
}

.twitterIcon {
    mask: url(/img/twitter.svg);
    -webkit-mask: url(/img/twitter.svg);
    mask-size: 18px;
    -webkit-mask-size: 18px;
}

.linkedInIcon {
    mask: url(/img/icon-linkedin.svg);
    -webkit-mask: url(/img/icon-linkedin.svg);
    mask-size: 18px;
    -webkit-mask-size: 18px;
}

.mobileToggle {
    display: none;
}

.hidden {
    display: none;
}

footer {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: .9em;
}

.socialLogosFooter {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-bottom: 24px;
}

.twitterIcon, .linkedInIcon {
    background: #CCC;
}

.socialLogosFooter a {
    border-bottom: none;
}

.dateCopyright {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-bottom: 24px;
    color: var(--text-color-light);

}

footer .menu {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-bottom: 48px;
}

footer li {
    display: inline-block;
    margin: 0 12px;
}

footer a {
    color: var(--text-color-light);
    border-bottom-color: var(--border-color);
}

.announceWrap {
    display: inline-block;
    width: 100%;
    padding: 36px 24px;
    font-size: 1.1em;
    background: var(--background-color-light);
    display: none;
}

.announceMessage {
    width: 960px;
    margin: 0 auto;
    text-align: center;
}

.announceMessage a {
    clear: both;
    display: inline-block;
    margin-left: 8px;
}

.redHighlight {
    color: #901c01;
    font-weight: 700;
}

.contentWrapper {
    display: flex;
    flex-direction: column;
    width: 960px;
    margin: 0 auto;
    padding-bottom: 48px;
}

.contentWrapper h1 {
    display: inline-block;
    width: 100%;
    margin: 24px 0 48px;
    text-align: center;
}

.contentWrapper h1.featureTitle {
    display: inline-block;
    width: 100%;
    margin: 64px 0 72px;
    color: white;
    font-weight: 400;
    font-size: 1.7em;
    line-height: 1.4em;
}

.topDivider {
    display: block;
    width: 400px;
    height: 3px;
    background: var(--highlight-color);
    opacity: .5;
    margin: 0 auto 48px;
}

.mid {
    background: var(--border-color);
}

.homepage {
    background: #f6b849;
    position: relative;
    right: 60px;
    opacity: 1;
}

/* home page */

.hero {
    width: 100%;
    display: inline-block;
    clear: both;
    background: linear-gradient(to bottom right, #1A8192, #125B67 50%);
}

.heroContent {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: 960px;
    padding: 100px 0 160px;
}

.heroText {
    padding: 0 48px 0 0;
    width: 50%;
}

.hero h1 {
    font-weight: 400;
    font-size: 1.9em;
    line-height: 1.4em;
    margin-bottom: 24px;
    color: white;
}

.heroImg {
    display: inline-block;
    width: 480px;
    height: 280px;
    background: url('/img/hero-sm.webp') no-repeat;
    background-size: cover;
    box-shadow: 0 0 80px 20px #125B67 inset;
    margin: 0;
}

.hero a, .homeFeatureBottom a {
    color: white;
    border-bottom: 3px solid rgba(255, 255, 255, .3);
}

.hero a:hover, .homeFeatureBottom a:hover {
    color: white;
    border-bottom: 3px solid rgba(255, 255, 255, .8);
}

.hero p {
    font-size: 1.1em;
    line-height: 1.5em;
    color: white;
}

.hero p a, .hero p a:hover {
    border-bottom-width: 2px;
}

.homeFeatureBlockWrap {
    width: 100%;
    display: inline-block;
    background: #478293;
    background: linear-gradient(to bottom, #478293, #125B67 80%);
}

.homeFeatureBlockWrap .contentWrapper {
    /* opacity: 0;
     animation: fadeIn linear both;
     animation-timeline: scroll(root);
     animation-range: 0 40vh; */
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.magicCircleImage {
    margin: 0 auto 64px;
    width: 100%;
}

.featureBlockWrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 36px;
    grid-row-gap: 48px;
    margin: 0 auto 24px;
    padding: 0 163px 0 24px;
}

.featureBlock {
    display: grid;
    grid-template-columns: 1fr;
    color: white;
    grid-column-gap: 36px;
}

.featureBlockIcon {
    display: none;
}

.featureBlockIcon img {
    max-width: 100%;
}

.featureRight {
    grid-template-columns: 250px 200px;
}

.featureRight img {
    order: 2;
}

.featureBlock h2 {
    display: inline-block;
    width: 100%;
    margin-bottom: 24px;
    font-size: 1em;
    line-height: 1.4em;
}

.featureBlock a {
    color: white;
    text-decoration: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3)
}

.featureBlock a:hover{
    border-color: white;
}

.bottomBracket {
    width: 75%;
    margin: 0 auto 36px;
    padding-right: 120px;
}

.homeFeatureBottom {
    display: inline-block;
    width: 100%;
    color: white;
    text-align: center;
    margin-bottom: 64px;
    font-weight: 400;
    padding-right: 120px;
}

.magic {
    background: #1B6292; /* magic blue */
}

.research {
    background: orange;
}

.researchTop {
    display: inline-block;
    font-size: 1.1em;
    line-height: 1.4em;
    margin-bottom: 48px;
}

.org {
    background: purple;
}

.featureBlock p {
    line-height: 1.6em;
    margin-bottom: 24px;
    text-align: left;
    font-size: .95em;
}

.midHero {
    width: 100%;
    background: var(--background-color-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 48px;
    padding: 48px;
}

.midHero .button {
    background: var(--background-color-light);
}

.midHero .button:hover {
    background: var(--text-color);
}

.video {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-bottom: 36px;
}

.video::after {
    display: block;
    content: "";
    padding-top: 56.25%;
}

.video iframe {
    position:absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.noBotPadding {
    padding-bottom: 0;
}

.centerAlign {
    text-align: center;
}

.centerAlign img {
    margin-bottom: 24px;
    max-width: 900px;
}

.centerAlign.gela img {
    max-width: 750px;
}

.midHero h2 {
    display: block;
    margin-bottom: 12px;
}

.midHero p {
    margin-bottom: 48px;
    line-height: 1.6em;
}

.midHero img {
    margin: 0 auto;
    width: calc(100% - 48px);
    margin-bottom: 24px;
}

.statHero {
    margin-bottom: 0;
    display: none;
}

.magicStats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
    max-width: 960px;
    background: var(--background-color-light);
}

.magicStatItem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 36px 0;
}

.bigStat {
    font-size: 58px;
    color:  #1B6292;
    margin-bottom: 12px;
    font-weight: 600;
}

.purple {
    color: #6C3483;
}

.orange {
    color: #f6b849;
}

.green {
    color: #009688;
}

.brown {
    color: #795548;
}

.smallStat {
    font-size: 18px;
}

.orgHero h2, .orgHero p, .orgHero .button, .logoWrap, .guidelineHomeWrap, .centerAlign {
    /*opacity: 0;
    animation: org-fade linear both;
    animation-timeline: scroll(root);
    animation-range: 0;*/
}

@keyframes org-fade {
    to {
        opacity: 1;
    }
}

.logoWrap {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 36px;
}

.logoWrap a {
    border-bottom: none;
    margin: 0 12px;
    text-align: center;
}

.logoWrap a.noLeft {
    margin: 0 12px 0 0;
}

.logoWrap a.noRight {
    margin: 0 0 0 12px;
}

.logoWrap img {
    max-height: 100px;
    max-width: 200px;
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    filter: gray;
    opacity: .8;
}

.logoWrap img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
    cursor: pointer;
    opacity: 1;
}

.logoWrap img.bmjLogo {
    height: 90px;
    width: auto;
    max-width: unset;
}

.publicationsWrap h3, .publicationsWrap h2 {
    margin-bottom: 12px;
}

.publicationsWrap h3 {
    margin-bottom: 4px;
}

.publicationsWrap a.pubLink {
    display: inline-block;
    margin: 0 0 24px 8px;
}

.publicationsWrap .mid {
    margin-bottom: 1em;
}

.publicationsWrap {
    line-height: 1.6em;
    max-width: 800px;
    margin: 0 auto;
}

a.homePublishLink {
    display: inline-block;
    clear: both;
    margin: 0 auto 48px;
    font-size: 1.1em;
    font-weight: 700;
}

.guidelineHomeWrap {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-column-gap: 36px;
    margin-bottom: 36px;
}

.guidelineHomeWrap img {
    width: 100%;
}

.guidelineHomeWrap img.alecLogo {
    width: 80px;
    margin: 0 auto;
}

.guidelineHomeWrap img.small {
    width: 60%;
    margin: 0 auto;
}

.guidelineHomeContent {
    padding-top: 4px;
}

.guidelineHomeContent p {
    font-size: .9em;
    margin-bottom: 12px;
}

.guidelineHomeContent h3 {
    margin-bottom: 4px;
}

.guidelineHomeContent a {
    margin-left: 0;
}

.newsDate {
    display: inline-block;
    width: 100%;
    clear: both;
    text-align: center;
    margin-bottom: 16px;
    font-style: italic;
    font-size: .95em;
}

h2.centerAlign {
    display: inline-block;
    width: 100%;
    clear: both;
    text-align: center;
    margin: 12px 0 24px;
}

.contentRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 36px;
    margin-bottom: 36px;
}

.content {
    margin-bottom: 48px;
}

.singleItem {
    grid-template-columns: 1fr;
    justify-items: center;
    margin-bottom: 12px;
}

.singleMoreMargin {
    margin-bottom: 36px;
}

.singleMoreMargin .button {
    margin-bottom: 24px;
}

.PDFwrap {
    width: 640px;
    display: flex;
    padding: 0 0 36px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.PDFwrap img {
    width: 24px;
    margin-right: 24px;
}

.PDFwrap a {
}

.oslo p {
    margin-bottom: 36px;
}

.oslo img {
    width: 640px;
    margin: 0 auto;
    padding: 5px;
    border: 1px solid var(--border-color);
}

.magicDemo {
    display: block;
    max-width: 600px;
    margin: 24px auto 36px;
    line-height: 1.6em;
}

.securityText {
    display: block;
    max-width: 600px;
    margin: 0 auto 48px;
    line-height: 1.6em;
}

.supportSingle {
    margin-bottom: 0;
    padding: 36px 0 0;
}

.contentRow img {
    max-width: 100%;
}

.contentBlock {
    max-width: 800px;
    margin: 0 auto;
}

.contentBlock h4, .contentBlock h3, .contentBlock h2, .content h4, .content h3, .content h2  {
    margin-bottom: 1em;
}

.contentBlock p, .contentBlock ul, .content p, .content ul, .securityList {
    line-height: 1.6em;
    margin-bottom: 1em;
}

.perBlock {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-column-gap: 24px;
    align-items: center;
    margin-bottom: 24px;
    font-style: italic;
}

.perBlock img {
    border-radius: 50%;
}

.caption {
    font-size: 14px;
    font-style: italic;
}

.contentBlock li, .content li {
    line-height: 1.6em;
    margin-bottom: .5em;
    margin-left: 1em;
}

.showcaseBlock {
    display: grid;
    grid-template-columns: 350px 1fr;
    grid-column-gap: 48px;
    padding: 0 48px;
    border-radius: 2px;
    /*background: #f8f8f8;*/
}

.moreFeaturesLink {
    display: block;
    margin: 36px 0;
    cursor: pointer;
    color: var(--link-color);
    border-bottom: 2px solid rgba(28, 129, 145, 0.25);
}

.moreFeaturesLink:hover {
    color: var(--highlight-color-2);
    border-bottom: 2px solid var(--highlight-color-2);
}

#moreFeatures {
    display: none;
    width: 100%;
}

.moreFeatureBlock {
    width: 600px;
    margin: 0 auto 36px;
}

.bottomShowcase {
    margin-bottom: 36px;
}

.showcaseBlock h3, .moreFeatureBlock h3 {
    margin-bottom: 24px;
}

.showcaseBlock p, .moreFeatureBlock li {
    line-height: 1.6em;
}

.showcaseBlock img {
    width: 100%;
}

.showcaseContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blockRight {
    grid-template-columns: 1fr 350px;
}

.blockRight img {
    order: 2;
}

.blockRight .showcaseContent {
    order: 1;
}

.diagramImage {
    margin: 0 auto 48px;
    max-width: 600px;
}

.magicSignup {
    display: inline-block;
    width: 100%;
    background: var(--background-color-light);
}

.magicSignupWrap {
    display: grid;
    grid-template-columns: 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr;
    width: 100%;
    background: var(--background-color-light);
    padding: 36px 36px 48px;
    border-radius: 8px;
    margin: 0 0 36px;
}

.magicSignupWrap h2 {
    grid-column-start: 1;
    grid-column-end: 10;
    font-weight: 400;
    margin-bottom: 48px;
    text-align: center;
}

.magicSignupItem {
    display: grid;
    grid-template-columns: 1fr 72px;
    grid-column-gap: 24px;
    text-align: center;
    font-size: .9em;
}

.magicSignupItem img {
    width: 100%;
}

.magicSignupItem p {
    grid-column-start: 1;
    grid-column-end: 3;
    padding-left: 54px;
}

.signupNumber {
    font-size: 1.6em;
    width: 100%;
    text-align: right;
    color: var(--highlight-color-2);
    font-weight: 700;
    margin-top: 8px;
    padding-right: 8px;
}

.signupIcon {
    mask: url('/img/magic-request-icon-1.svg') no-repeat;
    background: var(--highlight-color);
    background-size: cover;
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto;
}

.iconTwo {
    mask: url('/img/magic-request-icon-2.svg') no-repeat;
}

.iconThree {
    mask: url('/img/magic-request-icon-3.svg') no-repeat;
}

.iconFour {
    mask: url('/img/magic-request-icon-4.svg') no-repeat;
}

.iconFive {
    mask: url('/img/magic-request-icon-5.svg') no-repeat;
}

.signupArrow {
    mask: url('/img/arrow-right.svg') no-repeat;
    background: var(--highlight-color-2);
}

.signupButtonWrap {
    grid-column-start: 1;
    grid-column-end: 10;
    text-align: center;
    padding: 36px 0 0;
}

.signupButtonWrap .button {
    background: transparent;
}

.signupButtonWrap .button:hover {
    background: var(--text-color);
    color: white;
}

.researchTabs {
    display: flex;
    justify-content: center;
    margin-bottom: 48px;
}

.researchTabs button:first-of-type {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.researchTabs button:last-of-type {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}

.researchGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 36px;
}

.researchBlock {
    margin-bottom: 36px;
}

.bigBlock {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-column-gap: 64px;
    grid-column: span 2;
}

.bigBlock img {
    max-width: 100%;
    margin: 0 auto;
}

.researchBlock h2 {
    color: #283593;
    margin-bottom: 1em;
    font-size: 1.3em;
}

.researchBlock p {
    line-height: 1.6em;
    margin-bottom: 12px;
}

.profileWrap {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-column-gap: 36px;
    justify-self: start;
    margin-bottom: 36px;
}

a.profilePic {
    cursor: pointer;
    display: block;
    margin-bottom: 24px;
    border-radius: 2px;
    width: 220px;
    background: #f5f5f5;
    border-bottom: none;
}


.profilePic:hover {
    background: var(--background-color-light);
}

.leadershipIntro {
    display: inline-block;
    text-align: center;
    margin-bottom: 64px;
    width: 100%;
    font-size: 1.1em;
    line-height: 1.4em;
    margin-top: -12px;
}

.leader {
    grid-template-columns: 1fr;
    grid-column-gap: 0;
    text-align: center;
    align-content: start;
    justify-self: center;
}

.leader .profileInfo {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.leader .profilePic {
    justify-self: center;
}

.leader .socialLogos {
    justify-content: center;
}

.profileBackLink {
    display: inline-block;
    margin: 64px 0 64px;
    width: 48px; /* hacky */
}

.leaderDialogContent {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-column-gap: 64px;
}

.leaderDialogContent .topDivider {
    margin: 0 0 48px;
}

.leaderDialogContent img {
    width: 100%;
}

.leaderDialogContent p {
    line-height: 1.5em;
    margin-bottom: 36px;
    font-size: 1em;
}

.leaderDialogContent h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.leaderDialogContent .profilePic {
    margin-bottom: 24px;
    cursor: default;
    width: auto;
    background: #f5f5f5
}

.leaderDialogImg .topDivider {
    width: 100%;
    margin-bottom: 36px;
}

.dialogSocialIcons span {
    background: #ccc;
}

.smallIcon {
    border-bottom: none;
    width: 32px;
    margin-right: 12px;
}

.withIcon {
    display: inline-flex;
    align-items: center;
    background: var(--background-color-light);
    padding: 8px 12px;
    border-radius: 2px;
}

.teamBottom {
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-row-gap: 20px;
    justify-items: center;
    margin-bottom: 64px;
}

.twoup {
    grid-template-columns: 1fr 1fr;
}

.twoup .profileWrap p {
    max-width: 100%;
}

.profileProjectPage {
    grid-template-columns: 100px 1fr;
    margin: 24px 0;
}

.profileLogo {
    margin: 16px 24px 36px 0;
    width: 160px;
    float: left;
}

.contactTitle {
    grid-column: 1 / span 2;
    text-align: center;
    margin-bottom: 36px;
    font-size: 1.3em;
}

.profileWrap h3 {
    font-size: 14px;
    margin-bottom: 4px;
}

.leader h3 {
    font-size: 16px;
    max-width: 100%;
}

.profileWrap img {
    border-radius: 50%;
    width: 100px;
}

.leader img {
    width: 100%;
    cursor: pointer;
    border-radius: 2px;
}

.profileWrap p {
    line-height: 1.6em;
    font-size: 12px;
    max-width: 18ch;
    margin-bottom: 12px;
}

.leader p {
    max-width: 100%;
}

.profileWrap p.bottomMarginMore {
    margin-bottom: 48px;
}

.teamLeadership {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 36px;
    width: 70%;
    margin: 0 auto 54px;
}

.teamLeadershipBottom {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 36px;
}

.profileLeaderInfo {
    display: none;
}

.single {
    width: 100%;
    justify-items: center;
    grid-template-columns: 1fr;
}

.bottomMargin {
    margin-bottom: 1em;
}

.noBottomMargin {
    margin-bottom: 0;
}

.magicFeatureList {
    margin-bottom: 24px;
}

.magicFeatureList li {
    margin-bottom: 1em;
}

.orgsSubtext {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-bottom: 36px;
    line-height: 1.4em;
}

.backToMagicLink {
    display: inline-block;
    margin-bottom: 36px;
    width: 58px; /* maybe a better solution? */
}

.evidenceImage {
    margin: 0 auto;
}

.widgetDemoPage p, .widgetDemoPage h2, .widgetDemoPage li {
    line-height: 1.4em;
    margin-bottom: 24px;
    list-style-position: inside;
}

.securityList {
    margin-bottom: 36px;
}

.securityList li {
    list-style-position: outside;
}

.widgetDemoPage iframe, .widgetDemoPage img {
    display: block;
    margin: 0 auto 48px;
    border: 1px solid #CCC;
}

.widgetDemoPage img {
    max-width: 800px;
    border: none;
}

.jobsContent ol, .jobsContent ul {
    margin-left: 24px;
}

.jobsContent .topDivider {
    margin: 24px auto;
}

.supportRow {
    display: grid;
    max-width: 800px;
    margin: 0 auto;
    grid-template-columns: 300px 1fr;
    border-bottom: 1px solid var(--border-color);
    padding: 20px;
    grid-column-gap: 64px;
}

.supportRow:first-of-type {
    padding-top: 0;
}

.supportRow:last-of-type {
    border-bottom: none;
}

.supportRow.noBotBorder {
    border-bottom: none;
}

.supportRowContent p, .supportRowContent li {
    margin-bottom: 24px;
    line-height: 1.4em;
}

.supportRowContent .button {
    display: inline-block;
}

.testimonialWrap {
    display: grid;
    padding: 24px 48px;
    background: #f8f8f8;
    grid-template-columns: 200px 1fr;
    grid-column-gap: 24px;
    margin-bottom: 48px;
    border-radius: 2px;
}

.testimonialWrap.lessBotMargin {
    margin-bottom: 12px;
}

.testimonialRight {
    grid-template-columns: 1fr 200px;
}

.testimonialImage {
    display: flex;
    flex-direction: column;
}

.testimonialRight .testimonialImage {
    order: 2;
}

.testimonialImage img {
    width: 60%;
    margin-bottom: 24px;
    border-radius: 50%;
}

.testimonialImage h3 {
    font-size: 14px;
    margin-bottom: 12px;
}

.testimonialImage p {
    font-size: 12px;
}

.testimonialText {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.testimonialText p {
    color: #666;
    font-size: 16px;
    line-height: 1.4em;
    margin-bottom: 1em;
    /*font-family: Times, 'Times New Roman', serif;*/
    font-style: italic;
}

.robustBlock {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.robustBlock h2, .robustBlock table {
    grid-column-end: 3;
    grid-column-start: 1;
    width: 100%;
    margin-bottom: 48px;
    text-align: center;
}

.robustBlock table {
    border: 1px solid var(--border-color);
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 0;
}

table {
    border-collapse: collapse;
    width: 100%;
    border-radius: 3px;
}

.robustBlock th, .robustBlock td {
    padding: 12px;
    text-align: center;
    border: 1px solid var(--border-color);
    font-size: 13px;
}

.robustBlock th {
    background: #f8f8f8;
}

.robustBlock td:nth-child(1) {

}

.robustBlock td:last-of-type, .robustBlock th:last-of-type  {
    border-left: 2px solid var(--border-color);
}

.circle {
    display: inline-block;
    padding: 10px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 9px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}

.low {
    background-color: #009688;
    color: white;
}
.concern {
    background-color: #F7DC6F;
    font-size: 16px;
}
.high {
    background-color: #E84337;
    color: white;
    font-size: 11px;
}
.noinfo {
    background-color: #3295DD;
    color: white;
    font-size: 12px;
}

.p_low {
    background-color: #39713b;
    color: white;
}
.d_low {
    background-color: #71e375;
    color: white;
}
.p_high {
    background-color: #f4cc44;
    color: white;
}
.d_high {
    background-color: #e84c3d;
    color: white;
}




#csvFileInput {
    margin-bottom: 48px;
}

#downloadImageBtn {
    background: white;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 8px 12px;
    font-size: .85em;
    border-radius: 26px;
    text-decoration: none;
    cursor: pointer;
    font-weight: 400;
    text-align: center;
    position: relative;
    white-space: nowrap;
    display: none;
    float: right;
}

#downloadImageBtn:hover {
    background: #f8f8f8;
}

.fileUpload label {
    font-weight: bold;
    margin-right: 12px;
}

.fileDownload {
    text-align: right;
}

.widgetTestTop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 48px;
}

#rec1 {
    display: block;
    margin-bottom: 24px;
}

.rightAlign {
    text-align: right;
}

@media only screen and (max-width: 960px) {
    .contentWrapper {
        width: 100%;
        padding: 0 24px 48px;
    }

    .researchGrid {
        grid-template-columns: 1fr 1fr;
    }

    .announceMessage {
        width: 100%;
        padding: 0 24px;
    }

    .heroContent {
        width: 100%;
    }

    .hero {
        padding: 0 36px 25px;
    }

    .hero h1 {
        width: 100%;
        margin: 0 auto 24px;
        font-size: 2em;
    }

    .hero p {
        width: 100%;
        margin: 0 auto 36px;
    }

    .heroImg {
        width: 420px;
        height: 210px;
    }

    .evidenceImage {
        width: 100%;
        margin: 0 auto;
    }

    .centerAlign.gela img {
        max-width: 100%;
    }
}

@media only screen and (max-width: 850px) {
    body, html {
        overflow-x: hidden; /* to deal with mobile nav */
    }

    .menu {
        display: block;
        position: absolute;
        transform: translateX(200px);
        background: var(--background-color);
        border: 1px solid #e7e7e7;
        transition: all .3s ease-in;
        width: calc(100vw - 50px);
        /* height: calc(100vh - 20px);*/
        z-index: 3;
        top: -12px;
        padding: 36px 24px;
    }

    nav {
        flex-direction: column;
    }

    nav a {
        color: var(--link-color);
        border-bottom: 2px solid rgba(28, 129, 145, 0.25);
    }

    nav a:hover {
        color: var(--link-hover-color);
        border-bottom: 2px solid var(--link-hover-color);
    }

    nav a.active {
        background: var(--highlight-color);
        color: white;
        border-bottom: none;
        padding: 8px;
        border-radius: 2px;
    }

    .menu li {
        display: inline-block;
        width: 100%;
        padding: 20px;
    }

    .mobileToggle {
        display: inline-block;
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
        height: 50px;
        width: 50px;
        z-index: 5;
        opacity: 0;
    }

    .hidden {
        position: absolute;
        left: -100vw;
        display: block;
    }

    #toggle:checked ~ .menu {
        right: 0;
        transform: translate(0, 0);
    }

    .navigation-header span {
        display: flex;
        width: 29px;
        height: 2px;
        margin-bottom: 5px;
        position: relative;
        background: white;
        border-radius: 3px;
        z-index: 4;
        transform-origin: 5px 0;
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        opacity 0.55s ease;
    }

    .navigation-header span:first-child {
        transform-origin: 0 0;
    }

    .navigation-header span:nth-last-child(2) {
        transform-origin: 0 100%;
    }

    .navigation-header input:checked ~ span:nth-last-of-type(3)  {
        opacity: 1;
        transform: rotate(45deg) translate(-4px, -6px);
        background: var(--text-color);
    }

    .navigation-header input:checked ~ span:nth-last-of-type(2) {
        transform: rotate(-45deg) translate(0, -1px);
        background: var(--text-color);
    }

    .navigation-header input:checked ~  span:nth-last-of-type {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }

    .navigation-header input:checked ~ ul {
        transform: none;
    }

    .announceWrap {
        padding: 24px;
        font-size: 1em;
    }

    .custom-shape-divider-top svg {
        display: none;
    }

    .hero h1 {
        width: 100%;
        margin: 0 auto 24px;
        font-size: 1.6em;
        text-align: center;
    }

    .hero p {
        width: 100%;
        margin: 0 auto;
        font-size: .9em;
        text-align: center;
    }

    .hero {
        padding: 24px;
    }

    .heroContent {
        padding: 0 0 64px;
        flex-direction: column;
        width: 100%;
    }

    .heroImg {
        margin: 36px auto;
    }

    .heroText {
        width: 100%;
    }
}

@media only screen and (max-width: 600px) {

    body {
        padding-top: 60px;
    }

    nav {
        position: relative;
        padding: 20px;
    }

    .contentWrapper {
        width: 100%;
        padding: 0 12px 36px;
    }

    .socialLogos {
        justify-content: center;
    }

    .contentRow.oslo {
        margin-bottom: 0;
    }

    .oslo p {
        width: 100%;
        text-align: center;
    }

    footer .menu {
        display: none; /* a nice to have */
    }

    header {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1;
    }

    a.headerLogo {
        width: 180px;
        padding: 12px;
    }

    .headerLogo img {
        width: 156px;
    }

    .hero {
        padding: 16px;
    }

    .heroImg {
        width: 320px;
        height: 160px;
        margin: 24px auto;
    }

    .heroContent {
        padding: 20px 0 0;
    }

    .heroText {
        padding: 0;
    }

    .hero h1 {
        font-size: 1.2em;
    }

    .hero p {
        font-size: .9em;
    }

    .contentWrapper h1.featureTitle {
        margin: 36px 0;
        font-size: 1.1em;
    }

    .magicCircleImage {
        margin-bottom: 20px;
        display: block;
        width: 100%;
        max-height: 69px;
    }

    .featureBlockWrap {
        grid-template-columns: 1fr;
        grid-column-gap: 0;
        grid-row-gap: 0;
        padding: 0;
        margin: 0;
    }

    .featureBlock {
        grid-template-columns: 36px 1fr;
        margin: 0;
    }

    .featureBlock h2 {
        font-size: 1em;
    }

    .featureBlock p {
        font-size: .9em;
        margin-bottom: 20px;
    }

    .featureBlockIcon {
        display: block;
    }

    .bottomBracket {
        width: 100%;
        padding: 0;
        margin-top: 12px;
    }

    .homeFeatureBottom {
        margin-bottom: 0;
        width: 100%;
        padding: 0;
        font-size: 1em;
    }

    .midHero {
        padding: 36px 20px;
        margin-bottom: 24px;
    }

    .midHero p {
        text-align: center;
    }

    .guidelineHomeWrap {
        grid-template-columns: 64px 1fr;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }

    .guidelineHomeWrap img {
        max-width: 100%;
    }

    .guidelineHomeContent h3 {
        font-size: .9em;
    }

    .guidelineHomeContent p, .guidelineHomeContent a {
        font-size: .8em;
    }

    .publicationsWrap {
        padding: 0 24px;
    }

    .topDivider {
        width: 250px;
        margin: 0 auto 24px;
        right: unset;
    }

    .contentWrapper h1 {
        margin: 24px 0;
        font-size: 1.6em;
    }

    h2 {
        font-size: 1.2em;
    }

    h3 {
        font-size: 1.1em;
    }

    .featureBlock {
        margin: 24px 0 0;
        padding: 0 12px;
    }

    .contentRow {
        grid-template-columns: 1fr;
        grid-column-gap: 0;
        margin-bottom: 36px;
    }

    .noBottomMargin {
        margin-bottom: 0;
    }


    .profileRow {
        margin-bottom: 0;
    }

    .single {
        justify-items: start;
    }

    .profileWrap {
        grid-template-columns: 100px 1fr;
        grid-column-gap: 24px;
    }

    .profileInfo {
        margin-bottom: 36px;
    }

    .contentBlock h4 {
        width: 100%;
        text-align: center;
    }

    .contentRow img {
        margin-bottom: 20px;
    }

    .perBlock {
        grid-template-columns: 75px 1fr;
        font-size: .9em;
        font-style: italic;
        margin-bottom: 0;
    }

    .mobileBotMargin {
        margin-bottom: 0;
    }

    .researchGrid {
        grid-template-columns: 1fr;
        grid-column-gap: 0;
    }

    .researchBlock {
        margin-bottom: 24px;
    }

    .researchBlock h2 {
        font-size: 1.1em;
    }

    .bigBlock {
        grid-template-columns: 64px 1fr;
        grid-column-gap: 20px;
        grid-column: span 2;
    }

    .announceMessage {
        width: 100%;
        padding: 0;
    }
    .announceMessage a {
        display: inline;
        width: auto;
        margin-left: 8px;
    }

    .announceWrap {
        padding: 12px;
        font-size: .8em;
    }

    .midHero h2 {
        font-size: 1.1em;
    }

    .midHero p {
        margin-bottom: 36px;
        font-size: .8em;
    }

    .midHero img {
        width: auto;

    }

    .logoWrap {
        flex-direction: column;
        margin-bottom: 0;
    }

    .logoWrap img {
        margin-bottom: 36px;
        min-width: 100px;
        max-width: 150px;
    }

    .diagramImage {
        margin: 20px 0 24px;
        max-width: 100%;
    }

    .magicappButton {
        display: block;
        margin-top: 24px;
    }

    .supportRow {
        grid-template-columns: 1fr;
        width: 100%;
        padding: 0;
        margin-bottom: 24px;
    }

    .supportRow h3 {
        font-size: 1em;
        margin-bottom: 12px;
    }

    .supportRow li {
        list-style-position: inside;
    }

    .supportSingle {
        margin-bottom: 0;
        padding: 0;
    }

    .supportRowContent button, .supportRowContent .button {
        margin-bottom: 24px;
    }

    .testimonialWrap {
        padding: 12px 24px;
        grid-template-columns: 1fr;
        grid-column-gap: 0;
        margin-bottom: 24px;
    }

    .testimonialWrap.lessBotMargin {
        margin-bottom: 12px;
    }

    .testimonialRight {
        grid-template-columns: 1fr;
    }

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

    .testimonialRight .testimonialImage {
        order: 1;
    }

    .testimonialImage img {
        width: 50px;
        margin-bottom: 12px;
        border-radius: 50%;
    }

    .testimonialImage h3 {
        font-size: 14px;
        margin-bottom: 12px;
        width: 100%;
    }

    .testimonialImage p {
        font-size: 12px;
    }

    .testimonialText {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .testimonialText p {
        color: #666;
        font-size: 16px;
        line-height: 1.4em;
        margin-bottom: 1em;
        /*font-family: Times, 'Times New Roman', serif;*/
        font-style: italic;
    }

    .researchTop {
        margin-bottom: 24px;
    }

    .teamLeadership, .teamLeadershipBottom {
        grid-template-columns: 1fr;
        grid-column-gap: 0;
        justify-content: center;
    }

    .teamLeadership {
        width: 100%;
        margin-bottom: 24px;
    }

    .leadershipIntro {
        font-size: 1em;
    }

    .teamBottom {
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 24px;
        margin-bottom: 24px;
    }

    .profileWrap {
        grid-template-columns: 1fr;
        grid-column-gap: 0;
        text-align: center;
        justify-self: center;
        margin-bottom: 12px;
    }

    .profileWrap img {
        margin: 0 auto 8px;
    }

    .profileWrap p {
        max-width: 75%;
        text-align: center;
        margin: 0 auto 8px;
    }

    .profileInfo {
        margin-bottom: 0;
    }

    .leader .profilePic {
        margin: 0 auto 8px;
    }

    .leader {
        margin: 0 auto 20px;
    }

    .leader img {
        width: 100%;
        margin: 0 auto;
    }

    dialog {
        width: calc(100% - 100px);
        padding: 48px 20px 12px;
    }

    .leaderDialogContent {
        grid-template-columns: 1fr;
    }

    .dialogClose {
        top: 12px;
    }

    .showcaseBlock {
        grid-template-columns: 1fr;
        grid-column-gap: 0;
        grid-row-gap: 0;
        padding: 0 12px 20px;
    }

    .showcaseBlock h3 {
        text-align: center;
    }

    .showcaseBlock img {
        width: 75%;
        margin: 0 auto;
    }

    .blockRight img {
        order: 1;
    }

    .diagramImage {
        width: 75%;
        margin: 12px auto 24px;
    }

    .magicSignupWrap {
        grid-template-columns: 1fr;
        grid-column-gap: 0;
        width: 90%;
        margin: 0 auto;
    }

    .magicSignupWrap  h2, .signupButtonWrap {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    .magicSignupItem {
        grid-template-columns: 20px 72px;
        margin: 0 auto;
    }

    .magicSignupItem p {
        padding-left: 0;
    }

    .signupArrow {
        margin: 24px auto;
        transform: rotate(90deg);
    }

    .signupArrow {
        font-size: 2em;
    }
}