﻿html {
    font-size: 75%;
}

* {
    min-height: .01px;
}

body {
    background: #fff;
    color: #000;
    font-family: "Roboto",sans-serif;
    font-size: 1rem;
}

a {
    color: #004eff;
}

footer {
    background-color: #191970;
    color: #fff;
}

    footer .logo-panel {
        margin-bottom: 25px;
    }

    footer .social-icons a {
        color: #fff;
    }

        footer .social-icons a:hover {
            color: #91c478;
        }

    footer .uol-logo-panel {
        margin-bottom: 25px;
    }

    footer .social-icons-panel {
        margin-bottom: 25px;
    }

    footer .footer-links a {
        margin-right: 15px;
        color: #fff;
    }

@media(min-width:576px) {
    footer .logo-panel {
        padding-bottom: 25px;
    }

    footer .footer-logo {
        margin-bottom: 0;
    }

    footer .uol-logo-panel {
        margin-bottom: 25px;
    }

    footer .social-icons-panel {
        margin: 0;
    }
}

.title-1 {
    font-family: "Roboto",sans-serif;
    font-size: 2.5rem;
    color: #191970;
}

.title-2 {
    font-family: "Roboto",sans-serif;
    font-weight: 900;
    font-size: 2.2rem;
    color: #000;
}

.trials-cards a {
    color: #fff;
    font-size: 1.2rem;
}

.trials-cards .card-img-top {
    object-fit: cover;
}

.trials-cards .cancer-trials h5.card-title {
    color: #191970;
}

.trials-cards .cancer-trials .card-footer {
    background-color: #191970;
}

.trials-cards .paeds h5.card-title {
    color: #006994;
}

.trials-cards .paeds .card-footer {
    background-color: #007a59;
}

.trials-cards .clinical-specialties h5.card-title {
    color: #007a59;
}

.trials-cards .clinical-specialties .card-footer {
    background-color: #006994;
}

@media(min-width:768px) {
    .title-2 {
        font-size: 2.9rem;
    }
}

.highlight {
    background-color: #ff0;
}

.bg-white-smoke {
    background-color: #f2f2f2;
}

.p-50 {
    padding: 50px;
}

.pl-50 {
    padding-left: 50px;
}

.pr-50 {
    padding-right: 50px;
}

.pb-50 {
    padding-bottom: 50px;
}

.btn-primary:hover {
    color: #ff0;
}

.btn-outline-primary {
    border-radius: 7px;
    color: #191970;
    border-color: #191970;
}

    .btn-outline-primary:hover {
        color: #fff !important;
        border-color: #191970;
        background-color: #191970;
    }

.gw-fanbackground {
    background-image: url("../Images/wgfanbackground.png");
    background-repeat: no-repeat;
    background-size: contain;
}

.g-fanbackground {
    background-image: url("../Images/fan-bg-transparent.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.navbar {
    background-color: #191970 !important;
    font-family: 'Roboto',sans-serif;
}

    .navbar .navbar-brand {
        color: #fff;
    }

        .navbar .navbar-brand #site-logo {
            width: 100px;
            margin: 10px;
            max-width: 100%;
            flex-shrink: 0;
        }

        .navbar .navbar-brand .app-icon {
            padding-right: 15px;
        }

    .navbar #uol-logo {
        width: 200px;
        margin: 10px;
    }

    .navbar .search-icon {
        color: #fff;
        width: 30px;
    }

    .navbar .nav-link {
        color: #fff;
        font-size: 1.4rem;
        font-weight: 100;
        text-transform: uppercase;
    }

    .navbar .navbar-nav li:not(:last-child) a {
        margin-right: 25px;
    }

    .navbar .navbar-toggler-icon {
        color: #fff;
        position: relative;
        top: 5px;
    }

.dark-overlay {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(10,10,44,.8);
}

#home {
    background-color: #34467b;
}

    #home .header {
        padding-top: 99px;
    }

        #home .header .jumbotron {
            border-radius: 0;
            background-image: url("../Images/UoL Campus 1.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            height: 300px;
            margin-bottom: 0;
        }

            #home .header .jumbotron .hero-text-panel {
                padding: 25px;
                background-color: rgba(0,92,115,.7);
                width: 100%;
                color: #fff;
            }

                #home .header .jumbotron .hero-text-panel .hero-header {
                    font-size: 2.2rem;
                    font-family: "Roboto",sans-serif;
                    font-weight: 800;
                    font-style: italic;
                }

                #home .header .jumbotron .hero-text-panel .hero-lead {
                    font-size: 1.8rem;
                    font-family: "Roboto",sans-serif;
                    font-weight: 100;
                    font-style: italic;
                }

@media(min-width:576px) {
    #home .header .jumbotron {
        height: 410px;
        background-position-y: 0;
    }

        #home .header .jumbotron .hero-text-panel {
            position: relative;
            top: 40px;
            padding: 25px;
            background-color: rgba(0,92,115,.7);
            width: 400px;
            color: #fff;
        }
}

