/*
Theme Name: obf-new
Author: kushinauwu
Description: basic revised obf homepage theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

body {
    font-family: 'K2D', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.7px;
    padding: 0px;
    margin: 0;
    overflow-x: hidden;
    word-break: break-word;
}

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px;
    height: auto;
}

img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

section {
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    color: #275aa1;
    padding: 0;
    text-align: left;
    margin-top: 1em;
    margin-bottom: 0.4em;
}


h1 {
    font-size: 42px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 32px;
}


h4 {
    font-size: 28px;
}

h5 {
    font-size: 24px;
}

h6 {
    font-size: 20px;
}

li {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    color: darkslategray;
}

li li {
    margin-left: 1%;
}

li li li {
    margin-left: 1%;
}

a {
    transition: color 0.2s;
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-size: inherit;
}

a:hover {
    text-decoration: none;
}

p {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
}

/*NAVIGATION*/
.navbar {
    margin-top: 0px;
    padding-top: 10px;
    margin-bottom: 0px;
    padding-bottom: 10px;
    background-color: whitesmoke;
    padding-left: 15px;
    padding-right: 15px;
    border: transparent;
}

.navbar .navbar-logo {
    padding: 0;
    margin-left: 0;
}

.navbar-header .navbar-logo img {

    max-height: 100px;
    width: auto;
    vertical-align: middle;
    border: 0;
}

.navbar ul {
    list-style: none;
    margin-bottom: auto;
    margin-top: 10px;
    text-align: right;
}

#menu-main-menu .menu-item {
    padding: 10px;
    text-align: left;
    display: inline-block;
    transition: 0.5s ease;
    font-family: 'K2D', sans-serif;
}

#menu-main-menu .menu-item:hover {
    background-color: rgba(128, 0, 128, 0.2);
    border-radius: 25px;
    text-decoration: none;
}

.navbar ul li a {
    display: block;
    padding-top: 0px;
    color: darkslateblue;
    font-family: 'K2D', sans-serif;
    font-weight: normal;
    font-style: normal;
    border-bottom: 2px solid transparent;
    padding-bottom: 0px;
    margin-bottom: 0px;
    font-size: 22px;
}

#menu-main-menu .nav-link:hover,
#menu-main-menu .nav-link:focus {
    display: block;
    padding-top: 0px;
    color: darkslateblue;
    background-color: transparent;
    font-weight: normal;
    font-style: normal;
    padding-bottom: 0px;
    margin-bottom: 0px;
    font-size: 22px;
}

.active {
    background-color: #c4dff5;
    border-radius: 25px;
    text-decoration: none;
}

.navbar-collapse .dropdown .dropdown-menu {
    display: none;
    position: absolute;
    background-color: rgba(196, 245, 198, 0.9);
    /* main link navbar dropdown hover bg color*/
    width: auto;
    height: auto;
    box-shadow: 8px 8px 16px 0 rgba(128, 0, 128, 0.2);
    z-index: 1;
    text-align: left;
    left: 0;
    border-radius: 0 25px 25px 25px;
    margin-top: 0;
}

.dropdown:hover .dropdown-menu {
    display: inline-grid;
}

#menu-main-menu .menu-item-has-children:hover {
    border-radius: 25px 25px 0 0;
}

.dropdown .dropdown-menu li a {
    color: darkslategray;
    font-size: 18px;
    transition: 0.3s ease;
    padding-left: 2px;
}

.dropdown-menu li a:hover {
    background-color: transparent;
    background-image: none;
    border-radius: 10px;

}

#menu-main-menu .dropdown ul li {
    padding: 5px;
}

.dropdown-menu > .active > a {
    text-decoration: none;
    background-image: none;
    background-color: transparent;
    outline: 0;
}

.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
    color: darkslateblue;
    text-decoration: none;
    background-color: transparent;
    outline: 0;
}

.dropdown-menu .current-menu-item {
    background-color: transparent;
}

.dropdown-menu .dropdown .dropdown-menu {
    display: none;
}

