@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;600;700&family=Raleway&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: Monserrat,sans-serif;
}
:root{
    --primary-color: #006634;
    --accent-color: #40955e;
    --dark-color:#003a0d;
    --primary-font: Monserrat,sans-serif;
}
.explored-brand span{
    font-size: 1rem;
    text-transform: lowercase!important;
}
#appBar{
    display: flex;
    padding: 10px;
    border-bottom: 1px solid whitesmoke;
    justify-content: space-between;
    align-items: center;
}
#logo img{
    width: 100px;
}
#title{
    text-align: center;
    font-size: 1.5em;
    letter-spacing: 1px;
}
#links a{
    color: var(--dark-color);
    margin-right: .5em;
    font-weight: 200;
    border-left: 1px solid whitesmoke;
}
#links a:last-child{
    padding:10px 20px;
    border-radius: 40px;
    color: whitesmoke;
    background: linear-gradient(45deg,var(--accent-color),var(--dark-color));
}
#links a:hover{
    text-decoration: none;
}
.uk-navbar-container:not(.uk-navbar-transparent) {
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
}
.uk-navbar-nav>li>a, .uk-navbar-toggle {
    min-height: 60px;
    padding: 0 15px;
    font-size: .8rem;
    font-family: var(--primary-font);
    color: var(--dark-color);
    font-weight: 600;
}
.uk-offcanvas-bar {
    background: var(--dark-color);
    padding: 0!important;
}
#mobile-logo-section {
    height: 60px;
   display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.uk-offcanvas-bar .uk-nav-default>li.uk-active>a{
    color: #080808;
}
.uk-offcanvas-bar .uk-nav-default>li>a{
    padding: .9rem;
    font-weight: 500;
    font-family: Roboto, sans-serif;
    color: #fff !important;
    border-bottom: 1px solid var(--accent-color);
}
#banner{
    background-size: cover;
    background: linear-gradient(0deg, rgba(0, 0,0, 0.6), rgba(0, 0, 0, 0.6)), url("../img/banner.jpg") no-repeat center;
}
#banner-overlay{
    padding:10% 1em;
    clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
    background: rgba(64,149,94,.8);
    color: whitesmoke;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#banner-overlay>div{
    margin-right: 15%;
}
#banner-heading{
    color: whitesmoke;
    font-size: 2.3rem;
    font-weight: 400;
    margin: 0;
}
#banner-description{
    margin: 0;
    font-size: 1.3em;
    color: whitesmoke;
}
#banner-overlay section{
    margin-top: 3em;
}
.btn-white,.btn-border-white:hover{
    text-decoration: none;
    background: #fff;
    color: var(--primary-color);
    border: 2px solid #fff;
    padding: 7px 20px;
    border-radius: 20px;
    margin:0 1em;
}
.btn-white:hover,.btn-border-white{
    background: transparent;
    transition: all 900ms ease-out;
    text-decoration: none;
    color: white;
    border: 2px solid #fff;
    padding: 7px 20px;
    border-radius: 20px;
    margin:0 1em;
}
.btn-green{
    background: transparent;
    transition: all 900ms ease-out;
    text-decoration: none;
    color: white;
    border: 2px solid var(--primary-color);
    background: var(--primary-color);
    padding: 7px 20px;
    border-radius: 20px;
    margin:0 1em;
}
.icon-box{
    color: #fff;
    border: 1px solid #e5e5e5;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    text-align: center;
    line-height: 70px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}
.school-intro{
    padding: 1em;
}
.school-intro h3{
    text-align: center;
    font-size: 1.3em;
    color: whitesmoke;
    margin: .5em 0;
}
.school-intro p{
    margin: 0 0 1.5em 0;
    text-align: center;
}
.school-intro:nth-child(odd){
    background: var(--primary-color);
    color: white;
}
.school-intro:nth-child(even){
    background: var(--accent-color);
    color: white;
}
.elimu-links{
    border-left:1px solid whitesmoke;
    padding-top: 2em;
}
.elimu-links a{
    display: block;
    padding: .5em;
    border-bottom: 1px solid whitesmoke;
    color: grey;
}
.elimu-links a:hover{
    background: whitesmoke;
    color: grey;
    text-decoration: none;
}
#school-intro{
    font-size: 1.5em;
    color: #000;
}
#school-intro span{
    color: var(--primary-color);
    font-size: 2em;
}
#welcome{
    padding: 2.5em;
}
.career{
    margin-bottom: 1em;
    border: 2px solid #eeeeee;
    border-radius: 10px;
}
.career-footer{
    border-top: 1px solid #f5f5f5;
}
.career-body,.career-footer{
    padding:.5em 1em;
}
.career-image {
    margin: 0 auto;
    display: block;
    height: 250px;
    text-align: center;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}