@media(min-width:768px) {
    #home .header .jumbotron {
        height: 400px;
        background-position-y: -40px;
    }

        #home .header .jumbotron .hero-text-panel {
            position: relative;
            top: 100px;
        }
}

@media(min-width:992px) {
    #home .header .jumbotron {
        height: 500px;
        background-position-y: -150px;
    }

        #home .header .jumbotron .hero-text-panel {
            position: relative;
            top: 140px;
            padding: 25px;
            background-color: rgba(0,92,115,.7);
            width: 400px;
            color: #fff;
        }

            #home .header .jumbotron .hero-text-panel .hero-header {
                font-size: 2.8rem;
                font-family: "Roboto",sans-serif;
                font-weight: 800;
                font-style: italic;
            }

            #home .header .jumbotron .hero-text-panel .hero-lead {
                font-size: 2.2rem;
                font-family: "Roboto",sans-serif;
                font-weight: 100;
                font-style: italic;
            }
}

@media(min-width:1200px) {
    #home .header .jumbotron {
        height: 600px;
        background-position-y: -150px;
    }

        #home .header .jumbotron .hero-text-panel {
            position: relative;
            top: 150px;
        }
}

#home #main .home-logo {
    width: 300px;
}

#home #main h1.title-1 {
    font-size: 2.2rem;
}

#home #main .lead {
    margin: auto;
    font-size: 1.4rem;
    color: #191970;
    width: 80%;
}

#home #main .read-more-button {
    font-family: "Roboto",sans-serif;
    font-size: 1.3rem;
}

@media(min-width:768px) {
    #home #main .lead {
        margin: auto;
        font-size: 1.8rem;
        color: #191970;
        width: 80%;
    }

    #home #main .read-more-button {
        font-family: "Roboto",sans-serif;
        font-size: 1.7rem;
    }
}

#collaborate-section {
    margin-top: 25px;
    margin-bottom: 25px;
}

    #collaborate-section .dark-overlay {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        background: rgba(25,25,112,.7);
    }

    #collaborate-section .collaborate-background {
        background-image: url("../Images/People looking at scan.png");
        background-repeat: no-repeat;
        background-size: cover;
        height: 350px;
    }

    #collaborate-section .collaborate-box {
        padding: 50px;
        height: 100%;
    }

    #collaborate-section .lead {
        font-family: "Roboto",sans-serif;
        font-size: 1.8rem;
        font-weight: 100;
        margin-top: 30px;
    }

    #collaborate-section .action-button {
        font-family: "Roboto",sans-serif;
        font-size: 1.4rem;
        background-color: #006994;
        border-color: #006994;
        padding: 10px;
        border-radius: 7px;
    }

@media(min-width:768px) {
    #collaborate-section .collaborate-box {
        padding: 50px;
        height: 100%;
    }

    #collaborate-section .lead {
        font-family: "Roboto",sans-serif;
        font-size: 2.2rem;
        font-weight: 100;
        margin-top: 30px;
        margin-bottom: 0;
    }

    #collaborate-section .action-button {
        font-family: "Roboto",sans-serif;
        font-size: 1.9rem;
        background-color: #006994;
        border-color: #006994;
        padding: 10px;
        border-radius: 7px;
    }
}

#featured-course-section {
    margin-top: 25px;
    margin-bottom: 25px;
}

    #featured-course-section h3, #featured-course-section p, #featured-course-section li {
        color: #fff;
    }

    #featured-course-section p, #featured-course-section li {
        font-size: 1.2rem;
    }

    #featured-course-section .background {
        background-color: #007a59;
    }

    #featured-course-section .lead {
        font-family: "Roboto",sans-serif;
        font-size: 1.8rem;
        font-weight: 100;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    #featured-course-section a {
        color: #ececf7;
    }

    #featured-course-section .action-button {
        font-family: "Roboto",sans-serif;
        font-size: 1.3rem;
        background-color: #91c478;
        border-color: #91c478;
        padding: 10px;
        border-radius: 7px;
        color: #000;
    }

#sap-checklist-section {
    margin-top: 25px;
    margin-bottom: 25px;
}

    #sap-checklist-section h3, #sap-checklist-section p, #sap-checklist-section li {
        color: #fff;
    }

    #sap-checklist-section p, #sap-checklist-section li {
        font-size: 1.2rem;
    }

    #sap-checklist-section .background {
        background-color: #006994;
    }

    #sap-checklist-section .lead {
        font-family: "Roboto",sans-serif;
        font-size: 1.8rem;
        font-weight: 100;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    #sap-checklist-section a {
        color: #e6e6fa;
    }

    #sap-checklist-section .action-button {
        font-family: "Roboto",sans-serif;
        font-size: 1.3rem;
        background-color: #41516b;
        border-color: #41516b;
        padding: 10px;
        border-radius: 7px;
        color: #fff;
    }

#our-trials .trials-cards a {
    color: #fff;
    font-size: 1.2rem;
}

#our-trials .trials-cards .card-img-top {
    height: 200px;
    object-fit: cover;
}

