@charset "utf-8";

/* CSS Document */

body, p {

    font-family: "Barlow", sans-serif;

    font-weight: 400;

    font-style: normal;

    font-size: 18px;

}

a {text-decoration: none;color: inherit;}

a:hover{color: var(--green);}

h1, h2, h3, h4 {

    font-family: "Lora", serif;

    font-optical-sizing: auto;

    font-weight: 400;

    font-style: normal;

}

:root {

    --green: #2a7c6f;

    --lightgreen: #bec358;

    --leafgreen: #bec358;

    --brown: #7c4b34;

    --beige: #ccc3bc;

    --darkbrown: #514d4a;

    --grassgreen: #2a7c70;    

    --darkgreen: #0b2a25;

    --orange: #e89c64;

}

.bg-green{background-color: var(--green);}

.bg-grassgreen{background-color: var(--grassgreen);color: #fff;}

.bg-leafgreen{background-color: var(--leafgreen);}

.brown{color:var(--brown);}

.beige{color:var(--beige);}

.orange{color:var(--orange);}

.darkbrown{color:var(--darkbrown);}

.bg-beige{background-color:var(--beige);}

.logo {

    width: 260px;

    height: auto;

    padding: 10px 0;

}

li.nav-item {

    margin-left: 8px;

    letter-spacing: 1px;

    color: #745b25;

}

li.nav-item a {

    color: #7c4b34;

    padding-left: 20px;

    padding-right: 5px;

}

li.nav-item a:hover {

    color: #fff;

    background-color: var(--brown);  

}

ul.dropdown-menu.dropdown-menu-end.show li {

    border-radius: 0;

       padding: 5px;

}

a.dropdown-item {

    padding: 8px 4px;

    font-size: 18px;

}

a.dropdown-item:hover {

    border-radius: 0!important;

}

ul.dropdown-menu.dropdown-menu-end.show {

    background-color: #f7f4f2;

}

.banner {

    height: 50vh;

    position: relative;

    background-image: url("../assets/img/banner-01.jpg");

    background-size: cover;

    margin-top: 125px;

}

.ban-hd {

    position: absolute;

    color: #fff;

    border: 1px;

    width: 55%;

    bottom: 60px;

    left: 100px;

    text-wrap: balance;

}

.ban-hd h1 {

    font-size: 50px;

}

.sec-hd {

    font-size: 40px;

    line-height: 68px;

}

.sec-hd2 {

    font-size: 30px;

    text-align: left;

    margin-bottom: 36px;

}

.green {

    color: var(--green);

}

.sep-90 {

    height: 90px;

}

.sep-50 {

    height: 50px;

}

.sep-25 {

    height: 25px;

}



.sep-shade {

    box-shadow: 0 9px 10px -4px rgba(0, 0, 0, 0.2);

    height: 12px;

    width: 50%;

margin: auto;

}

.sep-yel-line {

    height: 6px;

    background-color: #f1b531;

}

.barlow-regular {

    font-family: "Barlow", sans-serif;

    font-weight: 400;

    font-style: normal;

}

.blurb {

    font-family: "Barlow", sans-serif;

    font-weight: 200;

    font-size: 32px;

    font-style: normal;

    opacity: 80%;

    line-height: 40px;

    padding-bottom: 12px;

}

.icn {

    float: left;

    height: 68px;

    padding-right: 24px;

}

button.btn.btn-success {

    border-radius: 100px;

    padding: 9px 20px;

    font-size: 14px;

}

  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container-nav {

    max-width: 1320px;

  }

.row.ra img {

    width: 100%;

    margin-bottom: 35px;

}

.ra-title {height: 110px}

.ra-numb {

    position: absolute;

    font-family: "Barlow", sans-serif;

    font-weight: 200;

    font-size: 54px;

    opacity: 65%;

    margin-top: -17px;

}

.ra-name {

    font-family: "Lora", serif;

    font-size: 23px;

    font-optical-sizing: auto;

    font-weight: 400;

    font-style: normal;

    color: var(--brown);

    line-height: 30px;

    margin: -11px 0 0px 80px;

}

/*.ra-box:hover .ra-img {transform: scale(1.2); transition: all 0.3s ease-in-out;overflow: hidden;}*/



.ra-box:hover {background-color: #f7f4f2;}

.ra-box>a:hover {

    color: #000;

}

.ra-box:hover .ra-name {

    color: var(--green);

}

.qt-box {

    font-family: "Lora", serif;

    font-size: 24px;

    font-style: italic;

    margin: 80px 0;

}

.qt-txt {

    color: white;

    padding-left: 136px;

    margin-top: -8px;

}

.qt-symb{float: left;}

.qt-attrib {color: #f1f27b;float: right;font-size: 20px;margin-top: 10px;}

.cent{margin: auto;text-align: center;}

.bg-leaves{

    background: 

    url("../assets/img/bg-leaves-top-right.png") no-repeat top right, /* Layer 1 */

    url('../assets/img/bg-leaves-bottom-left.png') no-repeat bottom left;

}

.bg-grass {

    background:  url('../assets/img/bg-grass-03.png') repeat-x top;

       background-color: var(--eige);

    height: 54px;

}

.home-footer > .bg-grass {

       background-color: var(--beige);

}

.study-img {

    padding-right: 50px;

}

.study-details {

    padding-left: 50px;

}

.funding{margin-top: 15px;margin-bottom: 30px; font-style: italic;opacity: 75%;}

.bg-leaves-footer {

      background:  url('../assets/img/bg-leaves-footer.png') no-repeat bottom left;

       background-color: var(--green);

    background-position-y:top;    

    color:#f5f5dc;

}

.footer2 {background-color: var(--darkgreen);color: var(--beige);font-size: 14px;}

.footer2 a{color: var(--orange);}

.footer2 a:hover{color: var(--beige);}



.inner-main-push{margin-bottom: 120px;}

.inner-about-push{margin-bottom: 33px;}



/* Scroll to top */



#scrollToTopBtn {

    position: fixed;

    bottom: 30px;

    right: 30px;

    padding: 0;

    background-color: white;

    color: var(--orange);

    border: none;

    border-radius: 50%;

    cursor: pointer;

    z-index: 1000;

-webkit-box-shadow: 2px 2px 4px 2px rgba(120,120,120,0.5);

-moz-box-shadow: 2px 2px 4px 2px rgba(120,120,120,0.5);

box-shadow: 2px 2px 4px 2px rgba(120,120,120,0.5);

    

}



#scrollToTopBtn:hover {

     color: var(--lightgreen);

}



/* /Scroll to top */



/* Styles for the content section */



.content {

  width: 77%;

  margin: 50px auto;

  font-family: 'Merriweather', serif;

  font-size: 17px;

  color: #6c767a;

  line-height: 1.9;

}

@media (min-width: 500px) {

  .content {

    width: 43%;

  }

  #button {

    margin: 30px;

  }

}

