@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-BoldItalic.eot');
    src: url('../fonts/Montserrat-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Montserrat-BoldItalic.woff2') format('woff2'),
        url('../fonts/Montserrat-BoldItalic.woff') format('woff'),
        url('../fonts/Montserrat-BoldItalic.ttf') format('truetype'),
        url('../fonts/Montserrat-BoldItalic.svg#Montserrat-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Light.eot');
    src: url('../fonts/Montserrat-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Montserrat-Light.woff2') format('woff2'),
        url('../fonts/Montserrat-Light.woff') format('woff'),
        url('../fonts/Montserrat-Light.ttf') format('truetype'),
        url('../fonts/Montserrat-Light.svg#Montserrat-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-LightItalic.eot');
    src: url('../fonts/Montserrat-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Montserrat-LightItalic.woff2') format('woff2'),
        url('../fonts/Montserrat-LightItalic.woff') format('woff'),
        url('../fonts/Montserrat-LightItalic.ttf') format('truetype'),
        url('../fonts/Montserrat-LightItalic.svg#Montserrat-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.eot');
    src: url('../fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Montserrat-Bold.woff2') format('woff2'),
        url('../fonts/Montserrat-Bold.woff') format('woff'),
        url('../fonts/Montserrat-Bold.ttf') format('truetype'),
        url('../fonts/Montserrat-Bold.svg#Montserrat-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

* {
    /* border: 1px solid red; */
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
}

html {
    font-family: 'Montserrat', sans-serif;
    color: rgba(30,30,30,1);

    /* THE FONT SIZE HERE affects all rem used in the rest of the document */
    /* font-size: 16px; */
    font-size: 12px; 
}

h1, h2, h3, h4, h5, h6 {
    font-family:'Montserrat', sans-serif;
}

.content-main p a {
    color: rgba(85,146,0,1);
    border-bottom: 1px solid rgba(85,146,0,1);
    

}

.content-main p a:hover {
    text-decoration: none;
    border-bottom: none;
    color: rgba(85,146,0,1);

}

::-moz-selection { 
    background: rgba(85,146,0,1);
    color: white;
}

::selection { 
    background: rgba(85,146,0,1);
    color: white;
}

text::-moz-selection { 
    background: rgba(85,146,0,1);
    fill: white;
}

text::selection { 
    background: rgba(85,146,0,1);
    fill: white;
}

tspan::-moz-selection { 
    background: rgba(85,146,0,1);
    fill: white;
}

tspan::selection { 
    background: rgba(85,146,0,1);
    fill: white;
}


#offcanvas-nav > div {
    padding: 50px 0;

    background-color: rgba(30,30,30,1);

    -webkit-box-shadow: 1px 1px 8px 1px rgba(30,30,30,1); 
    box-shadow: 1px 1px 8px 1px rgba(30,30,30,1);

}

#offcanvas-nav > div > button {
    color: rgba(255,255,255,1);
    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease-in-out;
}

#offcanvas-nav > div > button:hover {
    color: rgba(85,146,0,1);

    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease-in-out;


}

#offcanvas-nav ul {
    list-style: none;
    padding: 0;
}



#offcanvas-nav ul a {
    display: block;
    padding: 25px 50px;
    font-weight: 600;
    font-size: 1.5rem;
    text-transform: uppercase;

    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease-in-out;

}

#offcanvas-nav ul a:hover {
    text-decoration: none;
    background-color: rgba(85,146,0,1);

    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease-in-out;

    /* -webkit-box-shadow: 1px 1px 8px 1px rgba(30,30,30,1); 
    box-shadow: 1px 1px 8px 1px rgba(30,30,30,1); */
}

#offcanvas-nav ul .uk-active a {
    background-color: rgba(85,146,0,1);
}


body > header {
    display: flex;
    justify-content: space-between;

    padding-left: 80px;
    padding-right: 80px;
    padding-top: 35px;
    padding-bottom: 35px;
    background-color: rgba(255,255,255,1);

    -webkit-box-shadow: 1px 1px 8px 1px rgba(30,30,30,1); 
    box-shadow: 1px 1px 8px 1px rgba(30,30,30,1);
    position: relative;
    z-index: 10;

}



header .logo {
    width: 15%;
    max-width: 250px;
    min-width: 125px;

    /* Couldn't use Flex to vertically center .logo img using auto for margin-top/bottom; it works, but on Mac Safari and iPad (safari & Chrome), it produces large white space between the top of the page and the header, and between the header and the main div */
    /* display: flex; */ 
    position: relative;
}

header .logo img {
    display: block;
    /* margin-top: auto;
    margin-bottom: auto; */
    position: absolute;
    top: 50%;
    transform: translateY(-65%);

}



header .uk-navbar-nav > li {
    margin-left: 35px;
}


header .uk-navbar-nav > li > a {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: rgba(30,30,30,1);
    position: relative;

    transition-duration: 0.3s;
    transition-property: color;
    transition-timing-function: ease-in-out;
}

header .uk-navbar-nav > li.uk-active > a, header .uk-navbar-nav > li > a:hover {
    color: rgba(85,146,0,1);

    transition-duration: 0.3s;
    transition-property: color;
    transition-timing-function: ease-in-out;
    
}

header .uk-navbar-nav > li > a::before {
    content: '';
    display: block;
    height: 1px;
    background-color: rgba(85,146,0,1);
    position: absolute;
    left: 10px;
    bottom: 20px;
    
    right: 100%;

    transition-duration: 0.3s;
    transition-property: right;
    transition-timing-function: ease-in-out;
}

header .uk-navbar-nav > li > a:hover::before {
    right: 10px;

    transition-duration: 0.3s;
    transition-property: right;
    transition-timing-function: ease-in-out;

}

header > button {
    display: none;
    color: rgba(30,30,30,1);

    background-color: transparent;
    border: none;

    transition-duration: 0.3s;
    transition-property: color;
    transition-timing-function: ease-in-out;
}

header > button:hover {
    cursor: pointer;
    color: rgba(85,146,0,1);

    transition-duration: 0.3s;
    transition-property: color;
    transition-timing-function: ease-in-out;
}


main > header {
    
    position: relative;
    z-index: 1;


    

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

main > header > div {

    padding: 5% 25% 12% 25%;
    width: 100%;
    

}

main > header > div, main > header > div > h1 {
    color: rgba(255,255,255,0.9);

    text-shadow: 2px 2px 3px rgba(30, 30, 30, 1);
    
}

main > header > div > h1 {
    font-size: 7rem;
    font-weight: 600;

    line-height: 1.3;
    max-width: 1360px;

}

main > header > div > h1 > br:nth-of-type(1) {
    /* display: none; */
}

main > header > div > p {
    font-size: 4rem;
    font-weight: 600;

    width: 75%;
    line-height: 1.25;
    max-width: 1360px;
    position: absolute;
    /* bottom: 20px; */

    text-align: center;
    /* vertical-align: bottom; */

    /* margin-top: 160px; */
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);

    opacity: 0.95;

}

main > header > div > button {
    font-family: 'Montserrat', sans-serif;
    color: rgba(255,255,255,0.75);

    font-size: 1.5rem;

    padding: 10px 15px;

    background-color:  rgba(30, 30, 30, 0.4);
    box-shadow: transparent;

    /* The highlights of light source */
    border-top: 1px solid rgba(255,255,255,0.30);
    border-left: 1px solid rgba(255,255,255,0.30);



    margin-top: 200px;
    /* margin-top: 40px; */
    position: absolute;
    /* top: 80px; */
    bottom: 225px;
    left: 50%;
    transform: translateX(-50%);

    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease-in-out;

    -webkit-box-shadow: 1px 1px 2px 1px rgba(30, 30, 30, 0.15); 
    box-shadow: 1px 1px 2px 1px rgba(30, 30, 30, 0.15);

    opacity: 0.9;
}

main > header > div > button:disabled {
    
    background-color: rgba(200, 200, 200, 0.4);
}