.dropdown-menu .dropdown:hover .dropdown-menu {
    position: absolute;
    display: inline-block;
    left: 100%;
    top: 0%;
    border-radius: 0 25px 25px 25px;
    z-index: -1;
    border: transparent;
}


#menu-main-menu .dropdown .dropdown-menu .dropdown:hover {
    border-radius: 0;
    background-color: rgb(186, 196, 188);
}

i {
    border: solid darkslateblue;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    margin-left: 3px;
}

.down {
    transform: rotate(45deg) translateY(-5px);
}

#breadcrumbs {
    list-style: none;
    overflow: hidden;
    margin: 10px 0;
    padding-right: 2%;
    margin-left: 0;
    padding-left: 0;
}

#breadcrumbs li {
    display: inline-block;
    padding: 0;
    margin: 0 1% 0 0;
    font-family: 'K2D', sans-serif;
}

#breadcrumbs li a {
    font-family: 'K2D', sans-serif;
}

#breadcrumbs .separator {
    font-size: 18px;
    font-weight: 100;
    color: #bbb;
}

/*ABOUT SECTION */

.container-fluid {
    margin-left: 2%;
    margin-right: 2%;
}

.about-section img {
    /*max-height: 480px;*/
    border-radius: 100px 0 0 100px;
}

.about-section p {
    font-size: 16px;
    color: rgb(001, 017, 032);
    margin-bottom: 10px;
    font-family: 'Lato', sans-serif;
    margin-left: 6%;
    margin-right: 6%;
    padding-left: 15px;
    padding-right: 15px;
}

.about-section h1 {
    margin-left: 6%;
    margin-right: 6%;
    padding-left: 15px;
    padding-right: 15px;
}

.container-fluid {
    margin-left: 2%;
    margin-right: 2%;
}

.about-content-button {
    margin-left: 6%;
    margin-right: 6%;
    padding-left: 15px;
    padding-right: 15px;
}

.about-content-button a {
    position: relative;
    top: 30px;
    display: inline-block;
    color: darkslategray;
    text-shadow: 1px 1px 2px #a6a6a6;
    padding: 10px 25px 10px 25px;
    font-style: normal;
    font-family: 'Montserrat', serif;
    border-radius: 0 25px 25px 0;
    background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%);
    transition: 0.5s ease-in-out;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}

