body {
    font-family: 'Roboto', serif;
}

footer {
    margin-top: 50px;
    border-top: 3px solid #000000;
    padding-top: 25px;
}

.navbar-light .navbar-nav .nav-link {
    font-weight: 600;
}

.navbar-nav .nav-item {
    z-index: 99;
}


.link-primary {
    text-decoration: none;
}

.top-50 {
    margin-top: 50px;
}

.top-30 {
    margin-top: 30px;
}

.text-large {
    font-size: 1.5em;
}

ul.teal-bullets {
    list-style: none; /* Remove default bullets */
}

    ul.teal-bullets li::before {
        content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
        color: #339999; /* Change the color */
        font-weight: bold; /* If you want it to be bold */
        display: inline-block; /* Needed to add space between the bullet and the text */
        width: 1em; /* Also needed for space (tweak if needed) */
        margin-left: -1em; /* Also needed for space (tweak if needed) */
    }

.sitemap-banner {
    background: url(/images/sitemap/sitemap-banner.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.technology-banner {
    background: url(/images/our-technology/technology.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 40px;
}

.pipeline-banner {
    background: url(/images/pipeline/pipeline-banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 40px;
}

.about-banner {
    background: url(/images/about/about-banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 40px;
}

.about-team-banner {
    background: url(/images/about/about-team-banner-eric.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 40px;
}

.leadership-banner {
    background: url(/images/leadership/leadership-banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 40px;
}

.contact-banner {
    background: url(/images/contact/contact-us-image.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 40px;
}

.publications-banner {
    background: url(/images/publications/publications-banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 40px;
}

video {
    position: static;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 500px;
    object-fit: cover;
    z-index: 0;
}


.home-banner-text {
    position: absolute;
    top: 130px;
    left: 50px;
    font-size: 3em;
    font-weight: 400;
    color: white;
    padding: 130px 0px 150px 50px;
    z-index: 0;
}


.teal-background {
    background-color: #ebf8f9;
    padding-bottom: 50px;
}

.banner-text {
    color: white;
    padding: 130px 0px 150px 50px;
}

.banner-header {
    font-size: 3em;
    font-weight: 400;
}

.banner-subheader {
    font-size: 1.6em;
    font-weight: 600;
}

.banner-subheader-small {
    font-size: 1em;
    font-weight: 500;
}

.sitemap-header {
    color: #339999;
    font-weight: 400;
    padding: 20px 0 10px 0;
}

.page-header {
    padding: 20px 0 10px 0;
}

.text-bold {
    font-weight: 600;
}

.text-italic {
    font-style: italic;
}

.text-teal {
    color: #339999;
}

.left-teal-border {
    margin-left: 40px;
    border-left: 5px solid #339999;
}

.contact-form {
    background-color: #ebf8f9;
    padding: 20px;
}

.btn-nanocan {
    background-color: #4c9798;
    color: #ffffff;
}

.form-group {
    margin: 10px 0;
}

.nav-tabs {
    border-bottom: 5px solid #339999;
}

.card-footer {
    border-top: 2px solid #339999;
}

#myTab li .nav-link.active {
    background-color: #339999;
    color: #ffffff;
}

#myTab li .nav-link {
    background-color: #ffffff;
    color: #000000;
}

.tab-content {
    border-right: 2px solid #339999;
    border-left: 2px solid #339999;
    border-bottom: 2px solid #339999;
    padding: 50px;
}

.card {
    border-color: #339999;
    border-radius: 5px;
}

.card-footer:hover {
    color: #ffffff;
    background-color: #339999;
}

.card-link {
    color: #000000;
    text-decoration: none;
}

    .card-link a {
        color: #000000;
        text-decoration: none;
    }

    .card-link:hover {
        color: #ffffff;
        text-decoration: none;
    }

    .card-link a:hover {
        color: #ffffff;
        text-decoration: none;
    }


/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */
/*https://startbootstrap.com/snippets/video-header
*/
/*@media (pointer: coarse) and (hover: none) {
    .header-banner {
        background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
    }

    video {
        display: none;
    }
}*/

@media screen and (max-width: 680px) {
    .home-banner-text {
        font-size: 2em;
        position: static;
        color: #000000;
        /*        padding: 130px 0px 100px 25px;
*/
    }

    .banner-header {
        font-size: 2em;
    }

    .banner-subheader {
        font-size: 1em;
    }
}