.content h1 {

  margin-bottom: -10px;

  color: #03a9f4;

  line-height: 1.5;

}

.content h3 {

  font-style: italic;

  color: #96a2a7;

}





/* Devices 1199px and down) */

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

    .ban-hd {

        width: 60%;

    }

    .sec-hd {

        font-size: 35px; /*text-align: center;*/

    }

    .ban-hd h1 {

        fontsize: 34px;

    }

    /*    .icn{float: none;text-align: center;}*/

}



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

    .ban-hd {

        width: 85%;}

    .sec-hd {

        font-size: 35px; }

    .ban-hd h1 {

        fontsize: 33px;}

}



/* Small devices 768 and down) */

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

    .banner {

        height: 40vh;

        margin-top: 0px;

    }

    

    .ban-hd {

        width: 85%;

    }

    .ban-hd h1 {

        font-size: 35px;

        width: 100%;

    }

    .ban-hd {

        position: absolute;

        color: #fff;

        border: 1px;

        width: 75%;

        bottom: 26px;

        left: 54px;

        text-wrap: balance;

    }

    .sec-hd {

        font-size: 35px;

     /*   text-align: center;*/

    }

    .icn {

        float: left;

        text-align: center;

    }

}



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

.ra-numb {

    font-size: 31px;

    opacity: 75%;

    margin-top: -9px;

}