.about-content-button a:hover {
    background-position: right center;
    background-image: linear-gradient(to right, #8fd3f4 0%, #84fab0 51%);
    color: grey;
}

/*news*/

.news-section {
    background-color: #1b2e25;
    margin-top: 3%;
    padding: 2% 2% 2% 0;
    transition: 1s ease;
}

.news-section h1 {
    color: #88eef7;
    font-family: 'Montserrat', sans-serif;
    margin-top:0;
}

.news-section img {
    border-radius: 0 100px 100px 0;
    transition: 0.3s ease-in-out;
}

.news-section ul {
    list-style: none;
    padding-left: 0;
    display: block;
}

.blog-list li {
    border-bottom: 1px solid gray;
    padding: 10px 0;

}

.news-section ul li a {
    color: whitesmoke;
    font-family: 'Lato', sans-serif;
    font-size: 22px;
}

.blog-list li a:hover {
    color: skyblue;

}

.latest-news-button a {
    color: darkslategray;
    text-shadow: 1px 1px 2px #a6a6a6;
    padding: 10px 15px 10px 25px;
    font-family: 'Montserrat', serif;
    font-weight: bold;
    border-radius: 25px 0 0 25px;
    background-image: linear-gradient(to left, #84fab0 0%, #8fd3f4 51%);
    margin-top: 3%;
    transition: 0.5s ease-in-out;
    font-size: 20px;
    text-decoration: none;
}

.latest-news-button a:hover {
    background-position: right center;
    background-image: linear-gradient(to left, #8fd3f4 0%, #84fab0 51%);
    color: grey;
}

/*fellowships*/


.fellowships-section {
    margin-top: 3%;
}

.fellowships-section h1 {
    margin-left: 6%;
    margin-right: 6%;
    padding-left: 15px;
    padding-right: 15px;
}

.fellowships-section p {
    font-size: 16px;
    font-family: 'Lato', sans-serif;
    margin-left: 6%;
    margin-right: 6%;
    padding-left: 15px;
    padding-right: 15px;
}

.fellowships-section ul {
    margin-left: 6%;
    margin-right: 6%;
    padding-left: 15px;
    padding-right: 15px;
}

.fellowships-section img {
    border-radius: 100px 0 0 100px;
}

.fellowships-section ul li {
    border-bottom: 1px solid grey;
    padding: 15px 0 5px 0;
    list-style: none;
}

.fellowships-section ul li a {
    display: block;
    padding: 0;
    color: #2d95b5;
    background-color: transparent;
    text-decoration: none;
    font-size: 22px;
    font-family: 'Lato', sans-serif;
    transition: 0.3s ease;
}

.fellowships-section ul li a:hover {
    color: purple;

}

.fellowships-apply-button {
    margin-left: 6%;
    margin-right: 6%;
    padding-left: 15px;
    padding-right: 15px;
}

.fellowships-apply-button a {
    color: darkslategray;
    text-shadow: 1px 1px 2px #a6a6a6;
    padding: 10px 25px 10px 25px;
    font-weight: bold;
    font-family: 'Montserrat', serif;
    border-radius: 0 25px 25px 0;
    background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%);
    transition: 0.3s ease-in-out;
    font-size: 20px;
    margin-top: 3%;


}

.fellowships-apply-button a:hover {
    background-position: right center;
    background-image: linear-gradient(to right, #8fd3f4 0%, #84fab0 51%);
    color: grey;
}

/*PROJECTS SECTION*/

.projects-section {
    margin-top: 3%;
    background-color: #1b2e25;
    margin-left: auto;
    margin-right: auto;
    opacity: 1;
    transition: 1s ease;
}

.projects-section h1 {
    color: #88eef7;
}

.projects-list {
    list-style: none;
    margin-top: 2%;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}

.projects-list li {
    margin-bottom: 6%;
    text-align: center;
}

.projects-section ul li a img {
    padding: 8px;
    /* margin-bottom: 20px; */
    border: 3px solid;
    border-bottom-color: rebeccapurple;
    border-top-color: deepskyblue;
    border-left-color: rebeccapurple;
    border-right-color: deepskyblue;
    border-radius: 25%;
    transition: 0.5s ease-in-out;
    height: 150px;
    width: 150px;
}

.projects-section ul li a img:hover {
    border-bottom-color: deepskyblue;
    border-top-color: rebeccapurple;
    border-left-color: deepskyblue;
    border-right-color: rebeccapurple;
}

.projects-section ul li a {
    margin-top: 0;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    color: whitesmoke;
    /*project titles*/
    display: block;
    padding: 10px 0px;
    background-color: transparent;
    text-decoration: none;
    font-size: 26px;
    letter-spacing: 0.7px;
    transition: 0.3s ease;
}

.projects-section ul li a:hover {
    color: skyblue;
}

.projects-button {
    text-align: center;
}

.projects-button .button {
    display: inline-block;
    color: darkslategray;
    text-shadow: 1px 1px 2px #a6a6a6;
    padding: 15px 25px 15px 25px;
    margin-bottom: 1em;
    font-weight: bold;
    font-family: 'Montserrat', serif;
    font-size: 20px;
    border-radius: 25px;
    background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%);
    transition: 0.3s ease-in-out
}

.projects-button .button:hover {
    background-position: right center;
    background-image: linear-gradient(to right, #8fd3f4 0%, #84fab0 51%);
    color: grey;
}

/*EVENTS SECTION*/
.events-section,
.join-section {
    margin-left: 0;
    margin-right: 0;
    height: 100%;
    width: 100%;
    opacity: 1;
    transition: 1s ease;
}


.events-list,
join-list {
    list-style: none;
    margin-top: 3%;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    margin-left: auto;
    margin-right: auto;
}

.events-list .event-details,
.join-list .join-details {
    text-align: center;
}

.events-list .event-details img {
    padding: 30px;
    margin-bottom: 20px;
    height: 250px;
    width: 250px;
    border: 5px skyblue;
    object-fit: contain;
    border-radius: 50%;
    border-style: dashed;
    transition: 0.3s ease-in-out;
}

.events-list .event-details img:hover {
    background-color: skyblue;
    /*event icon border hover bg color*/
    border-radius: 70px;
}

.events-list .event-details .event-name,
.join-list .join-details .join-title {
    margin-top: 0;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    text-decoration: none;
    font-size: 26px;
    letter-spacing: 0.7px;
    transition: 0.3s ease;
}

.events-list .event-details .event-date,
.event-location {
    margin-top: 0;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    color: dimgray;
    font-size: 22px;

}

/*Board of Directors*/
.board-section {
    background-color: #1b2e25;
    margin-left: 0;
    margin-right: 0;
    opacity: 1;
    transition: 1s ease;
}


.board-section h1 {
    color: #88eef7;
}

.members {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.member-photo {
    border: 1px solid ghostwhite;
    border-radius: 200px;
    height: 200px;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}

.member-list {
    list-style: none;
    margin-top: 1em;
}

.board-section .member-list .member-details {
    margin-bottom: 1em;
    text-align: center;
}

.board-section .member-list .member-details img {
    padding: 10px;
    margin-bottom: 20px;
    height: 100%;
    width: 100%;
    border: 1px solid whitesmoke;
    border-radius: 200px;
    transition: 0.3s ease-in-out;
    object-fit: contain;
}


.member-list .member-details .member-name a {
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    text-decoration: none;
    font-size: 24px;
    letter-spacing: 0.7px;
    transition: 0.3s ease;
    color: whitesmoke;
}

.member-list .member-details .member-position {
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    color: lightblue;
    font-size: 22px;
}

.board-button {
    text-align: center;
}

.board-button .button {
    display: inline-block;
    color: darkslategray;
    text-shadow: 1px 1px 2px #a6a6a6;
    padding: 15px 25px 15px 25px;
    margin-bottom: 1em;
    font-weight: bold;
    font-family: 'Montserrat', serif;
    font-size: 20px;
    border-radius: 25px;
    background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%);
    transition: 0.3s ease-in-out
}

.board-button .button:hover {
    background-position: right center;
    background-image: linear-gradient(to right, #8fd3f4 0%, #84fab0 51%);
    color: grey;
}


/*JOIN SECTION*/

.join-section {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1em;
    transition: 0.3s ease;
}


.join-list {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    margin-left: auto;
    margin-right: auto;
}

.join-list .join-image {
    height: 205px;
    width: 205px;
    border: 3px solid grey;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    transition: 0.2s ease-in-out;
}

.join-image:hover {
    border-radius: 10%;
}

.join-list .join-details img {
    padding: 15px;
    margin-bottom: 20px;
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: 205px;
    transition: 0.3s ease-in-out;
}

/*FOOTER SECTION*/
.footer-section {
    padding: 10px 0;
    background-color: whitesmoke;
    margin-top: 0;
}

.footer-section h3 {
    color: #275aa1;
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
}

.footer-section p {
    margin-bottom: 30px;
    color: darkslategray;
    margin-left: 2%;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    text-align: left;
}

.footer-sub-section {
    display: grid;
    grid-template-columns: 50% 50%;
}

.organization,
.connect {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.footer-section .org-menu {
    list-style: none;
    padding-left: 0;
}

.footer-section .org-menu .org-menu-item a {
    color: darkslategray;
    transition: color 0.2s;
    font-family: 'Lato', sans-serif;
    padding: 20px;
    font-size: 24px;
}

.footer-section .org-menu .org-menu-item a:hover {
    color: dodgerblue;
}

.networks {
    display: grid;
    grid-template-columns: 20% 20% 20% 20%;
}

.footer-logo {
    padding: 10px;
}

.credits {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    text-align: center;
}


/*Comments form styles*/
#respond {
    background: #f2f2f2;
    padding: 1% 2%;
    width: 80%;
}

/* Highlight active form field */
h2.screen-reader-text {
    display: none;
}

h2.comment-reply-title {
    font-family: 'Montserrat', serif;
    font-size: 18px;
}

p.comment-notes {
    font-size: 16px;
}


#respond input[type=text],
textarea {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    width: 50%;
    height: auto;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid #DDDDDD;
}

.required {
    color: red;
}

hr {

    background-color: dimgray;
}

#comments label {
    display: block;
    font-size: 18px;
    font-weight: normal;
    color: dimgray;
}

#respond input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
textarea:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    margin: 5px 1px 3px 0px;
    border: 2px solid rgba(81, 203, 238, 1);
}

#comments #author,
#comments #email,
textarea {
    font-family: 'Lato', sans-serif, "Open Sans", "Droid Sans", Arial;
    color: #1d1d1d;
    letter-spacing: 0.7px;
}

#url {
    color: #1d1d1d;
    font-family: "Luicida Console", "Courier New", "Courier", monospace;
}

.comments-title {
    font-family: 'Montserrat', serif;
    font-size: 18px;
    font-weight: bold;
}

.comment-list {
    padding-top: 20px;
}

.comment {
    padding-bottom: 20px;
}

.pingback {
    font-style: italic;
}

cite.fn {
    font-style: normal;
    font-weight: bold;
    margin-left: 5px;
}

.commentmetadata {
    margin-top: 10px;
    font-size: 16px;
}

span.says {
    font-style: italic;
}

input#submit {
    background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 99%);
    border-radius: 20px;
    border: 1px solid dimgray;
    display: inline-block;
    cursor: pointer;
    color: darkslategray;
    font-family: 'Montserrat', serif;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 15px;
    text-decoration: none;
}