main > header > div > button:disabled:hover {
    cursor: not-allowed;
    background-color: rgba(200, 200, 200, 0.4);
}

main > header > div > button:hover {
    cursor: pointer;

    background-color: rgba(30, 30, 30, 0.7);
    color: rgba(255,255,255,0.85);

    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease-in-out;
}

main > header > div > button > span > svg {
    color: rgba(255,255,255,0.5);

    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease-in-out;
    
}

main > header > div > button > span > svg polygon {
    fill: rgba(255,255,255,0.5);
    color: rgba(255,255,255,0);

    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease-in-out;
}

main > header > div > button:hover > span > svg {
    color: rgba(255,255,255,0.6);
    
    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease-in-out;
}

main > header > div > button:hover > span > svg polygon {
    fill: rgba(255,255,255,0.6);
    color: rgba(255,255,255,0);

    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease-in-out;
}

.content {
    padding: 70px 0;

    -webkit-box-shadow: 1px 1px 8px 1px rgba(30,30,30,1); 
    box-shadow: 1px 1px 8px 1px rgba(30,30,30,1);
    position: relative;
    z-index: 10;
}

#sticky-nav ~ #sticky-nav-fix {
    display: none;
    width: 25%;
    max-width: 362px;
    vertical-align: top;
    /* border: 1px solid black; */
}

#sticky-nav.uk-active ~ #sticky-nav-fix {
    display: inline-block;
}

#sticky-nav.uk-active ~ .content-main {
    left: 0;
}


.content-main  {
    width: 70%;
    max-width: 1600px;


    margin: 0 auto;
    text-align: center;

    font-size: 2rem;
    font-weight: 300;

    margin-bottom: 70px;
}

.content hr {
    width: 35%;
    margin: 100px auto 70px auto;
    border-top-color: rgba(85,146,0,0.25);
}

footer {
    background-color: rgba(238,244,229,1); /* Solid version of the transparent green; need solid to hide drop shadow of the content box */
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-left: 80px;
    padding-right: 80px;
    padding-top: 35px;
    padding-bottom: 35px;

    position: relative;
    z-index: 100;

}

footer p {
    font-weight: 300;
    font-size: 1.2rem;
    margin: 0;
    color: rgba(85,146,0,1);
}

footer p a {
    color: rgba(85,146,0,1);
    text-decoration: none;
    border-bottom: 1px solid rgba(85,146,0,1);
}

footer p a:hover {
    text-decoration: none;
    border-bottom: none;
    color: rgba(85,146,0,1);
}

footer .social-media {
    list-style: none;
    padding: 0;
    margin: 0
}

footer .social-media li {
    display: inline-block;
    margin-left: 10px;
}

footer .social-media span {
    display: inline-block;
    color: rgba(85,146,0,0.75);

    transition-duration: 0.3s;
    transition-property: color;
    transition-timing-function: ease-in-out;

}

footer .social-media span:hover {
    color: rgba(85,146,0,1);

    transition-duration: 0.3s;
    transition-property: color;
    transition-timing-function: ease-in-out;
}





/*  
* 
* PAGE SPECIFIC STYLES 
*
*/

/* HOME PAGE */
#home main > header {
    background-image: url(../images/home.jpg);
    /* background-image: url(../images/home-bw.jpg); */
    /* background-position: 10% 50%; */
    position: relative;
    
}

#home main > header > div {
    text-align: center;
    height: 700px;
}

/* #home main > header > div:not(#animation-video) {
    z-index: 1;
    position: relative;
} */



#home #animation-video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;

    width: 100%;
    height: 100%;

    background-color: rgba(0,0,0,0.75);

    /* display: none; */
}

#home #animation-video video {
    height: 100%;
    position: absolute;
    top: 50%;
    /* transform: ; */

    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

#home #animation-video > button {
    position: absolute;
    z-index: 100;
    right: 35px;
    top: 35px; 
    bottom: auto;
    left: auto;
    box-shadow: none;
    transform: none;
    height: 50px;
    width: 50px;

    color: rgba(255,255,255,1);
    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease-in-out;

    background-color: rgba(30, 30, 30, 0.25);
}

#home #animation-video > button:hover {
    cursor: pointer;
    color: rgba(85,146,0,1);
    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease-in-out;
}

#home .content-main p {
    margin-bottom: 20px;
    line-height: 1.3;
}

#home .content-main ul {
    list-style: none;
    padding: 0;
    margin-bottom: 60px;
}

#home .content-main ul li {
    display: inline-block;
    margin: 0 50px;

}

#home .content-main ul li a {
    width: 200px;
    padding: 15px 25px;
    display: block;
    color: rgba(85,146,0,1);
    border: 2px solid rgba(85,146,0,1);
    background-color: transparent;
    

    /* color: rgba(30,30,30,1); */
    
    text-decoration: none;
    

    margin-top: 20px;
    

    /* font-size: 2rem; */
    font-size: 1.5rem;
    font-weight: 600;

    text-transform: uppercase;


    transition-duration: 0.15s;
    transition-property: all;
    transition-timing-function: ease-in-out;
}

#home .content-main ul li a:hover {

    border: 2px solid rgba(85,146,0,1);
    background-color: rgba(85,146,0,1);
    color: rgba(255,255,255,1);

    transition-duration: 0.15s;
    transition-property: all;
    transition-timing-function: ease-in-out;
}


#home .latest-news h2, #home .latest-news ul {
    width: 70%;
    max-width: 1600px;

    margin: 0 auto;
}


#home .latest-news h2 {
    text-align: center;

    color: rgba(85,146,0,1);
    font-size: 2.5rem;
    font-weight: 600;

    margin-bottom: 40px;
}

#home .latest-news ul {
    list-style: none;
    padding: 0;

    display: flex;
    justify-content: center;
}

#home .latest-news ul li {
    width: 25%;
    margin-right: 35px;

    
    padding: 25px 25px 35px 25px;


    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease-in-out;
    transition-delay: 0.15s;
}

#home .latest-news ul li:hover {

    background-color: rgba(85,146,0,0.1);


    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease-in-out;
    transition-delay: 0.15s;
}


#home .latest-news ul li a {
    display: block;
    height: 100%;
}

#home .latest-news ul li a:hover {
    text-decoration: none;
}


#home .latest-news ul li .latest-news-item-meta {
    margin-bottom: 15px;

    
}

#home .latest-news ul li .latest-news-item-meta time {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;


    color: rgba(85,146,0,0.4);
    /* color: rgba(255,145,26,0.4); */

    border-bottom: 4px solid rgba(85,146,0,0.2);
    /* border-bottom: 4px solid rgba(255,145,26,0.2); */
    
    display: inline-block;
    padding-bottom: 5px;

    position: relative;

    
}


#home .latest-news ul li .latest-news-item-meta time::after {
    content: '';
    display: block;
    height: 4px;
    background-color: rgba(85,146,0,1);
    
    position: absolute;
    left: 0;
    bottom: -4px;
    
    right: 100%;


    transition-duration: 0.3s;
    transition-property: right;
    transition-timing-function: ease-in-out;
    
}

#home .latest-news ul li:hover .latest-news-item-meta time::after {
    right: 0;

    transition-duration: 0.3s;
    transition-property: right;
    transition-timing-function: ease-in-out;
}


#home .latest-news ul li h3 {
    margin: 0;


}

#home .latest-news ul li h3 {
    color: rgba(85,146,0,1);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.3;


}



/* GENERAL NOT HOME PAGES */
.not-home main > header > div {

    padding: 18% 0 5% 0;

}

.not-home main > header > div > h1 {

     
    font-size: 8rem;
    text-shadow: 2px 2px 2px rgba(30, 30, 30, 0.65);
    opacity: 0.95;
    line-height: 1;
    margin-left: auto;
    margin-right: auto;
    text-align: center;

}

.not-home .content {
    padding-left: 80px;
    padding-right: 80px;
    text-align: center;

    
}