#our-trials .trials-cards .cancer-trials h5.card-title {
    color: #191970;
}

#our-trials .trials-cards .cancer-trials .card-footer {
    background-color: #191970;
}

#our-trials .trials-cards .paeds h5.card-title {
    color: #006994;
}

#our-trials .trials-cards .paeds .card-footer {
    background-color: #007a59;
}

#our-trials .trials-cards .clinical-specialties h5.card-title {
    color: #007a59;
}

#our-trials .trials-cards .clinical-specialties .card-footer {
    background-color: #006994;
}

@media(min-width:768px) {
    #our-trials .trials-cards a {
        color: #fff;
        font-size: 1.2rem;
    }

    #our-trials .trials-cards .card-img-top {
        object-fit: cover;
    }

    #our-trials .trials-cards .cancer-trials h5.card-title {
        color: #191970;
    }

    #our-trials .trials-cards .cancer-trials .card-footer {
        background-color: #191970;
    }

    #our-trials .trials-cards .paeds h5.card-title {
        color: #006994;
    }

    #our-trials .trials-cards .paeds .card-footer {
        background-color: #007a59;
    }

    #our-trials .trials-cards .clinical-specialties h5.card-title {
        color: #007a59;
    }

    #our-trials .trials-cards .clinical-specialties .card-footer {
        background-color: #006994;
    }
}

#our-tweets {
    background-color: #006994;
    background-image: url("../Images/twitter-back.png");
    background-repeat: no-repeat;
    background-size: cover;
}

    #our-tweets a {
        color: #000;
    }

    #our-tweets .title-2 {
        color: #fff;
    }

    #our-tweets .twitter-lctc-logo {
        width: 24px;
        height: auto;
        margin-right: 15px;
    }

    #our-tweets .twitter-header {
        font-size: .8rem;
    }

    #our-tweets .fa-twitter {
        color: #38a1f3;
    }

    #our-tweets .card {
        border-radius: 0;
    }

    #our-tweets .card-footer {
        color: #808080;
    }

    #our-tweets .card-deck {
        margin: 0 -15px;
        justify-content: space-between;
    }

        #our-tweets .card-deck .card {
            margin: 0 0 1rem;
        }

@media(min-width:576px) {
    #our-tweets .card-deck .card {
        -ms-flex: 0 0 48.7%;
        flex: 0 0 48.7%;
    }
}

@media(min-width:768px) {
    #our-tweets .card-deck .card {
        -ms-flex: 0 0 32%;
        flex: 0 0 32%;
    }
}

@media(min-width:992px) {
    #our-tweets .card-deck .card {
        -ms-flex: 0 0 24%;
        flex: 0 0 24%;
    }
}

#ppi-section .title-2 {
    line-height: 2.4rem;
}

#ppi-section .ppi-background {
    background-image: url("../Images/crowd-2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

#ppi-section .left-panel {
    background-color: rgba(0,122,89,.9);
}

    #ppi-section .left-panel .lead {
        font-family: "Roboto",sans-serif;
        font-size: 2rem;
        font-weight: 100;
        margin-top: 30px;
        margin-bottom: 30px;
        line-height: 2.5rem;
    }

    #ppi-section .left-panel .action-button {
        font-family: "Roboto",sans-serif;
        font-size: 1.3rem;
        font-weight: 400;
        background-color: #91c478;
        border-color: #91c478;
        color: #000;
    }

#contact-us-section .contact-us-background {
    background-image: url("../Images/bbfanbackground.png");
    background-repeat: no-repeat;
    background-size: cover;
}

#contact-us-section .contact-us-alt-background {
    background-color: rgba(0,122,89,.9);
}

#contact-us-section .lead {
    position: relative;
    left: 50px;
    font-family: "Roboto",sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    margin-top: 30px;
    margin-bottom: 30px;
}

    #contact-us-section .lead i {
        font-size: 2.2rem;
        margin-right: 10px;
    }

    #contact-us-section .lead a {
        color: #fff;
    }

#contact-us-section form input, #contact-us-section form textarea {
    border-radius: 10px;
    border: none;
}

#contact-us-section form label {
    color: #fff;
    font-size: 1.2rem;
}

#contact-us-section form .form-check-label {
    padding-left: 10px;
}

#contact-us-section form .form-check {
    padding-bottom: 5px;
}

#supported-by {
    background-color: #fff;
}

    #supported-by .sponsor-image {
        margin: 15px;
    }

        #supported-by .sponsor-image img {
            width: 100%;
        }