#welcome p{
    font-size: 1.2rem;
    font-family: Raleway;
}
#parallax{
    padding: 1em;
}
#parallax>div{
    padding: 8vh 10%;
    display: flex;
    justify-content: space-between;
}
#parallax h4{
    color: whitesmoke;
    font-size: 2em;
}
#border-parallax{
    border: 2px solid whitesmoke;
    border-radius:10px;
    padding: 1em;
}
#border-parallax>div{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#pcontact{
    font-size: 2em;
    color: white;
}
#career-series{
    background: #f6f8fa;
    padding:10vh 1em;
}
#career-series .uk-card{
    margin-bottom: 1em;
}
#career-series h2,#student-exchange h2{
    color: #262b44;
    font-size: 2em;
    margin: 0;
    font-weight: bold;
}
.career-header{
    padding: .5em;
}
.career-title{
    font-size: 1rem;
    margin: 0;
}
.career-body h4>a{
    color: var(--accent-color);
    font-size: 1rem;
    font-weight: bold;
}
.career-intro{
    font-size: .9rem;
}
.career-body h4>a:hover{
    color: #262b44;
    text-decoration: none;
}
.career-body p{
    color: grey;
    font-family: Roboto,Raleway,sans-serif;
    font-size: .9rem;
}
#parallax p{
    color: white;
    font-size: 1.2em;
}
#explored{
    background: var(--primary-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    padding: 2em;
}
#explored h3{
    font-size: 1.8em;
    font-weight: 800;
    color: whitesmoke;
}
#explored p{
    color: white;
    font-size: 1em;
    line-height: 1.3em;
}
#explored-content{
    padding:10vh 2em;
}
.explored-series {
    display: block;
    margin-bottom: 1em;
}
.explored-series:hover{
    text-decoration: none;
}
.explored-series img{
    object-fit: cover;
    height: 200px;
    width: 100%;
    object-position: top;
}
.explored-series h4{
    margin: 0;
    font-size: 1rem;
    font-weight: bold;
}
.explored-series p{
    margin: 0;
    color: grey;
    font-size: .8rem;
}
.explored-series h4>a{
    color: #262b44;
}
.category-icon{
    color: grey;
    border: 2px solid grey;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    text-align: center;
    line-height: 70px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}