.not-home .content nav {
    width: 25%;
    max-width: 362px;
    display: inline-block;
    vertical-align: top;

    
}

.not-home .content nav.uk-sticky-fixed {
    left: 29%;
} 





.not-home .content nav ul {
    list-style-type: none;
    padding: 10px 0;
    border-right: 1px solid rgba(30, 30, 30, 0.15);

}

.not-home .content nav ul li {
    margin-bottom: 15px;
}

.not-home .content nav ul li a {
    display: block;
    text-align: right;
    color: rgba(30, 30, 30, 0.75);
    font-size: 1.5rem;
    padding: 0px 20px;
    margin-right: -3px;
    border-right: 5px solid rgba(85,146,0,0);

    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease-in-out;
}

.not-home .content nav ul li a:hover {
    text-decoration: none;
    color: rgba(85,146,0,0.75);
    
}

.not-home .content nav ul li.uk-active a {
    color: rgba(85,146,0,1);
    font-weight: 600;
    border-right: 5px solid rgba(85,146,0,1);
    

    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease-in-out;
}

.not-home .content .content-main {
    width: 75%;
    max-width: 1320px;
    
    text-align: left;
    
    padding: 0 0 0 80px;
    list-style: none;
    font-size: 1.5rem;
    display: inline-block;

    
}

.not-home .content nav.uk-sticky-fixed ~ .content-main {
    
    position: relative;
    left: 7%;
    
}


.not-home .content .content-main > li > a {
    color: rgba(85,146,0,1);
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 40px;
    text-transform: uppercase;
    
    position: relative;
}

.not-home .content .content-main > li > a.uk-accordion-title::before {
    background: none;
    content: "";

    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    
    border-top: 20px solid rgba(85,146,0,1);

    position: absolute;
    top: 50%;
    right: 0;
    transform: scale(0.5) rotate(180deg) translateY(-50%);
    transform-origin: 50% 0%;

    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-in-out;
}

.not-home .content .content-main > li.uk-open > a.uk-accordion-title::before {
    transform: scale(0.5) rotate(0deg) translateY(-50%);
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-in-out;
}


.not-home .content .content-main > li > section {
    margin-top: 0;
    margin-bottom: 80px;
}

.not-home .content-main section > h2 {
    font-size: 2rem;
    font-weight: 300;
    font-style: italic;
    margin: 40px 0 20px 0;
}


/* ABOUT US PAGE */


#about-us main > header {
    background-image: url(../images/about-us.jpg);
    /* background-position: 50% 0%; */
}

#about-us #missions {
    margin-top: 80px;
    margin-bottom: 80px;
}


#about-us #missions #missions-curve {
    display: block;
    width: 100%;
    
}

#about-us #missions #missions-curve-mobile {
    display: none;
    width: 100%;
}

#about-us #missions svg #curve path {
    /* stroke: rgba(85,146,0,0.75); */
    stroke: rgba(85,146,0,1);
    stroke-width: 0.25px;
    fill: rgba(85,146,0,1);
    /* fill: none; */

}

#about-us #missions svg #text {
    opacity: 1;
}

#about-us #missions svg text.heading {
    
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

#about-us #missions svg text tspan {
    
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

#about-us #missions #missions-curve-mobile div {
    margin-bottom: 50px;
}

#about-us #missions #missions-curve-mobile div h3 {
    text-transform: uppercase;
    font-size: 2.5rem;
    color: rgba(85,146,0,1);
    text-align: center;
    margin-bottom: 10px;
}

#about-us #missions #missions-curve-mobile div p {
    text-align: center;
    font-size: 1.5rem;
    margin-top: 0;
}


#about-us #core-values {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

#about-us #core-values li {
    width: 25%;
    text-align: center;
    margin-right: 25px;

}

#about-us #core-values li:last-of-type {
    margin-right: 0;
    
}

#about-us #core-values li img.icon {
    height: 100px;
}

#about-us #core-values li h3 {
    color: rgba(85,146,0,1);
    text-transform: uppercase;
    font-weight: 600;
}


#about-us #core-values li h3, #about-us #core-values li p {
    font-size: 1.5rem;
}

#about-us .team > ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
}

#about-us .team > ul li {
    /* width: 17%; */
    /* Want 5 pics per row, therefore 100%/5 = 20% */
    width: calc(20% - 80px);
    /* width: 208px; */
    margin-right: 80px;
    margin-bottom: 40px;
}

#about-us .team > ul li:hover {
    cursor: pointer;
}

#about-us .team > ul li .profile-pic {
    height: 250px;
    width: 208px;
    /* width: 100%; */
    margin-right: auto;
    margin-left: auto;
}

#about-us .team > ul li .profile-pic img {
    /* This is how you can crop images: https://www.digitalocean.com/community/tutorials/css-cropping-images-object-fit */
    object-fit: cover;
    object-position: 40% 0%;

    /* height: 350px; */
    width: 100%;
    height: 100%;


    filter: grayscale(100%);

    transition-duration: 0.3s;
    transition-property: filter;
    transition-timing-function: ease-in-out;

    border: 1px solid rgba(30, 30, 30, 0.25);
    border-radius: 7px;
}

#about-us .team > ul li:hover .profile-pic img {

    filter: grayscale(0%);

    transition-duration: 0.3s;
    transition-property: filter;
    transition-timing-function: ease-in-out;

    

}

#about-us .team > ul li .profile-name {
    margin-top: 20px;
    text-align: center;
    line-height: 1.2;

    color:rgba(30, 30, 30, 0.55);
    font-weight: 600;
    font-size: 1.4rem;

    transition-duration: 0.3s;
    transition-property: color;
    transition-timing-function: ease-in-out;

    width: 208px;
    margin-right: auto;
    margin-left: auto;
}


#about-us .team > ul li:hover .profile-name {
    color:rgba(85,146,0,1);

    transition-duration: 0.3s;
    transition-property: color;
    transition-timing-function: ease-in-out;
}

#about-us .team > ul li .profile-name span {
    display: block;
    text-transform: uppercase;
}

#about-us .team > ul li .profile-credentials {
    margin-top: 5px;
    text-align: center;
    font-style: italic;
    font-weight: 600;
    font-size: 1.2rem;

    color:rgba(30, 30, 30, 0.55);

    transition-duration: 0.3s;
    transition-property: color;
    transition-timing-function: ease-in-out;

    width: 208px;
    margin-right: auto;
    margin-left: auto;
}

#about-us .team > ul li:hover .profile-credentials {
    color:rgba(85,146,0,1);


    transition-duration: 0.3s;
    transition-property: color;
    transition-timing-function: ease-in-out;
}



#about-us .profile-detailed .uk-modal-dialog {
    border-radius: 5px;
    background-color: rgba(255,255,255,0.95);
    position: relative;

    width: 100%;
    max-width: 1240px !important;
}


#about-us .profile-detailed .uk-modal-title {
    color: rgba(85,146,0,1);
    font-weight: 600;
    /* text-align: center; */
    margin-bottom: 20px;
    margin-right: 20px;
    margin-top: 0;
    
}

#about-us .profile-detailed .uk-modal-title span.lastname {
    text-transform: uppercase;
}



#about-us .profile-detailed .uk-modal-body {
    font-size: 1.25rem;
    padding-top: 60px;

    display: flex;

}

#about-us .profile-detailed .uk-modal-body img {
    width: 208px;
    height: 250px;

    object-fit: cover;
    object-position: 40% 0%;

    border: 1px solid rgba(30, 30, 30, 0.25);
    border-radius: 7px;

    margin-right: 40px;
    margin-bottom: 20px;
    /* margin-top: 20px; */
    /* float: left; */
    
    
}

#about-us .profile-detailed .uk-modal-body p {
    margin-bottom: 20px;
    margin-top: 0;
}

#about-us .profile-detailed .uk-close {

    position: absolute;
    right: 15px;
    top: 15px;
} 

#about-us .profile-detailed .uk-close svg {

    transform: rotate(0deg) scale(1.5);

    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-in-out;
}