.ra-name {

    font-size: 20px;

    line-height: 24px;

    margin: -11px 0 0px 40px;

}

 .study-img {

    padding-right: 30px;

}

.study-details {

    padding-left: 12px;

} 

    .sep-90{height: 40px;}

    .sep-50{height: 25px;}

         .banner {

   

        margin-top: 0px;

    }

}



@media (min-width: 992px) {

.navbar-expand-lg {

    flex-wrap: nowrap;

    justify-content: flex-start;

    box-shadow: 0px 4px 12px 3px rgb(0 0 0 / 24%);

    position: fixed;

    width: 100%;

    z-index: 100;

    background-color: white;

}

    

}



@media (max-width: 992px) {

.inner-main-push{margin-bottom: 0px;}

    .inner-about-push{margin-bottom: 0;}

}





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

.ra-box {

    margin-bottom: 60px;

    border-bottom: 4px solid #ccc;

    padding-bottom: 14px;

}

    .ra-title {

    height: auto;

    margin-bottom: 34px;

}

.ra-name {

    font-size: 26px;

    line-height: 30px;

    margin: -11px 0 0px 40px;

}    

 .bg-leaves {

    background-size: 30%;

}

    .qt-box {

    margin: 80px 10%;

        font: 22px;

}

.study-img {

    padding: 0;

    margin-bottom: 17px;

}

    .make100{width: 100%;}

    

    

}

    



/* Small devices (phones, 600px and down) */

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

    .banner {

        height: 40vh;

    }

    .ban-hd {

        width: 75%;

    }

    .ban-hd h1 {

        font-size: 26px;

        width: 100%;

    }

    .blurb {

        font-size: 28px;

        opacity: 70%;

        line-height: 36px;

        padding-bottom: 12px;

    }

    h3.green.sec-hd{font-size: 30px;}

        .qt-box {

    margin: 71px 22px;

    font-size: 22px;

}



.qt-symb img {

    width: 50%;

    height: auto;

}

.qt-txt {

    color: white;

    padding-left: 0px;

    margin-top: -8px;

    text-align: left;

} 

}

/* V small devices (phones, 490px and down) */

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

    .sep-90{height: 40px;}

    .sep-50{height: 20px;}

    .banner {

        height: 40vh;

    }

    .ban-hd {

        width: 75%;

    }

    .ban-hd h1 {

        font-size: 28px;

        width: 100%;

    }

    .blurb {

        font-size: 24px;

        opacity: 70%;

        line-height: 30px;

        padding-bottom: 12px;

    }

.row.ra img {

    width: 100%;

    margin-bottom: 10px;

}

.ra-title {

    height: auto;

    margin-bottom: 20px;

}

.ra-numb {

    font-family: "Barlow", sans-serif;

    font-weight: 200;

    font-size: 30px;

    opacity: 65%;

    margin-top: -6px;

    float: left;

}

.ra-name {

    font-family: "Lora", serif;

    font-size: 22px;

    font-optical-sizing: auto;

    font-weight: 400;

    font-style: normal;

    color: var(--brown);

    line-height: 31px;

    margin: 16px 0 0px 42px;

}

    p{font-size: 16px;}

    .bg-leaves {

    background: url("../assets/img/bg-leaves-top-right.png") no-repeat top right, /* Layer 1 */

    url('../assets/img/bg-leaves-bottom-left.png') no-repeat bottom left;

    background-size: 34%;

}

        #scrollToTopBtn {

    right: 8px;

}

}