#about {
    background-color: #41516b;
}

    #about .header {
        padding-top: 99px;
    }

        #about .header .jumbotron {
            border-radius: 0;
            background-image: url("../Images/about-back.png");
            background-repeat: no-repeat;
            background-size: cover;
            height: 250px;
            margin-bottom: 0;
            background-color: #007a59;
        }

            #about .header .jumbotron .hero-text-panel {
                text-align: right;
                padding: 50px;
                color: #fff;
            }

                #about .header .jumbotron .hero-text-panel .hero-header {
                    font-size: 2.8rem;
                    font-family: "Roboto",sans-serif;
                    font-weight: 900;
                    font-style: italic;
                }

                #about .header .jumbotron .hero-text-panel .hero-lead {
                    font-size: 2rem;
                    font-family: "Roboto",sans-serif;
                    font-weight: 100;
                    font-style: italic;
                }

    #about .main {
        background-color: #fff;
    }

        #about .main .what-we-content .what-we-are-image {
            width: 100%;
            margin-bottom: 15px;
        }

        #about .main .what-we-content p, #about .main .what-we-content li {
            font-family: "Roboto",sans-serif;
            font-size: 1.2rem;
        }

        #about .main .what-you-should-panel {
            background-color: #d3d3d3;
        }

            #about .main .what-you-should-panel h2 {
                font-size: 2.5rem;
                font-weight: 400;
            }

        #about .main p.speech {
            max-width: 255px;
            word-wrap: break-word;
            margin-bottom: 12px;
            line-height: 24px;
            position: relative;
            padding: 10px 20px;
            border-radius: 25px;
            font-size: 1.5rem;
            font-weight: 400;
        }

            #about .main p.speech:before, #about .main p.speech:after {
                content: "";
                position: absolute;
                bottom: -2px;
                height: 20px;
            }

        #about .main .speech {
            color: #fff;
            background: #166cf6;
            align-self: flex-end;
        }

            #about .main .speech:before {
                right: -7px;
                border-right: 20px solid #166cf6;
                border-bottom-left-radius: 16px 14px;
                transform: translate(0,-2px);
            }

            #about .main .speech:after {
                right: -56px;
                width: 26px;
                background: #d3d3d3;
                border-bottom-left-radius: 10px;
                transform: translate(-30px,-2px);
            }

#ways-to-work-with-us .ways-to-work-with-us-background {
    background-color: #41516b;
}

#ways-to-work-with-us .service-icon {
    color: #fff;
    margin-bottom: 10px;
}

#ways-to-work-with-us .service-title {
    color: #fff;
    font-weight: 200;
    font-size: 2rem;
}

#ways-to-work-with-us .service-para {
    color: #fff;
    font-weight: 400;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

#our-team-section {
    background-color: #fff;
}

    #our-team-section .lead {
        font-weight: 200;
        font-size: 2rem;
    }

    #our-team-section p.intro {
        font-size: 1.2rem;
    }

    #our-team-section .team-title {
        font-family: "Roboto",sans-serif;
        font-size: 4rem;
        font-weight: 300;
        color: #007a59;
    }

        #our-team-section .team-title a:hover {
            text-decoration: none;
        }

    #our-team-section .profile-title {
        font-family: "Roboto",sans-serif;
        font-size: 1.5rem;
        font-weight: 400;
        color: #000;
    }

    #our-team-section .profile-job-title {
        font-family: "Roboto",sans-serif;
        font-size: 1.4rem;
        font-weight: 400;
        font-style: italic;
        color: #000;
    }

    #our-team-section .profile-image {
        width: 200px;
        height: 200px;
        position: relative;
        overflow: hidden;
        background-size: cover;
        display: block;
        border-radius: 100px;
        border: solid 2px #191970;
    }

#ppi {
    background-color: #007a59;
}

    #ppi .header {
        padding-top: 99px;
    }

        #ppi .header .jumbotron {
            border-radius: 0;
            background-image: url("../Images/ppi-back.png");
            background-repeat: no-repeat;
            background-size: cover;
            height: 250px;
            margin-bottom: 0;
            background-color: #006994;
        }

            #ppi .header .jumbotron .hero-text-panel {
                text-align: right;
                padding: 50px;
                color: #fff;
            }

                #ppi .header .jumbotron .hero-text-panel .hero-header {
                    font-size: 2.8rem;
                    font-family: "Roboto",sans-serif;
                    font-weight: 900;
                    font-style: italic;
                }

                #ppi .header .jumbotron .hero-text-panel .hero-lead {
                    font-size: 2rem;
                    font-family: "Roboto",sans-serif;
                    font-weight: 100;
                    font-style: italic;
                }

    #ppi .main .main-image {
        width: 100%;
        object-fit: cover;
        height: 300px;
    }

    #ppi .lead {
        font-size: 2rem;
    }

    #ppi p {
        font-size: 1.3rem;
    }

    #ppi .inline-image {
        margin-top: 40px;
        margin-bottom: 40px;
    }