#about-us .profile-detailed .uk-close:hover svg {
    transform: rotate(25deg) scale(1.55);

    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-in-out;
}

#about-us .profile-detailed .uk-close svg line {
    
    stroke-width: 1.5px;
    stroke: rgba(30, 30, 30, 0.2);

    transition-duration: 0.3s;
    transition-property: stroke;
    transition-timing-function: ease-in-out;
    
}

#about-us .profile-detailed .uk-close:hover svg line {
    stroke:rgba(85,146,0,1);

    transition-duration: 0.3s;
    transition-property: stroke;
    transition-timing-function: ease-in-out;
    
}
#about-us #investors li {
    /* height: 100%; */
    /* margin: 0; */
    height: 150px;
}

#about-us #investors a {
    display: block;
    width: 100%;
    height: 100%;
    color: rgba(30, 30, 30, 0.55);
    text-indent: -9999em;
    position: relative;

    
}

#about-us #investors a::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    filter: grayscale(100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    transition-duration: 0.3s;
    transition-property: filter;
    transition-timing-function: ease-in-out;

}



#about-us #investors a#inkef-capital::before {
    background-image: url(../images/investors/inkef.png);
    
}

#about-us #investors a#vi-partners::before {
    background-image: url(../images/investors/vi.png);
}

#about-us #investors a#m-ventures::before {
    background-image: url(../images/investors/mventures.png);
}

#about-us #investors a#schroder-adveq::before {
    background-image: url(../images/investors/schroderadveq.png);
}

#about-us #investors a#helsinn-investment-fund::before {
    background-image: url(../images/investors/helsinn.jpg);
}

#about-us #investors a:hover {
    text-decoration: none;
}

#about-us #investors a:hover::before {
    filter: none;

    transition-duration: 0.3s;
    transition-property: filter;
    transition-timing-function: ease-in-out;
}






/* PIPELINE & SCIENCE PAGE */


#pipeline-and-science main > header {
    background-image: url(../images/pipeline-and-science.jpg);
}


/* General Table Styles */


#pipeline-and-science #pipeline h2 {
    margin-top: 60px;
    margin-bottom: 20px;
}


#pipeline-and-science table {
    
    font-size: 1.2rem;

    table-layout: fixed;
    text-align: center;
    font-weight: 600;

    /* width: 1600px; */
    width: 100%;

    /* border-spacing: 15px 0; */
    border-collapse: collapse;

    margin: 20px 0 80px 0;
    /* TODO: Change to %? */
}

#pipeline-and-science table.old.expanded {
    margin: 60px 0 80px 0;
}

#pipeline-and-science table.old.expanded, #pipeline-and-science h2.old.expanded  {
    display: block;
}

#pipeline-and-science table.old.collapsed, #pipeline-and-science h2.old.collapsed  {
    display: none;
}

/* TODO: Add more vertical space separation in the pipeline future table to make it easier to read -- similar to the current table design that I have; also add a thin line betwen targets for the old table, and between inidcations for the future table */

/* Make the phases text in the collapsed table green */

/* General Table Header Styles */
#pipeline-and-science table thead {
    font-size: 0.9rem;
    text-transform: uppercase;
    /* vertical-align: bottom; */

    border-bottom: 1px solid  rgba(210, 210, 210, 1);
}

#pipeline-and-science table thead th {
    font-weight: 600;
    color: rgba(150, 150, 150, 1);
}



/* Table Column Widths */

#pipeline-and-science table.old thead th.target {
    width: 150px;
    
}

#pipeline-and-science table.old thead th.product-candidate {
    width: 125px;
    
}


#pipeline-and-science table thead th.indication {
    width: 150px;
    
}

#pipeline-and-science table thead th.combination-agent {
    width: 110px;
}



#pipeline-and-science table thead th.combination-partner {
    width: 110px;
}



/* COLUMN BORDERS */

#pipeline-and-science table thead th:not(:last-of-type), #pipeline-and-science table tbody td:not(:last-of-type) {
    border-right: 1px solid rgba(210, 210, 210, 1);
}

#pipeline-and-science table.old thead th, #pipeline-and-science table.old tbody td {
    border-right: 1px solid rgba(210, 210, 210, 1);
}



/* General Table Cell Styles */




#pipeline-and-science table th, #pipeline-and-science table td, #pipeline-and-science table .phases div {
    padding: 10px;

}


/* Specific Table Styles */

#pipeline-and-science table thead th.development-phase {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

#pipeline-and-science table thead .phases {
    position: relative;
    padding: 0;

    border-top: 1px solid  rgba(210, 210, 210, 1);
    margin-top: 10px;
}

#pipeline-and-science table thead .phases > div:not(.grids) {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    
    text-transform: capitalize;
    z-index: 100;

    /* font-size: 0.8rem; */
    font-size: 1.1rem;

}



#pipeline-and-science table thead .phases > div.grids {
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
}

#pipeline-and-science table thead .phases > div.grids div.grid {
    position: absolute;
    top: 0;
    left: 0;

    height: 100%;

    border-right: 1px solid rgba(210, 210, 210, 1);

    z-index: 1;
}

/* GRIDS HEADING */
#pipeline-and-science table thead .phases > div.grids div.grid:nth-of-type(1) {
    transform: translateX(0%);
}

#pipeline-and-science table thead .phases > div.grids div.grid:nth-of-type(2) {
    transform: translateX(100%);
}

#pipeline-and-science table thead .phases > div.grids div.grid:nth-of-type(3) {
    transform: translateX(200%);
}

#pipeline-and-science table thead .phases > div.grids div.grid:nth-of-type(4) {
    transform: translateX(300%);
}

#pipeline-and-science table thead .phases > div.grids div.grid:nth-of-type(5) {
    transform: translateX(400%);
    
}




#pipeline-and-science table thead .phases > div > div {
    width: calc(100%/6);

    
    align-items: baseline;

}


#pipeline-and-science table thead .phases > div {
    width: 100%;
    padding: 0;
    
}




/* TABLE BODY STYLES */



#pipeline-and-science table tbody td {
    color: rgba(130,130,130,1);
}



#pipeline-and-science table tbody td.development-phase {
    padding: 0;

    position: relative;

    color: rgba(85,146,0,1);
}

#pipeline-and-science table tbody td.development-phase.combination-agent {
    /* color: rgba(44,81,36,1); */
}

#pipeline-and-science table tbody td.development-phase > div:not(.grids) {
    /* background-color: rgba(85,146,0,1); */
    /* width: 50%; */

    background: rgb(85,146,0);
    background: linear-gradient(90deg, rgba(85,146,0,0.5) 0%, rgba(85,146,0,1) 100%);

    height: 12px;
    border-radius: 0 6px 6px 0;

    position: absolute;
    left: 0;
    /* top: 50%; */

    
    z-index: 100;


    /* TODO: This is temporary while I'm developing -- later use the hide-text class to add/remove from these divs based on viewport size */
    text-indent: -9999em;

}


#pipeline-and-science table:not(.old) tbody td.combination-agent > div:not(.grids) {
    /* background: rgba(44, 81, 36,1); */
    background: rgb(44,81,36);
    background: linear-gradient(90deg, rgba(44,81,36,0.5) 0%, rgba(44,81,36,1) 100%);
}


#pipeline-and-science table tbody td.development-phase > div.grids {
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
}

#pipeline-and-science table tbody td.development-phase > div.grids div.grid {
    border-right: 1px solid rgba(210, 210, 210, 1);
    position: absolute;
    top: 0;
    left: 0;

    height: 100%;
    width: calc(100%/6);

    z-index: 1;
}

/* PHASE GRIDLINES */
#pipeline-and-science table tbody td.development-phase > div.grids div.grid:nth-of-type(1) {
    transform: translateX(0%);
}

#pipeline-and-science table tbody td.development-phase > div.grids div.grid:nth-of-type(2) {
    transform: translateX(100%);
}