.category{
    display: block;
    padding: 1em;
    text-align: center;
    color: var(--primary-color);
}
.category p{
    font-size: .9rem;
}
.category:hover{
    text-decoration: none;
    color: #0e6dcd;
}
#motto{
    padding: 10vh 10%;
}
#motto h1{
    color: #eeeeee;
}
.gen4-section{
    padding: 15vh 0;
}
#student-exchange{
    padding:10vh 1em;
}
.overlay-title{
    background: #fff;
    border-top:2px solid var(--primary-color);
    border-bottom: 2px solid #f5f5f5;
    border-left: 2px solid #f5f5f5;
    border-right: 2px solid #f5f5f5;
    padding: .5em;

}
footer{
    /*background: #444;*/
    background: var(--primary-color);
    padding: 1em!important;
}
#rights{
    text-align: center;
    padding: 1em;
    color: whitesmoke;
    border-top: 1px solid #666;
    background: #444;
}
#rights p{
    margin: 0!important;
    padding: 0!important;
}
.footer-section-title{
    font-size: 1.15rem;
    color: #f5f5f5;
    padding:.2rem 1rem;
}
#footer-address p{
    margin: 0;
    padding:.2rem 1rem;
    font-size: 1rem;
    color: #f5f5f5;
}
#footer-about h5,#footer-about p{
    margin: 0;
    padding:.2rem 1rem;
    font-size: 1rem;
    color: #f5f5f5;
}
#footer-links section>a{
    font-weight: 700;
    font-size: .8rem;
    padding:.2rem 1rem;
    display: block;
    color: #f5f5f5;
}
#footer-navigation ul{
    flex-direction: column;
}
#footer-navigation ul>li{
    padding:.2rem 1rem;
    text-align: left;
}
#footer-navigation ul>li>a,#footer-navigation ul>li.uk-active>a{
    font-size: .8rem;
    font-weight: 400;
    color: #f5f5f5;
    padding: 0;
   min-height: 0;
    display: block;
}
#page-banner{
    padding: 10vh 1em;
}
.g-section{
    color: #000;
    padding: 5vh 1em;
}
.g-section h4{
    font-weight: 600;
    font-size: 1.9em;
    margin:0;
    text-align: center;
}
.g-section p{
    text-align: center;
    margin: 0 0 3em 0;
    font-size: .975rem;
    font-family: Raleway,sans-serif;
    color: grey;
}
.g-accordion-title, .g-accordion-content{
    padding: .5em;
    font-family: Monserrat, sans-serif;
    font-size: 1.2em;
}
.g-accordion-content p{
    text-align: justify;
    font-weight: 400;
}
.g-accordion-title{
    background: whitesmoke;
}
li.uk-open .g-accordion-title{
    background: var(--primary-color);
    color: whitesmoke;
}
.g-table thead{
    background: var(--primary-color);
}
.g-table{
    border: 1px solid #f5f5f5;
}
.g-table th{
    font-family: Monserrat, sans-serif;
    font-size: .9rem;
    font-weight: 600;
    color: whitesmoke;
}
.g-section-staff{
    padding: 5vh;
    background: #f5f5f5;
}
.teacher-profile{
    text-align: center;
}
.teacher-profile img{
    border: 2px double whitesmoke;
}
.teacher-profile h5{
    font-weight: 600;
    font-size: 1.2em;
    font-family: Monserrat, sans-serif;
    margin: 0;
}
#blog{
    padding: 3em 1em;
}
.sidebar{
    width: 300px;
}
.sidebar-links a{
    display: flex;
    padding: 1em;
    /*border-bottom: 1px solid #f5f5f5;*/
    border-bottom: 1px solid #e6e6e6;
    justify-content: space-between;
    align-items: center;
    font-size: .9rem;
    font-weight: bold;
    color: #000;
}
.sidebar-links a:hover{
    color: var(--accent-color);
    text-decoration: none;
}
.ln-mt{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #e6e6e6;
    line-height: 30px;
    text-align: center;
}
.sidebar-links a:last-child{
    border-bottom: none;
}
.g4-card{
    padding: .5em;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.12);
    margin-bottom: 2em;
}
.g4-card-title{
    font-size: 1.2em;
    font-weight: bold;
}
.g4-card-title span{
    color: var(--accent-color);
}
.sidebar-story{
    margin-top: 0!important;
    padding: 1em;
    border-bottom: 1px solid #f5f5f5;
}
.sidebar-story:last-child{
    border-bottom: none;
}
.sidebar-story-title, .sidebar-story-title a{
    font-size: .9rem;
    font-weight: bold;
    color: #000;
    margin: 0;
}
.sidebar-story-title a:hover{
    color: var(--accent-color);
    text-decoration: none;
}
.sidebar-story-time{
    color: grey;
    font-weight: lighter;
    font-family: Raleway,sans-serif;
    margin: 0;
}
.f-title{
    font-weight: bold;
    font-size: 1.5em;
    color:#444 ;
}
#follow-up-articles{
    padding: 2em 0;
}
.sidebar-elimu{
    margin-bottom: 2em;
    padding: 10px;
    background: var(--accent-color);
    color: #f5f5f5;
    text-align: center;
}
.sidebar-elimu h4{
    color: #f5f5f5;
    font-family: Monserrat, sans-serif;
}
.sidebar-elimu>div{
    padding: 1em;
    border: 2px solid #f5f5f5;
    border-radius: 10px;
}
#onboarding_heading{
    color: #f5f5f5;
    padding: 2em;
    background: linear-gradient(90deg,var(--primary-color),var(--accent-color),var(--dark-color));
}
#onboarding_heading h1,#onboarding_heading h4{
    color: #f5f5f5;
}
#onboarding_heading {
    font-size: 1.2em;
}
.onboard{
    padding: 2em;
    text-align: center;
}
.onboard a,.onboard a:hover{
    color:grey;
    text-decoration: none;
}
.onboard p{
    margin: 0;
    color: grey;
    font-size: 1.3em;
}
.navicons{
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    box-shadow: 3px 3px 3px #f5f5f5;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.exchange-video:hover{
    text-decoration: none;
}
.exchange-video h4{
    margin: 0;
    color: var(--primary-color);
    font-size: .9rem;
    font-weight: bold;
}
.exchange-video small{
    color: grey;
    font-family: Monserrat, sans-serif;
    font-size: .8rem;
}
#article-title{
    color: #0f0f0f;
    font-family: Raleway, sans-serif;
    font-size: 1.3rem;
    font-weight: bold;
}
#article-body{
    color: grey;
    font-family: Monserrat, sans-serif;
    font-size: .9rem;
}
#mobile-breaker{
    display: none;
}

