/*!
 * PsychoPy Boostrap CSS based on the Modern Business template
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-logomodern-business-nav/blob/master/LICENSE)
 */
@import url("./bootswatch-3.3.7/readable/bootstrap.min.css");
@import url("./bootstrap-sphinx.css");
@import url("https://use.fontawesome.com/releases/v6.6.0/css/all.css");
@import url("https://use.fontawesome.com/releases/v6.6.0/css/brands.css");
@import url("https://use.fontawesome.com/releases/v6.6.0/css/fontawesome.css");
@import url("https://use.fontawesome.com/releases/v6.6.0/css/fontawesome.css");


@font-face {
    font-family: "Monotype Corsiva";
    src: url("fonts/Monotype Corsiva.ttf");
}
@font-face {
    font-family: "Noto Sans";
    src: url("fonts/NotoSans-Regular.ttf");
    font-weight: 400;
}
@font-face {
    font-family: "Noto Sans";
    src: url("fonts/NotoSans-Bold.ttf");
    font-weight: 700;
}
@font-face {
    font-family: "Noto Sans";
    src: url("fonts/NotoSans-Italic.ttf");
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: "Noto Sans";
    src: url("fonts/NotoSans-BoldItalic.ttf");
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/JetBrains Mono-Regular.ttf");
    font-weight: 400;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/JetBrains Mono-Bold.ttf");
    font-weight: 700;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/JetBrains Mono-Italic.ttf");
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/JetBrains Mono-BoldItalic.ttf");
    font-weight: 700;
    font-style: italic;
}