#pipeline-and-science table tbody td.development-phase > div.grids div.grid:nth-of-type(3) {
    transform: translateX(200%);
}

#pipeline-and-science table tbody td.development-phase > div.grids div.grid:nth-of-type(4) {
    transform: translateX(300%);
}

#pipeline-and-science table tbody td.development-phase > div.grids div.grid:nth-of-type(5) {
    transform: translateX(400%);
}




/* ADJUST SPACING BETWEEN TABLE ROWS */

#pipeline-and-science table .row-top:not(.row-bottom) {
    /* This is the space between indications */
    padding-top: 30px;

    /* This is the space between the combination agents */
    padding-bottom: 5px; 
    /* background-color: yellow; */
}

#pipeline-and-science table.old .row-top:not(.row-bottom) {

    /* This is the space between the combination agents */
    padding-bottom: 5px; 
    /* background-color: yellow; */
}

#pipeline-and-science table tbody .development-phase.row-top:not(.row-bottom) > div:not(.grids) {
    /* This top value is same as padding-top */
    top: 30px; 
    transform: translateY(25%);
}


#pipeline-and-science table.old tbody .development-phase.row-top:not(.row-bottom) > div:not(.grids) {
    /* This top value is same as padding-top */
    /* top: 20px;  */
    transform: translateY(100%);
}


#pipeline-and-science table .row-bottom:not(.row-top) {
    /* This is the space between indications */
    padding-bottom: 30px;


    /* This is the space between the combination agents */
    padding-top: 5px; 
    /* background-color: pink; */


}

#pipeline-and-science table.old .row-bottom:not(.row-top) {

    /* This is the space between the combination agents */
    padding-top: 5px; 
    /* background-color: pink; */
}


#pipeline-and-science table tbody .development-phase.row-bottom:not(.row-top) > div:not(.grids) {
    /* This adjusts positioning of the bars */

    /* This top value is same as padding-top */
    bottom: 30px; 
    transform: translateY(-25%);
    /* background-color: turquoise; */

    
}

#pipeline-and-science table.old tbody .development-phase.row-bottom:not(.row-top) > div:not(.grids) {
    /* This adjusts positioning of the bars */

    transform: translateY(-100%);
    /* background-color: turquoise; */

    
}



#pipeline-and-science table .row-top.row-bottom {
    /* This is the space between indications */
    padding-top: 30px;
    padding-bottom: 30px;
}

#pipeline-and-science table.old .row-top.row-bottom {
    /* This is the space between indications */
    padding-top: 30px;
    padding-bottom: 30px;
}


#pipeline-and-science table tbody .development-phase.row-top.row-bottom > div:not(.grids) {
    /* This top value is same as padding-top */

    transform: translateY(-50%);
    
}

#pipeline-and-science table tbody .development-phase:not(.row-top):not(.row-bottom) > div:not(.grids) {
    /* This adjusts positioning of the bars */
    /* background-color: yellow; */
    transform: translateY(-50%);
}


#pipeline-and-science table td.group, #pipeline-and-science table td.row-bottom {
    border-bottom: 1px solid rgba(210, 210, 210, 1);
}

#pipeline-and-science table td.group.last, #pipeline-and-science table tr.last td.row-bottom {
    border-bottom: none;
}

/* TODO: REMOVE THIS WHEN THE NEW VERSION OF THE GRAPH IS READY */
#pipeline-and-science .new {
    display: none;
}

#pipeline-and-science .drug {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#pipeline-and-science li:nth-of-type(even) .drug {
    flex-direction: row-reverse;
}


#pipeline-and-science .drug > div {
    width: 47%;
}

#pipeline-and-science #clinical-trials.drug > div {
    width: 100%;
}



#pipeline-and-science .drug > div.mechanism-figure {
    width: 100%;
    margin-right: 40px;
    margin-left: 40px;
}

#pipeline-and-science .drug > div.mechanism-description .subheading {
    font-weight: 600;
    color: rgba(85,146,0,1);
}

#pipeline-and-science .drug > div.mechanism-description .subheading a {
    color: rgba(85,146,0,1);
    border-bottom: 1px solid rgba(85,146,0,1);
    text-decoration: none;

}

#pipeline-and-science .drug > div.mechanism-description .subheading a:hover {
    border-bottom: none;
}

#pipeline-and-science .drug > ul > li {
    margin-bottom: 10px;
}

#pipeline-and-science .drug > ul > li a {
    border-bottom: 1px solid rgba(85,146,0,1);
    color: rgba(85,146,0,1);
}

#pipeline-and-science .drug > ul > li a:hover {
    border-bottom: none;
    text-decoration: none;
}

/* NEWS PAGE */


#news main > header {
    background-image: url(../images/news.jpg);
    background-position: 0 14%;
}

#news article {
    overflow: hidden;
    position: relative;
    
}

#news article + a {
    color: rgba(85,146,0,1);
    margin-bottom: 80px;
    margin-top: 20px;
    display: block;
}

#news article + a:hover {
    color: rgba(85,146,0,1);
    /* text-decoration: none; */
    /* border-bottom: 1px solid rgba(85,146,0,1); */
}


#news article .meta {
    margin-bottom: 30px;
}


#news article .meta .publication-date-location {
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(85,146,0,0.4);
    font-size: 1.25rem;

}


#news article .meta .publication-date-location > div {
    border-bottom: 4px solid rgba(85,146,0,0.2);
    display: inline-block;
    
    padding-bottom: 5px;
    margin-bottom: 20px;
}

#news article .meta h2 {
    line-height: 1.3;
    font-weight: 600;
    color: rgba(85,146,0,1);

    margin-top: 0;
    margin-bottom: 10px;

    text-transform: capitalize;

}

#news article .meta h2 > span {
    text-transform: lowercase;
}

#news article .meta .subtitle {
    font-weight: 600;
    text-transform: capitalize;
    color: rgba(180, 180, 180, 1);
    margin-bottom: 10px;
}

#news article .meta .byline {
    font-style: italic;
    margin-bottom: 10px;
    font-size: 1.3rem;
}


#news article .content {
    -webkit-box-shadow: none;
    box-shadow: none;
    text-align: left;
    padding: 0;
    /* position: relative; */
}


#news article[aria-expanded="false"]:after {
    position: absolute;
    top: 0;  
    left: 0;
    height: 100%;
    width: 100%;
    content: "";
    background: linear-gradient(to bottom,
        rgba(255,255,255, 0) 50%, 
        rgba(255,255,255, 1) 95%
    );
    pointer-events: none; /* so the text is still selectable */
    z-index: 10;
}

#news article .content h3 {
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(85,146,0,1);
}

#news article .content strong {
    font-weight: 600;
    color: rgba(85,146,0,1);
}

#news article .content em {
    /* font-weight: 600; */
    color: rgba(85,146,0,1);
}

#news article .content a {
    border-bottom: 1px solid rgba(85,146,0,1);
    color: rgba(85,146,0,1);
}

#news article .content a:hover {
    border-bottom: none;
    text-decoration: none;
}

#news article .content img {
    display: block;
    width: 100%;
    margin-top: 25px;
    margin-bottom: 25px;
}

#news article .content ul {
    list-style-type: disc;
}

#news article .content ol {
    list-style-type: decimal;
}

#news article .content ul, #news article .content ol {
    
    padding-left: 60px;
}

#news article .content ul li, #news article .content ol li {
    margin-bottom: 10px;
}

/* #news article .content ul li a, #news article .content ol li a {
    color: rgba(85,146,0,1);
}

#news article .content ul li a:hover, #news article .content ol li a:hover {
    text-decoration: none;
} */



/* 
*
*  CONTACT PAGE
*
*/

#contact main > header {
    background-image: url(../images/contact.jpg);
}

#contact .content {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
}

#contact .content .content-main {
    padding-left: 0;
    width: 100%;
    max-width: none;
    margin-bottom: 0;
}