#collaborate {
    background-color: #006994;
}

    #collaborate .header {
        padding-top: 99px;
    }

        #collaborate .header .jumbotron {
            border-radius: 0;
            background-image: url("../Images/ppi-back.png");
            background-repeat: no-repeat;
            background-size: cover;
            height: 250px;
            margin-bottom: 0;
            background-color: #006994;
        }

            #collaborate .header .jumbotron .hero-text-panel {
                text-align: right;
                padding: 50px;
                color: #fff;
            }

                #collaborate .header .jumbotron .hero-text-panel .hero-header {
                    font-size: 2.8rem;
                    font-family: "Roboto",sans-serif;
                    font-weight: 900;
                    font-style: italic;
                }

                #collaborate .header .jumbotron .hero-text-panel .hero-lead {
                    font-size: 2rem;
                    font-family: "Roboto",sans-serif;
                    font-weight: 100;
                    font-style: italic;
                }

    #collaborate p.lead {
        font-size: 2rem;
    }

    #collaborate .box-header {
        background-image: url("../Images/collab-box.png");
        background-size: cover;
        background-repeat: no-repeat;
        height: 150px;
        text-align: center;
        vertical-align: middle;
        color: #fff;
        font-size: 2.7rem;
        font-weight: 300;
    }

        #collaborate .box-header .box-title {
            position: relative;
            top: 40px;
        }

    #collaborate .box-detail {
        border: solid 1px #91c478;
        padding: 25px;
        background-color: #fff;
        font-size: 1.2rem;
    }

        #collaborate .box-detail .lead {
            font-weight: 300;
            font-size: 1.6rem;
        }

    #collaborate .fellowship-header .box-header {
        background-image: url("../Images/fellowships-box.png");
    }

    #collaborate .fellowship-header .box-detail {
        border: solid 1px #007a59;
    }

    #collaborate .adoption-header .box-header {
        background-image: url("../Images/adoption-box.png");
    }

        #collaborate .adoption-header .box-header .box-title {
            position: relative;
            top: 25px;
        }

    #collaborate .adoption-header .box-detail {
        border: solid 1px #006994;
    }

    #collaborate .service-header .box-header {
        background-image: url("../Images/service-box.png");
    }

        #collaborate .service-header .box-header .box-title {
            position: relative;
            top: 25px;
        }

    #collaborate .service-header .box-detail {
        border: solid 1px #191970;
    }

    #collaborate .data-header .box-header {
        background-image: url("../Images/data-box.png");
    }

        #collaborate .data-header .box-header .box-title {
            position: relative;
            top: 25px;
        }

    #collaborate .data-header .box-detail {
        border: solid 1px #006994;
    }

#our-team {
    background-color: #41516b;
}

    #our-team .header {
        padding-top: 99px;
    }

        #our-team .header .jumbotron {
            border-radius: 0;
            background-image: url("../Images/about-back.png");
            background-repeat: no-repeat;
            background-size: cover;
            height: 250px;
            margin-bottom: 0;
            background-color: #007a59;
        }

            #our-team .header .jumbotron .hero-text-panel {
                text-align: right;
                padding: 50px;
                color: #fff;
            }

                #our-team .header .jumbotron .hero-text-panel .hero-header {
                    font-size: 2.8rem;
                    font-family: "Roboto",sans-serif;
                    font-weight: 900;
                    font-style: italic;
                }

                #our-team .header .jumbotron .hero-text-panel .hero-lead {
                    display: block;
                    margin-left: auto;
                    width: 50%;
                    font-size: 2rem;
                    font-family: "Roboto",sans-serif;
                    font-weight: 100;
                    font-style: italic;
                }

    #our-team .main {
        background-color: #fff;
    }

    #our-team .lead {
        font-weight: 200;
        font-size: 2rem;
    }

    #our-team p, #our-team li {
        font-size: 1.5rem;
        font-weight: 300;
    }

    #our-team li {
        margin-bottom: 15px;
    }

    #our-team .team-title {
        font-family: "Roboto",sans-serif;
        font-size: 4rem;
        font-weight: 200;
        color: #007a59;
    }

        #our-team .team-title a:hover {
            text-decoration: none;
        }

    #our-team .profile-title {
        font-family: "Roboto",sans-serif;
        font-size: 1.5rem;
        font-weight: 400;
        color: #000;
    }

    #our-team .profile-job-title {
        font-family: "Roboto",sans-serif;
        font-size: 1.4rem;
        font-weight: 400;
        font-style: italic;
        color: #000;
    }

    #our-team .profile-image {
        width: 200px;
        height: 200px;
        position: relative;
        overflow: hidden;
        background-size: cover;
        display: block;
        border-radius: 100px;
        border: solid 2px #191970;
    }

.card.news .card-img-div:hover .card-img-top {
    cursor: pointer;
}

.card.news a {
    font-family: "Roboto",sans-serif;
    color: #191970;
    font-size: 1.3rem;
}

.card.news h5.card-title {
    font-family: "Roboto",sans-serif;
    font-weight: 900;
}

.card.news .inline-image {
    margin-top: 40px;
    margin-bottom: 40px;
}

.card.news .card-img-top {
    height: 200px;
    object-fit: cover;
}

.card.news a {
    font-family: "Roboto",sans-serif;
    color: #191970;
    font-size: 1.3rem;
}

.card.news h5.card-title {
    font-family: "Roboto",sans-serif;
    font-weight: 900;
}