input#submit:hover {
    background: linear-gradient(to right, #8fd3f4 0%, #84fab0 99%);
}

input#submit:active {
    position: relative;
    top: 1px;
}

.page-numbers {
    font-family: 'K2D', sans-serif;
}

.errorpage-wrapper a {
    font-family: 'Montserrat', sans-serif;
}


@media only screen and (max-width: 1024px) {
    .dropdown:hover .dropdown-menu {
        width: 120%;
    }

    .dropdown .dropdown-menu li a {
        white-space: normal;
    }
}

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


    .news-section {
        display: flex;
        flex-wrap: nowrap;
    }

    .members {
        grid-template-columns: 33% 33% 33%;
    }

    .events-list .event-details img {
        height: 24vw;
        width: 24vw;
    }
}

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

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: 'Montserrat', sans-serif;
        color: #275aa1;
        padding: 0;
        text-align: left;
        margin-top: 3vh;
    }

    h2 {
        font-size: 4.8vh;
    }

    h3 {
        font-size: 4.5vh;
    }


    h4 {
        font-size: 4.2vh;
    }

    h5,
    h6 {
        font-size: 4vh;
    }

    li {
        font-family: 'Lato', serif;
        color: darkslategray;
    }

    li li {
        margin-left: 1%;
    }

    li li li {
        margin-left: 1%;
    }

    body {
        font-family: 'K2D', serif;
        font-size: 15px;
        line-height: 1.5;
        letter-spacing: 0.7px;
        padding: 0px;
        margin: 0;
        overflow-x: hidden
    }

    .container {
        margin-left: auto;
        margin-right: auto;
        height: auto;
    }

    img {
        height: auto;
        max-width: 100%;
        vertical-align: middle;
    }

    section {
        display: block;
    }

    h1 {
        font-size: 5vh;
        margin-bottom: 1vh;
        color: #275aa1;
        /* section headings text*/
        font-family: 'Montserrat', sans-serif;
        padding: 0;
        text-align: left;
    }

    a {
        transition: color 0.2s;
        text-decoration: none;
        font-family: 'Lato', serif;
        font-size: inherit;
        letter-spacing: inherit;
        word-break: break-word;
    }

    a:hover {
        text-decoration: none;
    }

    p {
        font-family: 'Lato', serif;
        letter-spacing: normal;
    }

    /*NAVIGATION*/
    .navbar {
        margin-top: 0px;
        padding-top: 10px;
        margin-bottom: 0px;
        padding-bottom: 10px;
    }

    .navbar .navbar-header .icon-bar {
        background-color: #275aa1;
        margin-bottom: 1vh;
        padding: 0 3vh 0.7vh 3vh;
        border-radius: 1vh;
    }

    .navbar-header {
        float: none;
    }

    .navbar .navbar-logo {
        margin-left: 0;
    }

    .navbar .navbar-header .navbar-logo img {
        margin-top: 0;
        padding-bottom: 0;
        display: inline;
        max-width: 50%;
    }

    .navbar-fixed-top .navbar-collapse,
    .navbar-fixed-bottom .navbar-collapse {
        max-height: 100%;
    }

    .navbar ul {
        list-style: none;
        width: 100%;
    }

    .navbar ul li {
        padding: 0;
        text-align: right;
        display: block;
        transition: 0.5s ease;
    }

    .navbar ul li:hover {
        background-color: rgba(196, 245, 198, 0.9);
        border-radius: 0;
        text-decoration: none;
    }

    .navbar ul li a {
        display: block;
        padding-top: 0px;
        color: darkslateblue;
        font-weight: normal;
        font-style: normal;
        padding-bottom: 0px;
        margin-bottom: 0px;
        font-size: 4vh;
        text-align: right;
    }

    #menu-main-menu .nav-link:hover,
    #menu-main-menu .nav-link:focus {
        font-size: 4vh;
    }

    #menu-main-menu .dropdown-menu .active {
        border-radius: 0;
    }

    #menu-main-menu .menu-item {
        margin-top: 5px;
        display: block;
        padding: 3px 0;
        text-align: left;
        transition: 0.5s ease;
        font-family: 'K2D', sans-serif;
    }

    #menu-main-menu .dropdown-menu .menu-item {
        margin-top: 0px;
    }

    .navbar-collapse .dropdown .dropdown-menu {
        position: relative;
        width: 100%;
        height: auto;
        box-shadow: none;
        z-index: 1;
        border-radius: 0;
        margin-top: 0;
        transition: 0.5s ease;
    }

    .dropdown-menu {
        padding: 0;
    }

    .dropdown-menu li {
        display: block;
    }

    .dropdown .dropdown-menu li a {
        color: darkslategray;
        font-size: 2.7vh;
        transition: 0.5s ease;
    }

    .navbar .dropdown .dropdown-menu li:hover {
        background-color: transparent;
    }

    #menu-main-menu .dropdown-menu .menu-item:hover {
        border-radius: 0;
    }


    .dropdown-menu li a:hover {
        background-image: none;
        border-radius: 0;

    }

    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 1.5vh;
    }

    i {
        border: solid darkslateblue;
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 3px;
        margin-left: 0px;
        margin-right: 10px
    }

    .down {
        transform: rotate(45deg) translateY(-5px);
    }

    .dropdown-menu .dropdown .dropdown-menu {
        display: none;
    }

    .dropdown-menu .dropdown:hover .dropdown-menu {
        position: absolute;
        display: inline-block;
        left: 100%;
        top: 0%;
        border-radius: 0 25px 25px 25px;
        z-index: -1;
        border: transparent;
    }

    #menu-main-menu .dropdown .dropdown-menu .dropdown:hover {
        border-radius: 0;
        background-color: rgb(186, 196, 188);
    }


    .footer-section {
        padding-top: 4vh;
        background-color: whitesmoke;
        /* footer bg color */
        margin-top: 0;
        text-align: center;
    }

    .footer-section h3 {
        margin-bottom: 1vh;
        margin-top: 3vh;
        color: #275aa1;
        /* footer heading color */
        font-family: 'Montserrat', sans-serif;
        font-size: 4vh;
        word-break: break-word;
    }

    .organization,
    .connect {
        padding-left: 4%;
        padding-right: 4%;
    }

    .footer-section p {
        margin-bottom: 2vh;
        color: darkslategray;
        /* footer text color */
        font-family: 'Lato', sans-serif;
        font-size: 3vh;
    }

    .footer-section input {
        text-align: center;
        border-radius: 20px;
        background-color: rgba(147, 112, 219, 0.3);
        padding: 1vh;
    }

    .footer-section button {
        background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%);
        /* footer section button bg color */
        position: relative;
        padding-bottom: 1.5vh;
        padding-top: 1.5vh;
        padding-left: 2vh;
        padding-right: 2vh;
        border-radius: 20px;
        margin-left: 2vh;
        font-family: 'Montserrat', serif;
        font-weight: bold;
        border: none;
        box-shadow: 0.1vh 0.1vh 1.5vh purple;
        transition: 0.2s ease-in-out;
    }

    .footer-section button:hover {
        color: whitesmoke;
    }

    .footer-section .org-menu {
        list-style: none;
        text-align: left;
    }

    .footer-section .org-menu .org-menu-item a {
        color: darkslategray;
        /* footer organisation text color */
        transition: color 0.2s;
        font-family: 'Lato', sans-serif;
        padding: 2vh;
        font-size: 3vh;
    }

    .footer-section .org-menu .org-menu-item a:hover {
        color: dodgerblue;
        /* footer link hover text color */
    }

    .networks {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
    }

    .footer-section .network-item {
        margin: 5px;
    }

    .footer-section .netwok-item img {
        height: 20%;
        width: 100%;
    }

    .footer-logo {
        padding: 1vh;
    }

    #respond {
        width: 100%;
    }

    h2.comment-reply-title {
        font-size: 4vh;
    }

    #respond input[type=text],
    textarea {
        width: 100%;
    }

    p {
        font-family: 'Lato', serif;
        font-size: 3vh;
        letter-spacing: normal;
    }
}

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

    .about-section,
    .news-section,
    .fellowships-section {
        flex-wrap: wrap;
    }

    .about-section h1 {
        margin-left: 3%;
        margin-right: 3%;
        padding-left: 0;
        padding-right: 0;
    }

    .about-section img {
        display: none;
    }

    .about-section p {
        font-family: 'Lato', sans-serif;
        font-size: 3vh;
        margin-left: 3%;
        margin-right: 3%;
        padding-left: 0;
        padding-right: 0;
    }

    .about-section figure {
        margin-bottom: 0;
    }

    .about-content-button {
        text-align: center;
        margin-bottom: 0;
    }

    .about-content-button a {
        top: 1.5vh;
        color: darkslategray;
        padding: 1vh 2vh 1vh 2vh;
        font-size: 2.8vh
    }

    /*NEWS SECTION*/

    .news-section {
        padding-top: 1%;
    }

    .news-section h1 {
        margin-left: 2%;
        margin-right: 2%;
        padding-right: 10px;
        padding-left: 10px;
        font-size: 5vh;
        color: #88eef7;
    }

    .news-section img {
        display: none;
    }


    .wp-block-media-text.alignwide.has-media-on-the-right.fellowships-section {
        grid-template-columns: 100%;
    }

    .news-section ul,
    .fellowships-section ul {
        margin-left: 2%;
        margin-right: 2%;
        padding-right: 10px;
        padding-left: 10px;
        margin-top: 2vh;
        list-style: none;
    }

    .news-section ul li a {
        color: whitesmoke;
        display: block;
        padding: 0;
        font-family: 'Lato', sans-serif;
        font-size: 3vh;
        letter-spacing: normal;
    }

    .latest-news-button {
        text-align: center;
    }

    .latest-news-button a {
        top: 3vh;
        padding: 1vh 2vh 1vh 2vh;
        font-size: 2.5vh;
        font-family: 'Montserrat', serif;
        margin-bottom: 3vh;
    }

    /*FELLOWSHIPS SECTION*/

    .fellowships-section h1 {
        margin-left: 3%;
        margin-right: 3%;
        padding-left: 0;
        padding-right: 0;
    }

    .fellowships-section img {
        display: none;
    }

    .fellowships-section ul {
        margin-top: 0;
    }

    .fellowships-section p {
        font-size: 3vh;
        font-family: 'Lato', sans-serif;
        letter-spacing: normal;
        margin-left: 3%;
        margin-right: 3%;
        padding-left: 0;
        padding-right: 0;
    }

    .fellowships-section ul li {
        padding: 5px 0;
    }

    .fellowships-section ul li a {
        padding: 1% 0;
        font-size: 3vh;
        font-family: 'Lato', sans-serif;
    }

    .fellowships-section ul li a:hover {
        color: purple;

    }

    .fellowships-section figure {
        margin-bottom: 0;
    }

    .fellowships-apply-button {
        text-align: center;
        margin-bottom: 0;
    }

    .fellowships-apply-button a {
        top: 3vh;
        padding: 1vh 2vh 1vh 2vh;
    }

    /*projects*/
    .projects-section {

        padding-top: 2vh;
    }

    .projects-list {
        grid-template-columns: 33% 33% 33%;
    }

    .projects-list .li {
        margin-bottom: 2vh;
    }

    .projects-section ul li a img {
        padding: 1vh;
        margin-bottom: 0.5vh;
        width: 100px;
        height: 100px;
    }

    .projects-section ul li a {
        font-family: 'Lato', serif;

        padding: 0;
        font-size: 3vh;
        letter-spacing: normal;
    }

    .projects-button .button {
        margin-bottom: 1em;
        padding: 1% 3%;
        border-radius: 3vh;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2vh;
    }

    /*EVENTS SECTION*/
    .events-section
        {
        transition: 1s ease;
        padding-top: 1vh;
    }

    .events-list {
        margin-top: 3vh;
    }

    .events-list .event-details,
    .join-list .join-details {
        margin-bottom: 2vh;
        text-align: center;
    }

    .events-list .event-details img {
        padding: 0.5vh;
        margin-bottom: 1vh;
        border: 0.5vh dashed skyblue;
        border-radius: 50%;
    }

    .events-list .event-details img:hover {
        background-color: skyblue;
        border-radius: 10%;
    }

    .events-list .event-details .event-name,
    .join-list .join-details .join-title {
        margin-top: 0;
        font-family: 'Lato', sans-serif;
        font-weight: bold;
        text-decoration: none;
        padding: 0;
        font-size: 3vh;
        line-height: 1.1;
        letter-spacing: 0.7px;
        transition: 0.3s ease;
    }

    .events-list .event-details .event-date {
        font-family: 'Lato', sans-serif;
        font-size: 2vh;
    }

    .event-location {
        font-size: 2vh;
    }

    /*Board of Directors*/
    .board-section {

        padding: 3vh 0 0 0;
        transition: 1s ease;
    }

    .members {
        display: grid;
        grid-template-columns: 50% 50%;
        margin-left: auto;
        margin-right: auto;
    }

    .member-photo {
        border-radius: 150px;
        height: 130px;
        width: 130px;
    }

    .member-list {
        margin-top: 4vh;
    }

    .board-section .member-list .member-details {
        margin-bottom: 3vh;
        text-align: center;
    }

    .board-section .member-list .member-details img {
        padding: 1vh;
        margin-bottom: 2vh;
        height: 100%;
        width: 100%;
        border-radius: 50%;
        transition: 0.3s ease-in-out;
    }

    .member-list .member-details .member-name a {
        margin-top: 0;
        font-family: 'Montserrat', serif;
        font-weight: normal;
        font-size: 3vh;
        letter-spacing: normal;
    }

    .member-list .member-details .member-position {
        margin-top: 0;
        font-family: 'Lato', serif;
        font-weight: normal;
        font-size: 2.5vh;
    }

    .board-button .button {
        padding: 1% 3%;
        font-size: 2.5vh;
    }

    /*JOIN SECTION*/
    .join-title {
        margin-top: 0;
        margin-left: 0;
        font-family: 'Lato', serif;
        font-weight: bold;
        text-decoration: none;
        padding: 0;
        font-size: 3vh;
        transition: 0.3s ease;
        text-align: center;
        letter-spacing: normal;
    }

    .join-list .join-image {
        width: 100px;
        height: 100px;
    }
}