#contact .content .content-main .addresses {
    display: flex;
    width: 75%;
    /* justify-content: space-between; */
    justify-content: center;
    align-items: start;
    margin: 40px auto 20px auto;
    
}

#contact .content .content-main .addresses .address {
    width: 45%;
    /* position: relative; */
    /* height: 175px; */
    background-repeat: no-repeat;
    background-size: 25px;
    padding: 15px 35px;
    margin-top: 0;
    margin-bottom: 20px;
}




#contact .content .content-main .addresses .address .address-name {
    font-weight: 600;
}


#contact .content .content-main .addresses .address a {
    display: inline-block;
    margin-top: 20px;
    /* position: absolute;
    bottom: 0;
    left: 0; */

}


#contact .content .content-main svg#map-desktop {
    display: block;
}

#contact .content .content-main svg#map-mobile {
    display: none;
}


#contact .content .content-main svg > rect {
    fill: rgba(238,244,229,1);
    opacity: 1;
}

#contact .content .content-main svg path:not(.marker) {
    /* fill: none; */
    fill: rgba(85,146,0,1);
    stroke: rgba(85,146,0,1);
    stroke-width: 0.75px;
}

#contact .content .content-main svg path.marker {
    opacity: 1;
}

#contact .content .content-main svg text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}



#privacy-policy .content {
    -webkit-box-shadow: none;
    box-shadow: none;

    /* border-top: 1px solid black; */

}

#privacy-policy .content h1 {
    color: rgba(85,146,0,1);
    font-size: 2.5rem;
    font-weight: 600;
    text-transform: uppercase;
}

#privacy-policy .content h2 {
    line-height: 1.3;
    font-weight: 600;
    color: rgba(85,146,0,1);
    margin-top: 0;
    margin-bottom: 10px;
    text-transform: capitalize;
}

#privacy-policy .content h3 {
    font-weight: 600;
    text-transform: capitalize;
    color: rgba(180, 180, 180, 1);
    margin-bottom: 10px;
}

#privacy-policy .content hr {
    margin-top: 75px;
    margin-bottom: 75px;
}

#privacy-policy .content ul {
    padding-left: 60px;
}

#privacy-policy .content li {
    margin-bottom: 10px;
}

#privacy-policy .content strong {
    font-weight: 600;
    color: rgba(85,146,0,1);
}

/*  
* 
* UTILITIES STYLES 
*
*/

.rounded-corners {
    border-radius: 7px;
}

.hide {
    display: none !important;
}

.hide-text {
    text-indent: -9999em;
}

/* TODO: Optimize the background images of the hero images for different device widths and resolutions -- look into it...currently some of them take a while to load */

/*  
* 
* UIKIT FIXES
*
*/
/* Fix Issue where when open a modal, page scrolls to top. See: https://github.com/uikit/uikit/issues/590#issuecomment-430676248 */
.uk-modal-page { overflow: visible !important; }
.uk-modal-page > body { overflow-y: visible !important;overflow-x: hidden !important; }


/* Fix issue where when sidebar sticky gets activated, a large gap appears in the layout */

.content > .uk-sticky-placeholder {
    height: 0 !important;
}

/*  
* 
* MEDIA QUERY STYLES 
*
*/

@media screen and (max-width: 3684px) {
    .not-home .content nav.uk-sticky-fixed {
        left: 27%;
    } 
}

@media screen and (max-width: 3550px) {
    .not-home .content nav.uk-sticky-fixed {
        left: 27%;
    } 
}

@media screen and (max-width: 3400px) {
    .not-home .content nav.uk-sticky-fixed {
        left: 25%;
    } 
}

@media screen and (max-width: 3180px) {
    .not-home .content nav.uk-sticky-fixed {
        left: 23.5%;
    } 
}

@media screen and (max-width: 3100px) {
    .not-home main > header > div {

        padding: 18% 0 5% 0;
    
    }

    .not-home .content nav.uk-sticky-fixed {
        left: 23%;
    } 

    #home main > header > div > h1 { 
        font-size: 5.75rem;
    }

}

@media screen and (max-width: 3000px) {
    .not-home .content nav.uk-sticky-fixed {
        left: 22%;
    } 
}


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

    .not-home main > header > div {

        padding: 18% 0 5% 0;
    
    }

    .not-home .content nav.uk-sticky-fixed {
        left: 20%;
    } 

}


@media screen and (max-width: 2750px) {
    .not-home .content nav.uk-sticky-fixed {
        left: 18%;
    } 
}



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

    .not-home main > header > div {

        padding: 18% 0 5% 0;
    
    }

    .not-home .content nav.uk-sticky-fixed {
        left: 17%;
    } 

    #home main > header > div > h1 { 
        font-size: 5.25rem;
    }

}


@media screen and (max-width: 2500px) {
    .not-home .content nav.uk-sticky-fixed {
        left: 14%;
    } 
}


@media screen and (max-width: 2400px) {
    .not-home main > header > div {

        padding: 18% 0 5% 0;
    
    }

    .not-home .content nav.uk-sticky-fixed {
        left: 14%;
    } 
}


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

    main > header > div {

        padding-left: 20%;
        padding-right: 20%;
    
    }
    .not-home .content nav.uk-sticky-fixed {
        left: 12%;
    } 
}




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

    main > header > div {
        padding: 5% 15% 12% 15%;
    }



    #home .latest-news ul {
        display: block;
    }

    #home .latest-news ul li {
        display: block;

        width: 100%;
    }

    .not-home main > header > div {

        padding: 18% 0 5% 0;
    
    }

    .not-home .content nav.uk-sticky-fixed {
        left: 9%;
    } 
}


@media screen and (max-width: 2100px) {
    .not-home .content nav.uk-sticky-fixed {
        left: 7%;
    } 
}

@media screen and (max-width: 2059px) {
    .not-home .content nav.uk-sticky-fixed {
        left: 5%;
    } 
}


@media screen and (max-width: 2000px) {
    .not-home main > header > div {

        padding: 18% 22% 5% 28%;
    
    }

    .not-home .content nav.uk-sticky-fixed {
        left: 4%;
    } 

}


@media screen and (max-width: 1900px) {
    main > header > div > h1 {
        font-size: 6rem;
    }
    

    .not-home .content nav.uk-sticky-fixed {
        left: 3%;
    } 

    #home main > header > div > p { 
        font-size: 4.5rem;
    }
}


@media screen and (max-width: 1800px) {
    main > header > div {
        padding: 5% 15% 12% 15%;
    }

    .not-home .content nav.uk-sticky-fixed {
        left: 2%;
    } 

    


    #about-us .team > ul li {
        width: calc(25% - 80px);

    }

}


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

    main > header > div > h1 {
        font-size: 5rem;
    }
    
    #home main > header > div > p {
        /* font-size: 3.25rem; */
    }

    main > header > div > button {
        font-size: 1.75rem;
    }



    .not-home .content .content-main {
        width: 70%;
    }
    
    
    #about-us #core-values li p {
        font-size: 1.25rem;
    }

    #pipeline-and-science table.old.expanded, #pipeline-and-science h2.old.expanded  {
        display: none;
    }

    #pipeline-and-science table.old.collapsed, #pipeline-and-science h2.old.collapsed  {
        display: block;
    }


}


@media screen and (max-width: 1550px) {
    .not-home .content nav.uk-sticky-fixed {
        left: 2%;
    } 

    #home main > header > div > h1 { 
        font-size: 4.5rem;
    }


    #about-us .team > ul li {
        width: calc(33.333% - 80px);
    }


    #pipeline-and-science .drug {
        /* width: 100%; */
        /* background-color: teal; */
        display: block;
    }

    #pipeline-and-science .drug > div {
        width: 100%;
    }

    #pipeline-and-science .drug > div.mechanism-figure {
        margin-top: 20px;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 40px;
    }

    



}