#news {
    background-color: #91c478;
}

    #news .header {
        padding-top: 99px;
    }

        #news .header .jumbotron {
            border-radius: 0;
            background-image: url("../Images/ppi-back.png");
            background-repeat: no-repeat;
            background-size: cover;
            height: 250px;
            margin-bottom: 0;
            background-color: #006994;
        }

            #news .header .jumbotron .hero-text-panel {
                text-align: right;
                padding: 50px;
                color: #fff;
            }

                #news .header .jumbotron .hero-text-panel .hero-header {
                    font-size: 2.8rem;
                    font-family: "Roboto",sans-serif;
                    font-weight: 900;
                    font-style: italic;
                }

                #news .header .jumbotron .hero-text-panel .hero-lead {
                    font-size: 2rem;
                    font-family: "Roboto",sans-serif;
                    font-weight: 100;
                    font-style: italic;
                }

    #news .main .main-image {
        width: 100%;
        object-fit: cover;
        height: 300px;
    }

    #news .lead {
        font-size: 2rem;
    }

    #news p {
        font-size: 1.3rem;
    }

    #news #results-filters span {
        font-size: 1.5rem;
    }

    #news #results-filters .list-group-item:first-child {
        border-top-left-radius: 1px;
        border-top-right-radius: 1px;
    }

    #news #results-filters .list-group-item {
        position: relative;
        display: block;
        padding: 1rem 1.4rem 1rem 1.4rem;
        margin-bottom: -1px;
        border: 1px solid rgba(0,0,0,.135);
    }

        #news #results-filters .list-group-item a {
            font-size: 1.5rem;
            cursor: pointer;
        }

        #news #results-filters .list-group-item.active {
            z-index: 2;
            color: #fff;
            background-color: #007a59;
            border-color: #007a59;
        }

    #news #results-filters .custom-control-label {
        margin-left: 15px;
    }

        #news #results-filters .custom-control-label::before, #news #results-filters .custom-control-label::after {
            width: 1.7rem;
            height: 1.7rem;
            position: absolute;
            left: -2.5rem;
            top: 0;
        }

    #news #results-filters .pagination {
        font-size: .9rem;
    }

#page-controls .pagination--left, #page-controls .pagination--right {
    width: 44px;
    background-color: #fff;
}

#page-controls .btn {
    border-radius: 1px;
    padding: 10px;
}

#news-article {
    background-color: #91c478;
    padding-top: 99px;
}

    #news-article .meta-text {
        font-size: 1.5rem;
    }

    #news-article .lead {
        font-size: 2rem;
    }

    #news-article .content {
        font-size: 1.2rem;
    }

    #news-article .btn--socialsquare {
        font-size: 1.5em;
        width: 2em;
        height: 2em;
        text-align: center;
        padding: 0 .2em;
        line-height: 2em;
    }

        #news-article .btn--socialsquare a {
            color: #191970;
        }

        #news-article .btn--socialsquare:hover {
            background-color: #191970;
            cursor: pointer;
        }

            #news-article .btn--socialsquare:hover a {
                color: #fff;
            }

    #news-article .btn-outline-primary {
        background-color: transparent;
        color: #191970;
        border-radius: 1px;
    }

    #news-article footer {
        color: #000;
        background-color: #fff;
        padding: 25px;
    }

