/* EXPERIMENTAL CSS */

    .vertical-nav {
        text-align: left;
        background-color: #e5e4e2;
    }











    /* GLOBAL */


    /* Text Control */

    /* set the font-size to 16px to overide browser defaults; produces similar appearance across browsers */
    html {
        font-size: 16px;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }

    .whitetext {
        font-size: 16px;
        color: #fff
    }


    /* ***Containers*** */

    /* container fluid allows Bootstrap containers to be responsive */
    .container-fluid {
        padding: 1% 8% 1% 6%;
        width: 100%;
    }


    /* fonts used in this version */
    /* Scheme: Poppins - main text; Lato - headers and bullets; Roboto - Infinity name; others are fall-backs*/
    /* .font {
    font-family: 'Lato', sans-serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Poppins', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Lato', 'Montserrat', 'Open Sans', sans-serif;
    font-family: 'Poppins', 'Open Sans', sans-serif;
} */


    /* sets the default for content in the body */
    body {
        font-family: 'Poppins', 'Open Sans', sans-serif;
        font-weight: 400;
        text-align: center;
        color: #000000;
    }



    /* sets the default to standardise headers */
    h1,
    h3,
    h4,
    h5,
    h6 {
        font-family: 'Lato', 'Open Sans', sans-serif;
        font-weight: 700;
    }

    /* controls the h2 heading on price cards */
    h2 {
        font-family: 'Lato', 'Open Sans', sans-serif;
        font-size: 1.7rem;
        font-weight: 700;
    }

    /* default settings for p elements */
    p {
        font-size: 0.9rem;
        font-family: 'Poppins', 'Open Sans', sans-serif;
    }

    /* the 'none' value prevents bullet points displaying */
    ol {
        list-style-type: none;
    }


    .dropdown-list-style {
        font-family: 'Lato', 'Open Sans', sans-serif;
        font-weight: 700;
        font-size: 1.05rem;
    }


    /* Scrolling behaviour */
    /* controls 'jump-to position' on home page */
    .scroll-home {
        scroll-margin-top: 88px;
    }

    /* controls 'jump-to position' on 'more-detail' page */
    .scroll-detail {
        scroll-margin-top: 47px;
    }


    /* overides default to align text left */
    .text-left {
        text-align: left;
        line-height: 1.7;
    }


    /* Section Heading text control */

    .section-heading {
        text-align: left;
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 1.5;
        padding: 0% 0% 1% 0%;
    }

    /* centres text used with .section-heading */
    .section-heading-centre {
        text-align: center;
    }

    /* controls text in faq header */
    .section-heading-faq {
        font-size: 1.4rem;
        padding: 1.5%;
        text-align: left;
    }

    /* control headings and text in boxes under icons */
    .heading-under-icon {
        font-size: 1.35rem;
        text-align: center;
        /* padding: 2% 0% 2% 0%; */
    }

    .text-under-icon {
        font-weight: 400;
        font-size: 0.9rem;
        line-height: 130%;
        text-align: justify;
        padding: 1% 1% 1% 1%;
    }



    /* controls 'Specialist' text */
    .text-special {
        text-align: left;
        line-height: 1.9;
        padding-bottom: 6%;
    }

    /* Image Control */

    /* responsive images to resize to screen */
    .responsive {
        width: 100%;
        height: auto;
    }

    /* controls appearance of the image within the carousel */
    .carousel-image {
        width: 40%;
        height: 40%;
        padding-bottom: 8%;
    }



    /* Colour Control */

    /* sets the WHITE background colour theme */
    .white-section {
        background-color: #fbfaf5;
        text-align: left;
        padding: 3% 0% 0% 0%;
    }

    /* sets the WHITE background colour theme with CENTRE text*/
    .white-section-centre {
        background-color: #fbfaf5;
        text-align: centre;
        padding: 3% 0% 0% 0%;
    }


    /* sets the BLACK background colour theme */
    .black-section {
        background-color: #0a0703;
        color: #fff;
    }

    /* sets the faq BLACK background colour theme */
    .black-section-faq {
        background-color: #0a0703;
        font-size: 1.8rem;
        font-weight: 700;
        color: #fff;
        float: left;
    }

    /* sets PRICING section background to Grey */
    .grey-section {
        background-color: #E5E4E2;
    }

    /* sets the How it Works background colour theme */
    #how-it-works {
        background-color: #f0f0ef;
        color: #000000;
    }





    /* sets BUTTON background to white theme */
    .contact-white {
        background-color: #fbfaf5;
    }

    /* sets BUTTON background to black theme */
    .contact-black {
        background-color: #000000;
    }

    /* sets BUTTON background to grey theme */
    .contact-grey {
        background-color: #E5E4E2;
    }


    /* Navbar appearance - padding overides */
    .navbar {
        background-color: #fff;
        padding-bottom: 0%;
    }

    /* font-colour for navbar-items; needs to be a separate class to overide Bootstrap default */
    .nav-link {
        color: #000000;
    }

    /* controls illustration carousel appearance */
    .illust-carousel {
        background-color: #fbfbf9;
    }


    /* Icons */
    #icon-on-white {
        text-align: center;
        display: inline-block;
        width: 100%;
        margin-bottom: 1.1rem;
        color: #1c9cf2;
    }

    /* social media icons in footer */
    #white-icon-on-black {
        color: #fff;
    }


    /* Colour on LIGHT for text to Click to go to Internal Pages  */
    .external-link-light {
        color: #ff00aeea;
    }

    /* Colour on DARK for text to Click to go to Internal Pages  */
    .external-link-dark {
        color: #ed17aa;
    }

    /* changes the link text upon hover for better accessibility - dark backgronds */
    .hover-light:hover {
        color: #d50000;
    }

    /* changes the link text upon hover for better accessibility - light backgronds */
    .hover-dark:hover {
        color: #ff0000;
    }


    /* Contact Buttons */

    .btn-danger {
        background-color: #b90005 !important;
        border-color: none !important;
        font-family: 'Poppins', 'Roboto', 'Open Sans', sans-serif !important;
        font-weight: 400;
        font-size: 1rem;
        color: #fff !important;
        transition-property: background-color;
        transition-duration: 1s;
        transition-timing-function: ease-in;


    }

    .btn-danger:hover {
        background-color: #eb0202 !important;
    }

    /* These buttons need their own id's to overide Bootstrap defaults(class doesn't work; id's should have only one instance)(find a better way?)*/

    #main-banner-contact-button {
        float: right;
        /* margin: 0% 0% 0% 100%; */
    }

    .main-bannner-contact-section {
        padding-bottom: 1rem;

    }

    #edit-contact-button {
        float: right;
        /* margin: 0% 0% 0% 10%; */
    }

    #writing-contact-button {
        float: right;
        /* margin: 0% 0% 0% 10%; */
    }

    #illust-contact-button {
        float: right;
        /* margin: 0% 0% 0% 10%; */
    }

    #datavis-contact-button {
        float: right;
        /* margin: 0% 0% 0% 10%; */
    }

    #works-contact-button {
        float: right;
        /* margin: 0% 0% 0% 10%; */
    }

    #price-contact-button {
        float: right;
        /* margin: 0% 0% 0% 10%; */
    }

    #cta-contact-button {
        float: right;
        /* margin: 0% 0% 0% 10%; */
    }





    /* -----SECTION-SPECIFIC LAYOUT ON HOMEPAGE----- */

    /* Top Banner with 'Biomedical science...etc' */

    .biomed-sci-banner {
        font-weight: 700;
        font-size: 0.75rem;
        padding: 0.05rem;
    }


    /* Navigation Bar */


    /* Logo*/
    .logo {
        width: 33%;
        height: auto;
        padding: 2% 4% 3.5% 5%;
        margin: 0% 0% 2% 1%;
    }

    /* infinity name */
    .navbar-brand {
        font-family: "Roboto", "Montserrat", "Open Sans", sans-serif;
        font-size: 3rem;
        font-weight: 700;

    }

    /* clickable words on navbar allow jump to sections - 'Home' 'How it works' 'Prices' 'FAQ'*/
    .navbar-item {
        font-family: "Lato", "Montserrat", "Open Sans", sans-serif;
        font-weight: 700;
        font-size: 1.05rem;
        margin-right: 0.7rem;
    }


    /* 'Services' drop-down button - overides Bootstrap with id# */
    #drop-btn-service {
        font-family: "Lato", "Montserrat", "Open Sans", sans-serif;
        font-weight: 700;
    }

    /* 'More' drop-down button - overides Bootstrap with id# */
    #drop-btn-more {
        font-family: "Lato", "Montserrat", "Open Sans", sans-serif;
        font-weight: 700;
        padding: 0rem 1rem;
        margin-right: 1rem;
    }

    /* appearance of list items in drop-down buttons (Services and More) to jump to sections */
    .dropdown-item {
        font-family: "Lato", "Montserrat", "Open Sans", sans-serif;
        font-size: 0.85rem;
        font-weight: 400;
        padding: 0.3rem;
    }

    /* appearance of the burger bar */
    .navbar-toggler-icon {
        background-color: #fff;
        border-color: #010B13;
    }

    /* strapline 'Editing and...' below navbar */
    .strapline {
        font-family: "Lato", "Montserrat", "Open Sans", sans-serif;
        font-size: 0.85rem;
        font-weight: 700;
        text-align: left;
        margin-left: 1%;
        padding-bottom: 0.35%;
    }



    /* ---Main Banner--- */
    /* Note: wordcloud animation is after footer because it's big */

    .busy-heading-centre {
        font-family: "Lato", "Montserrat", "Open Sans", sans-serif;
        font-weight: 700;
        font-size: 2.1rem;
        line-height: 1.6;
        margin-bottom: 0.5rem;
        text-align: center;
        padding: 0% 0% 3% 0%;
    }

    .here-to-help-heading {
        font-family: "Lato", "Montserrat", "Open Sans", sans-serif;
        font-weight: 700;
        font-size: 2rem;
        margin-bottom: 0.5rem;
        line-height: 1.5;
        text-align: left;
        padding: 3% 0% 0% 10%;
    }

    /* control of main banner list on right side */
    .here-to-help-list {
        font-family: "Lato", "Montserrat", "Open Sans", sans-serif;
        color: #fff;
        text-align: left;
        font-weight: 500;
        font-size: 0.9rem;
        /* line-height: 1.8rem; */
        /* margin: 0.5%; */
        padding: 3% 0% 2% 4%;
    }


    /* 'Specialists in CV science' control  */


    /* sets the background image theme */
    .specialist-container {
        background-image: url("/images/cells.webp");
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: scroll;
        background-position: center center;
        padding: 3% 10% 0% 0%;
        background-color: #CF8AA7;
        color: #fff;
    }




    /* .specialist-container {
    padding: 0%;
    background-color: #CF8AA7;
    color: #fff;
} */

    .specialist-header {
        font-family: "Lato", "Montserrat", "Open Sans", sans-serif;
        text-align: left;
        font-weight: 700;
        font-size: 1.4rem;
    }







    /* Bootstrap Illustration Carousel */

    .illust-carousel {
        background-color: #fbfbf9;
    }

    .illust-carousel .carousel-indicators [data-bs-target]

    /* change indicators to black on a white background */
        {
        background-color: #010B13;
    }

    .illust-slide-label {
        color: #010B13;
        text-align: center;
    }

    #illust-nxt-blk

    /*.carousel-arrow-next is black */
        {
        filter: invert(100%);
    }

    #illust-prev-blk

    /*.carousel-arrow-previous is black */
        {
        filter: invert(100%);
    }


    /* Bootstrap Data Vis carousel on black background */

    .dv-carousel {
        background-color: #010B13;
    }

    #data-vis-carousel {
        background-color: #010B13;
    }

    .slide-label {
        text-align: center;
        font-size: 90%;
    }

    .slide-label-black {
        color: #010B13;
        text-align: center;
        background-color: #fbfbf9;
        font-size: 90%;
    }




    /* Pricing Cards Section */

    /* jump to pricing id */
    #pricing {
        text-align: center;
        padding: 2.5% 0% 0.5% 0%;
    }

    #clear-flex-afford {
        font-size: 2.2rem;
    }


    .card-header {
        color: #010B13;
        font-weight: 0.9rem;
    }


    .card-content {
        font-size: 0.88rem;
    }

    .price-text {
        text-align: center;
        color: #010B13;
        line-height: 1.3;

    }

    .pricing-column {
        padding: 3% 2%;
        font-weight: 0.9rem;
    }


    /* Pricing cards animation... */

    .card {
        overflow: hidden;
    }

    .card:before {
        content: "";
        position: absolute;
        left: 0;
        top: calc(-100% + 5px);
        width: 100%;
        height: 100%;
        background-color: #7c7c7c;
        z-index: 0;
        transition: 1.5s;
    }

    .card:hover:before {
        top: 0;
    }

    .card-header {
        position: relative;
        z-index: 2;
        transition: 0.4s;
    }

    .content {
        position: relative;
        z-index: 2;
        transition: 0.4s;
    }



    .card:hover .content {
        color: #fff;
    }

    .card:hover .card-header {
        color: #fff;
    }

    .card:hover .price-text {
        color: #fff;
    }


    /* How it works section */

    #conf-sec-simp {
        font-size: 1.35rem;
        text-align: center;
        padding: 3% 0% 0% 0%;
    }


    /* CTA */

    /* sets the CTA background image theme */
    .CTA-section {
        background-image: url("/images/cowork.webp");
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center center;
        background-color: #fbfaf5;
        padding: 5% 10% 10% 0%;
    }

    /* makes the Bootstrap CTA card transparent */
    .CTA-card {
        background: transparent;
        border: transparent;
    }

    /* controls the CTA card header text and position */
    .CTA-card-header {
        font-size: 2.2rem;
        color: white;
        margin: 0% 0% 4% 20%;

    }

    /* Controls the CTA card body text and position */
    .CTA-text {
        color: #fff;
        font-size: 1.5rem;
        text-align: justify;
        line-height: 2.3rem;
        margin: 0% 0% 0% 25%;
    }












    /* FAQ Bootstrap Accordion */
    .accordion-item {
        text-align: left;
    }


    /* Footer Section */

    /* controls footer section appearance */
    .footer-section {
        font-family: "Roboto", "Montserrat", "Open Sans", sans-serif;
        background-color: #000000;
        color: #fff;
        font-weight: 400;
        text-align: left;
        padding-bottom: 0.6rem
    }

    /* controls spacing of footer lists */
    #footer-container {
        padding: 0% 5%;
    }

    /* stops footer links from being default blue and controls font size */
    .footer-link {
        color: #fff;
        font-size: 0.8rem;
    }


    /* soc media icons in footer */

    .social-icon {
        margin: 20px 10px;

    }

    @media (max-width: 1028px) {}

    a:link {
        text-decoration: none;
    }

    a:visited {
        text-decoration: none;
    }

    a:hover {
        text-decoration: none;
    }

    a:active {
        text-decoration: none;
    }


    #copyright {
        color: #fff;
        text-align: center;
        font-size: 0.75rem;
        padding: 1%;
    }








    /* Wordcloud animation: */
    svg text.blink {
        animation: blink 2s ease-out;
    }

    #tagi {
        width: 100%;
        margin: 0%;
        border: 0%;
    }

    @keyframes blink {
        0% {
            text-shadow: 0 0 20px rgba(226, 25, 45, 0);
        }

        20% {
            fill: #fff;
            text-shadow: -7px -5px 20px #faa0eb, 7px -5px 20px#faa0eb, 7px 5px 20px #faa0eb, -7px 5px 20px #faa0eb;
        }

        30% {
            fill: #fff;
            text-shadow: -7px -5px 20px #faa0eb, 7px -5px 20px#faa0eb, 7px 5px 20px #faa0eb, -7px 5px 20px #faa0eb;
        }

        100% {
            text-shadow: 0 0 20px #faa0eb;
        }
    }

    .sc0 {
        fill: #000000;
    }

    .sc1 {
        fill: #F3BCFC;
    }

    .sc2 {
        fill: #E080CE;
    }

    .sc3 {
        fill: #CF8AA7;
    }

    .sc4 {
        fill: #FF79E4;
    }

    .sc5 {
        fill: #D955B0;
    }

    .sc6 {
        fill: #CD82D9;
    }

    .sc7 {
        fill: #CA60AA;
    }


    .s15 {
        font-size: 1.14rem;
    }

    .s2 {
        font-size: 1.5rem;
    }

    .s25 {
        font-size: 1.9rem;
    }

    .s3 {
        font-size: 2.3rem;
    }

    .s35 {
        font-size: 2.6rem;
    }

    .s4 {
        font-size: 3rem;
    }

    .s45 {
        font-size: 3.3rem;
    }

    .s5 {
        font-size: 3.7rem;
    }

    .s55 {
        font-size: 4rem;
    }


    .s7 {
        font-size: 4.9rem;
    }

    .ss {
        font-weight: 700;
    }



    /* **---INTERNAL PAGES GLOBAL---** */

    /* Internal pages white body sections */


    /* Internal Pages centred main headers */
    .internal-main-head-centre {
        background: #000000;
        color: #fff;
        font-size: 2rem;
        text-align: center;
        position: center;
        padding: 1.3rem;
    }


    .internal-main-head-centre-terms
    {
        background: #95918A;
        color: #fff;
        font-size: 2rem;
        text-align: center;
        position: center;
        padding: 1.3rem;
    }



    /* Internal Pages main headers */
    .internal-main-head {
        background: #95918A;
        color: #fff;
        text-align: left;
        position: center;
    }

    /* Internal Pages main headers-terms */
    .internal-main-head-terms {
        background: #e5e4e2;
        color: #000000;
        text-align: left;
        position: center;
    }

    /* Internal Pages sub-heads*/
    .internal-sub-head {
        background: #e5e4e2;
        color: #000000;
        text-align: left;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.5;
    }

    /* Internal Pages sub-heads below sub-heads - makes them a bit smaller*/
    .internal-sub-sub-head {
        background: #e5e4e2;
        color: #000000;
        text-align: left;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.2;
    }


    /* sets the WHITE background colour theme specific to internal pages (drops the padding)*/
    .white-section-internal {
        background-color: #fbfaf5;
        text-align: left;
    }



    /* Internal Pages Drop-down Menu */
    .dropdown-menu li {
        position: relative;
    }

    .dropdown-menu .dropdown-submenu {
        display: none;
        position: absolute;
        left: 100%;
        top: -7px;
    }

    .dropdown-menu .dropdown-submenu-left {
        right: 100%;
        left: auto;
    }

    .dropdown-menu>li:hover>.dropdown-submenu {
        display: block;
    }

    .dropdown-hover:hover>.dropdown-menu {
        display: inline-block;
    }

    .dropdown-hover>.dropdown-toggle:active {
        /*Without this, clicking will make it sticky*/
        pointer-events: none;
    }





    /* PAGE SPECIFIC CONTROL */

    /* Sample page */

    /* Sample picture from Word */
    #sample {
        width: 100%;
        height: auto;
        margin: 0% 10% 0% 0%;
    }


    /* Services in Detail page  */


    /* Table of Prices at bottom */


    th {
        text-align: left;
    }

    td {
        text-align: left;
    }


    /*-----Endnotes-----*/

    /* intentionally not left blank */