@media screen and (max-width: 1488px) {
    .not-home .content nav.uk-sticky-fixed {
        left: 1%;
    } 

    #about-us .team > ul li {
        width: calc(33.333% - 80px);
    }

    #home main > header > div > p {
        font-size: 3.75rem;
    }


    /* HIDE THESE COLUMNS IN THE TABLE */
    #pipeline-and-science table thead th.combination-agent, #pipeline-and-science table tbody td.combination-agent:not(.development-phase),  #pipeline-and-science table thead th.combination-partner, #pipeline-and-science table tbody td.combination-partner {
        width: 0;

        /* https://stackoverflow.com/questions/3695813/difference-between-visibilitycollapse-and-displaynone */
        visibility: collapse;
    }

    #pipeline-and-science table thead .phases > div:not(.grids) {
        font-size: 0.9rem;
    }


}


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

    body > header, footer {
        padding-left: 40px;
        padding-right: 40px;
    }


    header .uk-navbar-container {
        display: none;
    }

    header > button {
        display: inline-block;
    } 

    #home main > header {
        min-height: 623px;
    }

    main > header > div > h1 {
        font-size: 4.5rem;
    }

    #home main > header > div > p {
        font-size: 3.5rem;
    }

    .content-main {
        width: 95%;
    }

    .not-home main > header > div {

        padding: 32% 0% 5% 0%;
        text-align: center;
        /* width: 100%; */
    
    }

    
    .not-home .content {
        padding-left: 40px;
        padding-right: 40px;
    }

    .not-home .content nav {
        display: none;
        
    }


    .not-home .content .content-main {
        width: 100%;
        margin: 0;
        padding-left: 0;
    }

    #home main > header > div > h1 { 
        font-size: 3.75rem;
    }

    #home .latest-news ul {
        width: 95%;
    }
    
    #home .latest-news ul li {
        padding-left: 0;
        padding-left: 0;
    }

    #about-us #core-values li p {
        font-size: 1.5rem;
    }

    #about-us .team > ul li {
        width: calc(25% - 80px);
    }


    #pipeline-and-science table.old.expanded, #pipeline-and-science h2.old.expanded  {
        display: block;
    }
    
    #pipeline-and-science table.old.collapsed, #pipeline-and-science h2.old.collapsed  {
        display: none;
    }
    

    #pipeline-and-science table thead th.combination-agent, #pipeline-and-science table tbody td.combination-agent:not(.development-phase),  #pipeline-and-science table thead th.combination-partner, #pipeline-and-science table tbody td.combination-partner {
        width: 110px;

        /* https://stackoverflow.com/questions/3695813/difference-between-visibilitycollapse-and-displaynone */
        visibility: visible;
    }

    #pipeline-and-science table thead .phases > div:not(.grids) {
        font-size: 1.1rem;
    }

    #pipeline-and-science .drug {
        /* width: 100%; */
        /* background-color: teal; */
        display: flex;
    }

    #pipeline-and-science .drug > div {
        width: 47%;
    }

    
    #pipeline-and-science .drug > div.mechanism-figure {
        margin-top: 20px;
        margin-left: 40px;
        margin-right: 40px;
        margin-bottom: 0;
    }

    #contact .content .content-main svg#map-desktop {
        display: none;
    }
    
    #contact .content .content-main svg#map-mobile {
        display: block;
    }

    #contact .content .content-main svg path:not(.marker) {
        stroke-width: 0.5px;
    }

}

@media screen and (max-width: 1150px) {
    #home main > header {
        min-height: 515px;
    }

    main > header > div > h1 {
        font-size: 3.5rem;
    }
    
    #home main > header > div > p {
        /* top: 60px; */
        font-size: 3.25rem;
    }

    main > header > div > button {
        /* margin-top: 15px;
        top: 60px; */
    }

    #home main > header > div > h1 { 
        font-size: 3rem;
    }

    #about-us .team > ul li {
        width: calc(33.333% - 80px);
    }


    
    #pipeline-and-science table.old.expanded, #pipeline-and-science h2.old.expanded  {
        display: none;
    }

    #pipeline-and-science table.old.collapsed, #pipeline-and-science h2.old.collapsed  {
        display: block;
    }

    #pipeline-and-science table thead th.combination-agent, #pipeline-and-science table tbody td.combination-agent:not(.development-phase),  #pipeline-and-science table thead th.combination-partner, #pipeline-and-science table tbody td.combination-partner {
        width: 0;

        /* https://stackoverflow.com/questions/3695813/difference-between-visibilitycollapse-and-displaynone */
        visibility: collapse;
    }
}


@media screen and (max-width: 900px) {
    #home main > header {
        min-height: 484px;
    }

    main > header > div > h1 {
        font-size: 3.25rem;
    }
    
    main > header > div > p {
        /* top: 60px; */
        font-size: 1.75rem;
    }

    .not-home main > header > div {

        padding: 36% 0% 5% 0%;
    }

    .not-home main > header > div > h1 {
        font-size: 6rem;
    }
   
    #home main > header > div > h1 {
        font-size: 4rem;
    }

    #home main > header > div > h1 > br:nth-of-type(1) {
        display: block;
    }

    #about-us #missions #missions-curve {
        display: none;
    }

    #about-us #missions #missions-curve-mobile {
        display: block;
        width: 65%;
        margin: 0 auto;
    }

    #about-us #core-values {
        flex-wrap: wrap;
    }

    #about-us #core-values li {
        /* text-align: left; */
        width: 45%;
        margin-bottom: 20px;
    }

    #about-us #core-values li:last-of-type {
        margin-right: 25px;
    }

    #about-us #core-values li h3 {
        font-size: 2rem;
    }

    #about-us #core-values li p {
        font-size: 1.5rem;
    }

    #about-us .team > ul li {
        width: calc(33.333% - 80px);
    }


    #pipeline-and-science table.old.expanded, #pipeline-and-science h2.old.expanded  {
        display: block;
    }

    #pipeline-and-science table.old.collapsed, #pipeline-and-science h2.old.collapsed  {
        display: none;
    }


    #pipeline-and-science table.old thead .phases {
        display: none;
    }

    #pipeline-and-science table.old thead th.development-phase, #pipeline-and-science table.old tbody td.development-phase {
        border-right: none;
    }


    #pipeline-and-science table.old tbody td.development-phase > div:not(.grids) {
        text-indent: 0;
        background: none;
        width: 100%;
        height: 100%;

        width: 100% !important;
    }

    
    

    #pipeline-and-science table.old tbody td.development-phase > div.grids {
        display: none;
    }



    /* REVERT SPACING OF TABLE ROWS BACK TO DEFAULT */
    
    #pipeline-and-science table.old tbody .development-phase.row-top:not(.row-bottom) > div:not(.grids),  #pipeline-and-science table.old tbody .development-phase.row-bottom:not(.row-top) > div:not(.grids), #pipeline-and-science table.old tbody .development-phase.row-top.row-bottom > div:not(.grids), #pipeline-and-science table.old tbody .development-phase:not(.row-top):not(.row-bottom) > div:not(.grids) {
        /* This top value is same as padding-top */
        /* top: 20px;  */
        /* transform: translateY(25%); */

        transform: unset;
        position: static;
    }


    #pipeline-and-science table.old .row-top:not(.row-bottom) {
        padding-bottom: 20px;
    }

    #pipeline-and-science table.old .row-bottom:not(.row-top) {
        padding-top: 20px;
    }

    #pipeline-and-science .drug, #pipeline-and-science li:nth-of-type(even) .drug {
        /* width: 100%; */
        /* background-color: teal; */
        display: flex;
        flex-direction: column-reverse;
    }

    

    #pipeline-and-science .drug > div {
        width: 100%;
        margin-top: 20px;
    }

    #pipeline-and-science .drug > div.mechanism-figure {
        margin-right: auto;
        margin-left: auto;
    }

    #contact .content .content-main .addresses {
        
        display: block;
        
    }

    #contact .content .content-main .addresses .address {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 60px;
        width: 75%;
    }
    
}

@media screen and (max-width: 850px) {
    .not-home main > header > div {

        padding: 45% 0% 5% 0%;
    }
}