/**mobile and tablet*/
@media only screen and  (max-width : 1024px) {
    #banner-overlay {
        min-height: 50vh;
    }
    #banner-overlay>div{
        margin: 0 auto;
    }

    #motto{
        padding: 5vh 1%;
    }
    #parallax>div{
        padding: 1em;
    }
    #explored-content,#career-series,#explored,#student-exchange{
        padding: 5vh 1em;
    }
    .gen4-section{
        padding: 3vh 0;
    }
    #blog{
        padding: 0;
    }
}

/* both mobile and tablet*/
@media (max-width: 768px){
    .school-intro{
        text-align: center;
    }
    #welcome{
        display: flex;
        flex-direction: column;
    }
    #mobile-breaker{
        display: block;
        padding: 5vh;
        text-align: center;
    }
    #mobile-breaker h3{
        color: #34373b;
        font-size: 2.125rem;
        margin-bottom: .5rem;
        font-family: Exo,Helvetica,Arial,sans-serif;
        font-weight: 800;
        line-height: 1.2;
    }
    #mobile-breaker p {
        margin: 0;
        font-size: 1rem;
        color: #999999;
        font-family: Roboto,Helvetica,Arial,sans-serif;
        line-height: 1.625;
    }
    .school-intro h3{
        font-weight: 800;
        text-align: center;
    }
    .school-intro p{
        text-align: justify;
    }
    .school-intro:nth-child(1),.school-intro:nth-child(4){
        background: var(--dark-color);
    }
    .school-intro:nth-child(2),.school-intro:nth-child(3){
        background: var(--primary-color);
    }
}
/** Mobile **/
@media (min-width: 320px) and (max-width: 480px) {
    #banner-overlay {
        clip-path:none;
        min-height: 50vh;
    }
    #banner-overlay>div{
        margin: 0 auto;
    }

    .elimu-links{
        padding: 1.5em 0;
        max-width: 100%;
        /*overflow: scroll;*/
        display: flex;
        justify-content: space-around;
        /*flex-wrap: wrap;*/
    }
    .elimu-links a{
        text-align: center;
        border:1px solid rgba(0,0,0,.1);
        padding: 1em;
        border-radius: 20px;
        color: #030303;
        background: rgba(0,0,0,.05);
        font-size: .75rem;
        /*flex: 1 0 45%;*/
        /*flex-grow: 1;*/
        margin:0 0 5px 5px;
    }
    #parallax>div{
        padding: 1em;
        flex-direction: column;
    }


}

/** Tablet **/
@media (min-width: 481px) and (max-width: 768px) {
    /*.elimu-links{*/
    /*    padding: .5em;*/
    /*    max-width: 100%;*/
    /*    !*overflow: scroll;*!*/
    /*    display: flex;*/
    /*    justify-content: space-around;*/
    /*    flex-wrap: wrap;*/
    /*}*/
    /*.elimu-links a{*/
    /*    text-align: center;*/
    /*    border:1px solid rgba(0,0,0,.1);*/
    /*    padding: 1em;*/
    /*    border-radius: 20px;*/
    /*    color: #030303;*/
    /*    background: rgba(0,0,0,.05);*/
    /*    font-size: .75rem;*/
    /*    flex: 1 0 25%;*/
    /*    flex-grow: 1;*/
    /*    margin:0 0 5px 5px;*/
    /*}*/
}