:root {
    /* theme colours */
    --red: #F2545B;
    --blue: #02A9EA;
    --green: #6CCC74;
    --orange: #EC9703;
    --yellow: #F1D302;
    /* background colours */
    --base: #FFFFFF;
    --mantle: #F2F2F2;
    --crust: #E4E4E4;
    --overlay: #D6D6D6;
    --outline: #66666E;

    /* override sphinx */
    --sd-color-primary: var(--blue) !important;
    --sd-color-secondary: var(--red) !important;
    --sd-color-success: var(--green) !important;
    --sd-color-info: var(--blue) !important;
    --sd-color-warning: var(--orange) !important;
    --sd-color-danger: var(--red) !important;
    --sd-color-light: var(--mantle) !important;
    --sd-color-muted: var(--crust) !important;
    --sd-color-dark: var(--outline) !important;
    --sd-color-black: var(--text) !important;
    --sd-color-white: var(--base) !important;
    --sd-color-primary-highlight: var(--red) !important;
    --sd-color-secondary-highlight: var(--yellow) !important;
    --sd-color-light-highlight: var(--crust) !important;
    --sd-color-muted-highlight: var(--overlay) !important;
    --sd-color-dark-highlight: var(--text) !important;
    --sd-color-black-highlight: var(--outline) !important;
    --sd-color-white-highlight: var(--mantle) !important;
    --sd-color-card-border: var(--overlay) !important;
    --sd-color-card-border-hover: var(--blue) !important;
    --sd-color-tabs-label-active: var(--blue) !important;
    --sd-color-tabs-label-hover: var(--text) !important;
    --sd-color-tabs-label-inactive: var(--outline) !important;
    --sd-color-tabs-underline-active: var(--blue) !important;
    --sd-color-tabs-underline-hover: var(--overlay) !important;
    --sd-color-tabs-overline: var(--overlay) !important;
    --sd-color-tabs-underline: var(--overlay) !important;
    --sd-color-shadow: transparent !important;
    --sd-gutter-y: 1.5rem;

    /* text colour */
    --text: #161616;
    --hltext: #FFFFFF;
    /* background-specific text colour */
    --red-text: var(--hltext);
    --blue-text: var(--hltext);
    --green-text: var(--text);
    --orange-text: var(--hltext);
    --yellow-text: var(--text);
    --base-text: var(--text);
    --mantle-text: var(--text);
    --crust-text: var(--text);
    --overlay-text: var(--hltext);
    --outline-text: var(--hltext);

    /* fonts */
    --heading: "Noto Sans";
    --body: "Noto Sans";
    --mono: "JetBrains Mono";
    --gradient: linear-gradient(#4582ec 0%, #fff 100%);
    --theme-color: #66666E;

    /* page width (responsive) */
    --content-width: 1080px;

    /* defaults */
    font-size: 16px;
    font-family: var(--body);
    color: var(--text);
}

body {
    padding-top: 80px;
    color: var(--text);
    background-color: var(--base);
    font-family: var(--body);
}

html, body {
    height: 100%; /* needed for the full-height sections to work*/
}

main {
    position: relative;
}

main > section {
    z-index: 1;
    background-color: var(--base);
    padding: 1rem calc((100% - var(--content-width)) / 2);
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
    font-family: var(--heading);
}
code, 
pre {
    font-family: var(--mono)
}

.sd-btn {
    padding: 1rem;
    border-radius: .75rem;
}

h1, .h1 {
    font-size: 34px;
}
  
h2, .h2 {
    font-size: 28px;
}
  
h3, .h3 {
    font-size: 24px;
}

.column-collapse { /* will convert to row for <768 */
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

img.align-right, .figure.align-right, object.align-right {
    margin-left: 3rem;
}
img.align-left, .figure.align-left, object.align-left {
    margin-right: 3rem;
}

.news-reel {
    position: absolute;
    bottom: calc(100% + 1rem);
    left: 1rem;
    max-width: 420px;
    opacity: 50%;
}
.news-reel:hover {
    opacity: 100%;
}
.news-reel .sd-card {
    background-color: var(--base);
    border: 1px solid var(--overlay);
    /* this will be overwritten by JS */
    display: none;
}
.news-reel .sd-card-title {
    color: var(--red);
}

/* special cases */
blockquote ul {
    font-size: initial;
    margin: -11px -22px;
    margin-left: -22px;
}

blockquote {
    border-left: none;
    padding: 0;
    margin: 0 0 22px;
    font-size: initial;
    /* border-left: 5px solid #4582ec; */
}

/* logos (big and small) in top left */
.large-logo img {
    position: absolute;
    /*top: -84px;*/
    top: 5px;
    left: 10px;
    width: auto;
    max-width: none;
    height: 120px;
}

.small-logo img {
    display: none;
    width: auto;
    height: 60px;
    max-width: none;
    top: 5px;
}

/* Logo with straplines in center of landing page */
.central-logo {
    object-fit: cover;
    align-content: center;
    position: relative;
    width: 90%;
    padding: 2vw;
    height: auto;
}

.central-logo .img-layer {
    position: absolute;
    object-fit: cover;
    top: 25px;
    left: 0px;
    width: 90%;
    height: auto;
}

.central-logo .icon3-layer {
    position: absolute;
    font-family: 'Indie Flower';
    color: var(--red);
    font-size: 8vw;
    top: 2vw;
    left: 83vw;
}

.central-logo .text-layer {
    position: absolute;
    top: 35%;
    left: 40%;
    font-family: sans-serif;
    font-size: 1.8vw;
}

.central-logo .text-layer-abbr {
    position: absolute;
    top: 20%;
    left: 40%;
    font-family: sans-serif;
    font-size: 2.5vw; /*bigger font but few words*/
}

.delay0 {
    opacity: 0;
    animation: fadeIn 2s;
    animation-fill-mode: forwards;
}

.delay1 {
    opacity: 0;
    animation: fadeIn 2s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}

.delay2 {
    opacity: 0;
    animation: fadeIn 2s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

.delay3 {
    opacity: 0;
    animation: fadeIn 2s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
}

.delay4 {
    opacity: 0;
    animation: fadeIn 2s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}
.delay5 {
    opacity: 0;
    animation: fadeIn 2s;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
}

/* plugins */
.navbar-nav > li > a.return-btn {
    border: 1px solid var(--crust);
    border-radius: 5px;
    position: relative;
    font-weight: bold;
}
.navbar-nav > li > a.return-btn::after {
    content: ">";
    font-weight: bold;
    padding-left: 6px;
    color: var(--crust);
}
.navbar-nav > li > a.return-btn:hover {
    border: 1px solid var(--overlay);
}
.navbar-nav > li > a.return-btn:hover::after {
    color: var(--overlay)
}

/* to set a section to be the height of the browser window*/

.full-height {
    height: 100%;
}

.full-height-with-ticker {
    height: 100%;
    overflow: auto;
}

.title-tagline{
    font-size: 150%;
}

.tagline-buttons{
    font-size: 2em;
    font-weight: bold
}

.navbar .container {
    padding-top: 0;
    display: flex;
    justify-content: end;
}
.navbar {
    font-family: var(--heading);
}

.button {
    background-color: var(--blue);
    color: var(--blue-text);
    padding: 1rem;
    border-radius: .75rem;
    text-decoration: none;
}
.button:hover {
    text-decoration: none;
    background: var(--blue) linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25));
    color: var(--blue-text);
}

a {
    color: var(--blue);
    text-decoration: none;
}
.navbar-default .navbar-nav>li>a {
    color: var(--outline);
    text-decoration: none;
}
a:hover,
.navbar-default .navbar-nav>li>a:hover {
    color: var(--red);
    text-decoration: none;
}

/* @media (min-width: 992px) {
  body {
    padding-top: 56px;
  }
} */

.bg-primary a {
    color: white;
    text-decoration: underline;
}
.bg-primary a:hover {
    color: var(--red);
    text-decoration: underline;
}

.carousel-item {
    height: 65vh;
    min-height: 300px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.portfolio-item {
    margin-bottom: 30px;
}

/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */
.social-bar {
    background-color: var(--base);
    position: fixed;
    right: 1rem;
    top: 80px;
    padding: .5rem;
    border-radius: .5rem;
    border: 1px solid var(--overlay);
    z-index: 2;
}

/* Style the icon bar links */
.social-bar a {
    display: block;
    text-align: center;
    transition: all 0.3s ease;
    font-size: 20px;
    padding: 8px;
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
    background-color: #000;
}

.facebook {
    background: white;
    color: #3B5998;
}

.bluesky {
    /* background: white; */
    color: #1185FE;
}

.linkedin {
    /* background: white; */
    color: #0a66c2;
}

.twitter {
    /* background: white; */
    color: #000000;
}

.google {
    /* background: white; */
    color: #dd4b39;
}

.github {
    /* background: white; */
    color: black;
}

.youtube {
    /* background: white; */
    color: #bb0000;
}


/* landing page transitions */

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


/* set our responsive mode controls */

@media (max-width: 1080px) {

    .tagline-buttons{
    font-size: 2em;
    font-weight: bold
    }

    .title-tagline{
        font-size: 150%;
    }

    .navbar .container {
        justify-content: center;
    }

    .large-logo {
        display: none;
    }

    .small-logo img {
        display: block;
    }

    .social-bar {
        display: none;
    }  
    .column-collapse {
        flex-direction: column;
    }

    body {
        padding-top: 80px;
    }

    :root {
        /* alter content width for smaller screens */
        --content-width: 90%;
    }

    .news-reel {
        display: none !important;
    }
}

/* Classes for coloured text (first used in online/status.rst) */
.darkgreen {
  color: darkgreen;
  font-weight: bold;
}

.darkorange {
  color: darkorange;
  font-weight: bold;
}

.darkred {
  color: darkred;
  font-weight: bold;
}

.heroheader {
  font-size: 60px;
}

.footer {
    border-top: 1px solid var(--overlay);
    background-color: var(--mantle);
}

.red_button {
  background-color: var(--red); /* Green */
  font-size: 16px;
  border-radius: 4px;
  border: none;
  color: white;
  padding: 12px 28px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.fade {
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.fade-out {
  opacity: 0;
}

.fade-in {
  opacity: 1;
}