@media screen and (max-width: 775px) {
    #about-us .team > ul li {
        width: calc(50% - 80px);
    }

    #home main > header > div > p {
        font-size: 3rem;
    }


}


@media screen and (max-width: 680px) {
    #home main > header {
        min-height: 834px;
    }

    

    main > header > div {
        text-align: center;
        padding: 5% 10% 12% 10%;
    
    }

    main > header > div > h1 {
        font-size: 5rem;
        
        position: relative;
        
    }

    main > header > div > h1 > br:nth-of-type(1) {
        display: block;
    }

    main > header > div > h1 > br:nth-of-type(2) {
        display: block;
    }
    
    main > header > div > p {
        /* top: 140px; */
        /* text-align: right; */

        text-align: center;
        left: auto;
        transform: unset;
    }

    main > header > div > button {
        /* margin-bottom: 60px;
        margin-top: 120px; */
    }


    .content-main  {
        font-size: 1.75rem;
    }

    
    footer {
        display: block;
    }


    footer p {
        text-align: center;
    }
    

    footer .social-media {
        margin-top: 50px;
        text-align: center;
    }

    .not-home main > header > div {

        padding: 45% 0% 10% 0%;
    }

    


    #home main > header {
        background-image: url(../images/home-mobile.jpg);
        /* background-image: url(../images/home-mobile-bw.jpg); */

    }

    #home main > header > div > h1 {
        top: 60px;
        text-align: right;
    }

    #home main > header > div > p { 
        /* top: 225px; */
        font-size: 3rem;
        text-align: right;
        left: auto;
        right: 20px;
        width: 55%;
        bottom: 45%;
    }


    #home main > header > div > button {
        /* top: 140px; */
    }

    .not-home main > header > div > h1 {
        font-size: 4.5rem;
    }

    .not-home .content .content-main > li > a {
        font-size: 1.75rem;
    }



    #about-us main > header {
        background-image: url(../images/about-us-mobile.jpg);
        /* background-position: 0% 20%; */
    }

    #about-us #missions #missions-curve-mobile {
        width: 75%;

    }

    #about-us #core-values li {
        width: 100%;
        margin-right: 0;
        /* margin-bottom: 20px; */
    }

    #about-us #core-values li:last-of-type {
        margin-right: 0;
    }


    #about-us .profile-detailed .uk-modal-body {
        display: block;
        text-align: center;
    }

    #about-us .profile-detailed .uk-modal-body > img {
        margin-right: 0;
    }

    

    #pipeline-and-science main > header {
        /* background-image: url(../images/pipeline-and-science-mobile.jpg); */
        background-position: 100% 50%;
    }

    #pipeline-and-science table.old.expanded, #pipeline-and-science h2.old.expanded  {
        display: none;
    }

    #pipeline-and-science table.old.collapsed, #pipeline-and-science h2.old.collapsed  {
        display: block;
    }


    #pipeline-and-science table thead th.combination-agent, #pipeline-and-science table tbody td.combination-agent:not(.development-phase),  #pipeline-and-science table thead th.combination-partner, #pipeline-and-science table tbody td.combination-partner {
        width: 110px;

        /* https://stackoverflow.com/questions/3695813/difference-between-visibilitycollapse-and-displaynone */
        visibility: visible;
    }


    #pipeline-and-science table thead .phases {
        display: none;
    }


    #pipeline-and-science table.old thead th.development-phase, #pipeline-and-science table.old tbody td.development-phase {
        border-right: none;
    }


    #pipeline-and-science table tbody td.development-phase > div:not(.grids) {
        text-indent: 0;
        background-color: transparent;
        width: 100% !important;
        height: 100%;
    }

    #pipeline-and-science table:not(.old) tbody td.development-phase > div:not(.grids) {
        background: none;

    }
    

    #pipeline-and-science table tbody td.development-phase > div.grids {
        display: none;
    }



    /* REVERT SPACING OF TABLE ROWS BACK TO DEFAULT */
    
    #pipeline-and-science table tbody .development-phase.row-top:not(.row-bottom) > div:not(.grids),  #pipeline-and-science table tbody .development-phase.row-bottom:not(.row-top) > div:not(.grids), #pipeline-and-science table tbody .development-phase.row-top.row-bottom > div:not(.grids), #pipeline-and-science table tbody .development-phase:not(.row-top):not(.row-bottom) > div:not(.grids) {
        /* This top value is same as padding-top */
        /* top: 20px;  */
        /* transform: translateY(25%); */

        transform: unset;
        position: static;
    }


    #pipeline-and-science table.new .row-top:not(.row-bottom) {
        padding-bottom: 20px;
    }

    #pipeline-and-science table.new .row-bottom:not(.row-top) {
        padding-top: 20px;
    }
    
    #news main > header {
        /* background-image: url(../images/news-mobile.jpg); */
        background-position: center;
    }

    #contact main > header {
        /* background-image: url(../images/contact-mobile.jpg); */
    }

    #contact .content .content-main .addresses .address {
        width: 100%;
    }

}

@media screen and (max-width: 564px) {
    #home main > header {
        min-height: 858px;
    }

    .not-home main > header > div {

        padding: 60% 0% 10% 0%;
    }

    #about-us .team > ul li {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }


    #pipeline-and-science table thead th.combination-agent, #pipeline-and-science table tbody td.combination-agent:not(.development-phase),  #pipeline-and-science table thead th.combination-partner, #pipeline-and-science table tbody td.combination-partner {
        width: 0;

        /* https://stackoverflow.com/questions/3695813/difference-between-visibilitycollapse-and-displaynone */
        visibility: collapse;
    }

    #pipeline-and-science table thead th.development-phase, #pipeline-and-science table tbody td.development-phase {
        border-right: none;
    }

   
    
}

@media screen and (max-width: 500px) {
    #home main > header {
        min-height: 847px;
    }

    #home main > header > div > button {
        /* top: 120px; */
    }

    .not-home main > header > div {

        padding: 65% 0% 15% 0%;
    }

    .not-home .content .content-main > li > a {
        font-size: 2rem;
    }

    #about-us #missions #missions-curve-mobile {
        width: 100%;

    }


}

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

    body > header, footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    #home main > header {
        min-height: 718px;
    }

    main > header > div {
        padding: 5% 5% 12% 5%;
    
    }

    main > header > div > h1 {
        font-size: 3.5rem;
    }
    
    main > header > div > p {
        font-size: 2rem;
    }

    .content-main  {
        font-size: 1.5rem;
        

    }

    .content hr {
        margin-top: 35px;
    }


    #home main > header > div > h1 {
        top: 100px;
        
    }

    #home main > header > div > p {
        /* top: 200px; */
        font-size: 2rem;
    }

    #home main > header > div > button {
        /* top: 80px; */
    }

    #home .content-main p {
        margin-bottom: 35px;
    }


    #home .latest-news ul li h3 {
        font-size: 1.25rem;
    }

    .not-home main > header > div > h1 {
        font-size: 4rem;
    }

    .not-home .content .content-main > li > a {
        font-size: 1.75rem;
    }


}

@media screen and (max-width: 370px) {
    #home main > header {
        min-height: 708px;
    }

    .not-home main > header > div {

        padding: 75% 0% 15% 0%;
    }

    .not-home .content .content-main > li > a {
        font-size: 1.5rem;
    }
}



@media screen and (max-width: 330px) {
    #home main > header {
        min-height: 712px;
    }

    main > header > div > h1 {
        font-size: 3.5rem;
        
    }
    
    main > header > div > p {
        font-size: 2rem;
    }

    main > header > div > button {
        padding: 5px;
        /* margin-top: 0; */
        width: 95%;
    }


    #home main > header > div > h1 {
        top: 80px;
    }

    #home .latest-news ul li h3 {
        font-size: 1.25rem;
    }

    .not-home main > header > div {

        /* padding: 180% 0% 5% 0%; */
        padding: 85% 0% 15% 0%;
        

    }

}