#research {
    background-color: #34467b;
}

    #research .header {
        padding-top: 99px;
    }

        #research .header .jumbotron {
            border-radius: 0;
            background-image: url("../Images/research-back.png");
            background-repeat: no-repeat;
            background-size: cover;
            height: 250px;
            margin-bottom: 0;
            background-color: #006994;
        }

            #research .header .jumbotron .hero-text-panel {
                text-align: right;
                padding: 50px;
                color: #fff;
            }

                #research .header .jumbotron .hero-text-panel .hero-header {
                    font-size: 2.8rem;
                    font-family: "Roboto",sans-serif;
                    font-weight: 900;
                    font-style: italic;
                }

                #research .header .jumbotron .hero-text-panel .hero-lead {
                    font-size: 2rem;
                    font-family: "Roboto",sans-serif;
                    font-weight: 100;
                    font-style: italic;
                }

    #research .main .main-image {
        width: 100%;
        object-fit: cover;
        height: 300px;
    }

    #research .intro-text {
        padding: 15px;
        padding-top: 25px;
        padding-bottom: 25px;
        font-size: 1.8rem;
    }

    #research .search-box {
        background-color: #fff;
        border: 1px solid rgba(0,0,0,.125);
        height: 55px;
        padding-left: 25px;
        padding-right: 25px;
        margin-bottom: 15px;
        position: relative;
    }

        #research .search-box #keyword-searchbox {
            padding-left: 15px;
            padding-right: 15px;
            display: block;
            width: 100%;
            font-size: 1.8rem;
            font-weight: 300;
            border-radius: 15px;
            border: 1px solid transparent;
            background-color: rgba(0,0,0,.125);
        }

        #research .search-box:before {
            content: "";
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            text-decoration: inherit;
            color: #a9a9a9;
            font-size: 24px;
            padding-right: 1.85em;
            position: absolute;
            top: 9px;
            right: 0;
        }

    #research .lead {
        font-size: 2rem;
    }

    #research p {
        font-size: 1.3rem;
    }

    #research #results-filters {
        color: #191970;
    }

        #research #results-filters span {
            font-size: 1.4rem;
        }

        #research #results-filters .list-group-item:first-child {
            border-top-left-radius: 1px;
            border-top-right-radius: 1px;
        }

        #research #results-filters .list-group-item {
            position: relative;
            display: block;
            padding: 1rem 1.4rem 1rem 1.4rem;
            margin-bottom: -1px;
            border: 1px solid rgba(0,0,0,.135);
        }

            #research #results-filters .list-group-item a {
                font-size: 1.4rem;
                cursor: pointer;
            }

            #research #results-filters .list-group-item.active {
                z-index: 2;
                color: #fff;
                background-color: #007a59;
                border-color: #007a59;
            }

        #research #results-filters .custom-control-label {
            margin-left: 15px;
        }

            #research #results-filters .custom-control-label::before, #research #results-filters .custom-control-label::after {
                width: 1.7rem;
                height: 1.7rem;
                position: absolute;
                left: -2.5rem;
                top: 0;
            }

        #research #results-filters .filter-height-restriction {
            max-height: 15rem;
            overflow-x: hidden;
            overflow-y: scroll;
        }

        #research #results-filters .pagination {
            font-size: .9rem;
        }

    #research .page-text {
        font-size: 1.2rem;
    }

    #research .card.trials {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

        #research .card.trials .card-img-top {
            height: 150px;
            object-fit: contain;
        }

        #research .card.trials .cancer {
            color: #191970;
        }

        #research .card.trials .paediatric {
            color: #007a59;
        }

        #research .card.trials .default {
            color: #006994;
        }

        #research .card.trials h5.card-title {
            font-size: 1.8rem;
        }

        #research .card.trials p.card-text {
            font-size: .9rem !important;
            text-align: justify;
        }

        #research .card.trials .status-red {
            background-color: #f00;
            color: #fff;
        }

        #research .card.trials .status-amber {
            background-color: #ffbf00;
        }

            #research .card.trials .status-amber a {
                color: #000 !important;
            }

        #research .card.trials .status-orange {
            background-color: #ffa500;
        }

            #research .card.trials .status-orange a {
                color: #000 !important;
            }

        #research .card.trials .status-dark {
            background-color: #000;
            color: #fff;
        }

        #research .card.trials .status-blue {
            background-color: #6495ed;
            color: #fff;
        }

        #research .card.trials .status-blue {
            background-color: #6495ed;
            color: #fff;
        }

        #research .card.trials .status-dark {
            background-color: #000;
            color: #fff;
        }

        #research .card.trials .status-green {
            background-color: #007a59;
            color: #fff;
        }

        #research .card.trials .status-none {
            background-color: rgba(10,10,44,.8);
            color: #000;
        }

        #research .card.trials .card-footer {
            font-family: "Roboto",sans-serif;
        }

            #research .card.trials .card-footer a {
                font-size: 1.2rem;
                color: #fff;
            }

#study {
    background-color: #34467b;
}

    #study .header {
        padding-top: 99px;
    }

        #study .header .jumbotron {
            border-radius: 0;
            background-image: url("../Images/research-back.png");
            background-repeat: no-repeat;
            background-size: cover;
            height: 250px;
            margin-bottom: 0;
            background-color: #006994;
        }

            #study .header .jumbotron .hero-image-panel {
                padding: 50px;
            }

            #study .header .jumbotron .hero-text-panel {
                text-align: right;
                padding: 50px;
                color: #fff;
            }

                #study .header .jumbotron .hero-text-panel .hero-header {
                    font-size: 2.8rem;
                    font-family: "Roboto",sans-serif;
                    font-weight: 900;
                    font-style: italic;
                }

                #study .header .jumbotron .hero-text-panel .hero-lead {
                    font-size: 2rem;
                    font-family: "Roboto",sans-serif;
                    font-weight: 100;
                    font-style: italic;
                }

    #study .study-acronym {
        font-size: 2.4rem;
        font-weight: 800;
    }

    #study .study-title {
        font-size: 1.8rem;
        font-weight: 300;
    }

    #study .study-summary {
        font-size: 1.2rem;
    }

    #study .blue-table {
        width: 100%;
        background-color: #41516b;
        color: #fff;
        font-size: 1.5rem;
    }

    #study .grey-table {
        width: 100%;
        background-color: #d3d8db;
        color: #fff;
        font-size: 1.5rem;
    }

        #study .grey-table table tr td:first-child {
            color: #191970;
        }

        #study .grey-table table tr td:last-child {
            color: #000;
        }

    #study table {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    #study td {
        padding-left: 15px;
        padding-right: 15px;
    }

    #study #our-tweets {
        margin-top: 0;
        margin-bottom: 0;
    }

    #study .websites .weblink {
        text-align: center;
        font-size: 1.3rem;
        color: #6798ac;
    }

        #study .websites .weblink .weblink-icon {
            width: 9vw;
        }

    #study .websites .funderlink {
        text-align: center;
        font-size: 1.3rem;
        color: #4db27c;
    }

        #study .websites .funderlink .weblink-icon {
            width: 9vw;
        }

    #study .publications {
        font-size: 1.2rem;
    }

#site-map, #privacy, #cookies, #contact-us {
    padding-top: 99px;
}

    #site-map h2, #privacy h2, #cookies h2, #contact-us h2 {
        padding-top: 3rem;
        font-size: 2rem;
    }

    #site-map h3, #privacy h3, #cookies h3, #contact-us h3 {
        font-size: 1.7rem;
    }

    #site-map p.lead, #privacy p.lead, #cookies p.lead, #contact-us p.lead {
        font-size: 1.6rem;
        font-weight: 300;
    }

    #site-map p, #privacy p, #cookies p, #contact-us p {
        font-size: 1.2rem;
    }

    #site-map li, #privacy li, #cookies li, #contact-us li {
        font-size: 1.2rem;
    }

    #site-map table, #privacy table, #cookies table, #contact-us table {
        border: solid 1px #c0c0c0;
        width: 100%;
    }

        #site-map table thead th, #privacy table thead th, #cookies table thead th, #contact-us table thead th {
            padding: 5px;
            background-color: #f5f5f5;
            font-size: 1.5rem;
            border: solid 1px #c0c0c0;
        }

        #site-map table tbody td, #privacy table tbody td, #cookies table tbody td, #contact-us table tbody td {
            font-size: 1.3rem;
            border: solid 1px #c0c0c0;
        }

    #contact-us a {
        color: #000;
        font-size: 1.4rem;
    }

    #contact-us .helpdesk-number {
        font-size: 1.4rem;
    }

.contact-us-response {
    color: #fff;
}

    .contact-us-response p {
        font-size: 1.3rem;
    }

.orgchart {
    display: inline-block;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

    .orgchart, .orgchart ul {
        padding: 0;
        margin: 0;
    }

        .orgchart ul {
            display: flex;
        }

        .orgchart li {
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .orgchart .nodecontent {
            align-self: center;
            position: relative;
            margin: 20px 5px;
        }

        .orgchart .collapsed > ul {
            display: none;
        }

        .orgchart li::before, .orgchart .nodecontent::after, .orgchart .nodecontent::before {
            box-sizing: border-box;
            content: '';
            position: absolute;
            border: 0 solid #ccc;
        }

        .orgchart li:not(:only-child)::before {
            border-top-width: 2px;
            width: 100%;
            height: 20px;
            top: 0;
        }

        .orgchart li:first-child::before {
            width: calc(50% + 1px);
            right: 0;
            border-left-width: 2px;
            border-top-left-radius: 7px;
        }

        .orgchart li:last-child::before {
            width: calc(50% + 1px);
            border-right-width: 2px;
            border-top-right-radius: 7px;
        }

        .orgchart .nodecontent::after, .orgchart .nodecontent::before {
            border-left-width: 2px;
            width: 2px;
            height: 20px;
            left: calc(50% - 1px);
        }

        .orgchart .nodecontent::before {
            top: -20px;
        }

        .orgchart .nodecontent::after {
            bottom: -20px;
        }

        .orgchart li:first-child:not(:only-child) > .nodecontent::before, .orgchart li:last-child:not(:only-child) > .nodecontent::before {
            border-left-width: 0;
        }

        .orgchart .leaf > .nodecontent::after, .orgchart .root > .nodecontent::before, .orgchart .collapsed > .nodecontent::after {
            display: none;
        }

.centered {
    text-align: center;
}

.tiny {
    width: 10px !important;
    height: 10px !important;
}

.top-of-the-chart {
    font-size: 1.2rem !important;
    height: 200px !important;
    width: 200px !important;
}

.org-name {
    font-size: 1.6rem !important;
}

.nodecontent {
    background-color: #191970;
    padding: 10px;
    border-radius: 100%;
    color: #fff;
    height: 150px;
    width: 150px;
    font-size: 1.5rem;
}

    .nodecontent div a {
        color: #fff;
    }

@media(max-width:992px) {
    .top-of-the-chart {
        font-size: 1.1rem !important;
        height: 150px !important;
        width: 150px !important;
    }

    .nodecontent {
        height: 80px;
        width: 80px;
        font-size: 1rem;
    }
}

@media(max-width:1200px) {
    .top-of-the-chart {
        font-size: 1.1rem !important;
        height: 150px !important;
        width: 150px !important;
    }

    .nodecontent {
        height: 100px;
        width: 100px;
        font-size: 1.2rem;
    }
}

.nodecontent:hover {
    background-color: #3cb371;
}

.nodecontent .collapse {
    position: absolute;
    bottom: -15px;
    left: calc(50% - 6px);
    color: #eee;
    background-color: #191970;
    border-radius: 6px;
    height: 12px;
    width: 12px;
    font-size: 12px;
    text-align: center;
}
