/* Include this stylesheets to make the design responsive */

/* include for other pages and components */
@import url("/assets/css/media-queries/experts.css");
@import url("/assets/css/media-queries/newsletter.css?v=1");


/* desktop displays */
@media (max-width: 1700px){
    .Election-SECTION{
        margin-top: 50px;
    }
}

@media (max-width: 1525px){
    .recent-updates-stack{
        grid-template-columns: auto auto auto;
    }
}

@media (max-width: 1440px){
    .about-kdi-teaser-for-profile .profile-header{
        font-size: 35pt;
    }

    .short-info-on-KDI .header-part{
        font-size: 42pt;
    }
}

@media (max-width: 1260px){
    .WHAT-WE-DO-CONTENT-SECTION, 
    .our-projects-text-and-lists, 
    .about-KIMPACT{
        padding-right: 4%;
        padding-left: 4%;
    }

    .about-kdi-teaser-for-profile .profile-header{
        font-size: 42pt;
    }

    .board-members, .team-members {
        padding-right: 50px;
        padding-left: 50px;
    }

    .faces-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .twitter-updates {
        gap: 5%;
    }

    .whats-text img{
        width: 230px;
    }

    .picture-row-1 {
        grid-template-columns: 250px 250px;
    }

    .WHO-WE-ARE-HEADER, .OUR-MISSION-HEADER{
        font-size: 22pt;
    }

    .WHO-WE-ARE-CONTENT, .OUR-MISSION-CONTENT{
        font-size: 17pt;
    }
    
}

@media (max-width: 1300px){
    .text-about-volunteers{
        padding: 70px;
    }
}

@media (max-width: 1230px){
    .right-section-images-and-texts{
        grid-template-columns: auto;
        gap: 30px
    }
    .image-and-project-1 img {
        height: 100px;
        width: 250px;
    }
    .image-and-project-1{
        display: flex;
    }
    .image-and-project-1 .text-project-1{
        width: 100%;
    }

    .landing-content{
        top: 20%
    }
    .thematic-areas{
        gap: 5px;
    }
}

@media (max-width: 1170px){
    .about-kdi-teaser-for-profile .profile-header{
        font-size: 30pt;
    }

    .contact-us-Directory{
        width: 430px;
    }

    .link-to-report-download{
        font-size: 15pt;
    }

    .Selected-Research-Interractive-buttons img{
        width: 20px;
    }

    .thematic-areas-images{
        width: 250px;
    }
}

@media (max-width: 1160px){
    .header .middle-section{
        display: none;
    }

    .right-section {
        width: 100%;
    }

    .thematic-areas-rider{
        font-size: 16pt;
    }

    .contact-us-Directory .CTA{
        font-size: 27pt;
    }

    .text-about-volunteers{
        padding: 90px 15%;
    }

    .volunteer-short-info-and-volunteers{
        display: flex;
        flex-direction: column;
    }
    
    .application-segments{
        gap: 50px;
    }
    .recent-update-opportunities{
        padding: 20px;
    }

    .job-advert-picture{
        border-radius: 15px;
    }

    .recent-updates-stack{
        grid-template-columns: auto auto;
      }

}

@media (max-width: 1070px){
    .WHAT-WE-DO-CONTENT-SECTION{
        grid-template-columns: 35% 60%;
    }

    .picture-card-slider-section .Picture-header{
        font-size: 12pt;
    }
    .picture-card-slider-section .Picture-details{
        grid-template-rows: 40px 150px;
    }
    .picture-card-slider-section .picture-containers{
        /* width: 230px; */
    }
    .about-kdi-teaser-for-profile .profile-header{
        font-size: 30pt;
    }

    .Latest-Report-Header-Text {
        margin-top: 60px;
    }

    .shortcuts{
        display: none;
    }
    .pics{
        height: 90vh;
    }
    .Quest-Text{
        font-size: 13pt;
    }
    .image-and-project-1 img {
        height: 100px;
        width: 60px;
    }

    .short-info-on-KDI .header-part{
        font-size: 34pt;
    }
    .contact-us-Directory .CTA{
        font-size: 22pt;
    }
    .about-KIMPACT{
        display: flex;
        flex-direction: column;
    }
    .contact-us-Directory{
        margin-top: 0px;
        width: 100%;
    }
    .short-info-on-KDI > div:last-child,
    .contact-us-Directory > div > div:last-child {
        margin-bottom: 100px;
    }
    .logo-section{
        margin-top: 0px;
    }
    .short-info-on-KDI{
        align-items: center;
    }

    .board-members, .team-members {
        padding-right: 20px;
        padding-left: 20px;
    }

    .footer-part {
        gap: 100px;
    }

    .Publication-title {
        font-size: 22pt;
        margin-top: 25px;
        margin-bottom: 25px;
    }

    .Button-learn-more {
        font-size: 12pt;
    }

    .Interractive-buttons{
        column-gap: 50px;
    }

    .Interractive-buttons img{
        width: 20px;
    
    }

    .project-lists-section, .project-information{
        padding: 50px 20px;
    }
    .header-projects .header-underline,
    .header-projects .project-header{
        margin-left: 30px;
    }

    .project-information{
        row-gap: 25px;
    }

    .project-information > h1{
        font-size: 17pt;
    }

    .landing-content .header1{
        font-size: 22pt;
    }
    .landing-content .header2{
        font-size: 32pt;
    }
    .landing-content .content-for-projects{
        font-size: 12pt;
        line-height: 25px;
    }
    .project-list-text{
        line-height: 30px;
    }

    .advert-section{
        display: none;
    }

    .selected-publication-section{
        margin-right: 10%;
    }

    .picture-containers .Picture-details {
        background-color: #0A2458;
        color: white;
    }

    .advert-image-mobile{
        display: initial;
    }
}

@media (max-width: 1000px){
    .content-body{
        display: block!important;
    }

    .filter-section.right-section{
        display: none;
    }

    .mobile-filter-container{
        display: block;
    }

    .content-body .left-section{
        padding-left: 50px;
        width: 100%;
    }

    .heading-title{
        padding: 0px;
    }
}

/* tablets and mobile displays */

@media (max-width: 900px){
    #Menu-Options:target{
        display: block;
        padding: 50px 50px;
    }

    #Menu-Options .logo-and-menu-close{
        margin-bottom: 50px;
    }

    #Menu-Options .footer-part{
        display: block;
    }

    #Menu-Options .web-links-for-static-menu{
        display: block;    
    }

    #Menu-Options .links-for-webs-for-static-menu {
        margin-bottom: 15px;
    }

    #Menu-Options .social-media-icons{
        margin-top: 30px;
        margin-bottom: 50px;
    }

    #Menu-Options .contact-details-for-static-menu {
        width: 300px;
        display: block;
    }

    #Menu-Options .contact-details-for-static-menu > p{
        margin-bottom: 15px;
    }

    #Menu-Options .menu-close-button img{
        height: 30px;
    }

    .Latest-Reporting-and-Image-Carousel{
        display: flex;
        flex-direction: column-reverse;
        background-color: white;
    }

    .latest-report-content{
        background-color: #0E64CC;
        padding-bottom: 50px;
        padding-top: 50px;
    }

    .latest-report-content:after{
        width: 100%;
        left: -7%;
    }

    .latest-report-container{
        display: block;
        overflow: hidden;
    }

    .Latest-Report-Header-Text {
        margin-top: 0px;
    }

    .Projects{
        font-size: 60px;
    }

    .About-Latest-Report{
        max-height: max-content;
    }
    .About-Latest-Report .text-fade{
        height: 100px;
    }

    .our-projects-text-and-lists{
        display: flex;
        flex-direction: column;
    }

    .left-section-texts .Our, .left-section-texts .Projects{
        text-align: center;
    }

    .left-section-texts{
        padding-bottom: 60px;
    }

    .right-section-images-and-texts{
        grid-template-columns: auto auto;
    }

    .twitter-updates{
        padding-bottom: 30px;
    }
    .twitter-updates .arrow-right, .twitter-updates .arrow-left{
        display: none;
    }
    .twitter-update-navigation{
        display: flex;
        gap: 30px;
        padding-bottom: 50px;
    }
    .twitter-update-navigation > div{
        width: auto;
    }
    .footer-part {
        gap: 50px;
    }

    .picture-row-1 {
        grid-template-columns: 250px 250px;
    }

    .landing-content{
        top: 0px;
        left: 0%;
        position: relative;
        width: auto;
        padding: 25px 100px;
    }

    .landing-content .header1,
    .landing-content .header2{
        text-align: center;
    }

    .download-and-selected-interractive-buttons{
        display: flex;
        flex-direction: column-reverse;
        gap: 30px;
    }

    .who-we-are-2-SECTION{
        margin-top: 70px;
    }

    .who-we-are-2-SECTION, .OUR-MISSION-SECTION{
        padding: 0px 10%;
    }
    .WHAT-WE-DO-CONTENT-SECTION{
        display: block;
    }

    .partners-logo img{
        height: 35px;
    }
}

@media (max-width: 850px){
    .faces-section{
        display: flex;
        flex-direction: column;
    }
    .dividing-line{
        display: none;
    }
    .team-header{
        margin-top: 50px;
    }
    .board-members, .team-members {
        padding-right: 100px;
        padding-left: 100px;
        row-gap: 30px;
    }

    /* .team-members{
        display: grid;
        grid-template-columns: 120px 120px 120px;
    } */

    .WHO-WE-ARE-HEADER, .OUR-MISSION-HEADER {
        font-size: 17pt;
    }

    .WHO-WE-ARE-CONTENT, .OUR-MISSION-CONTENT {
        font-size: 13pt;
    }

    .WHO-WE-ARE-CONTENT{
        line-height: 35px;
    }

    .OUR-MISSION-SECTION{
        margin-top: 50px;
    }

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

    .thematic-image-container:hover{
        scale: 105%;
    }

    .other-publications-list-carousel {
        grid-template-columns: auto auto;
    }

    .team-member-1{
        margin: 0px;
    }
}

@media (max-width: 800px){
    .about-kdi-teaser-for-profile .profile-header{
        font-size: 40pt;
    }

    .footer-section, .footer-part {
        display: block;
    }

    .footer-section {
        padding-right: 50px;
        padding-left: 50px;
        padding-bottom: 1px;
    }

    .project-links, .web-links {
        grid-template-rows: 40px 40px 40px 40px 40px 40px 80px;
    }
    .contact-details {
        grid-template-rows: 52px 58px 89px;
        width: 300px
    }
    .Election-SECTION{
        margin-top: 50px;
    }

    .Electoral-conflict-and-security-SECTION,
    .Electoral-Justice-SECTION,
    .Electoral-Reasearch-SECTION,
    .Citizen-Participation-SECTION{
        margin-bottom: 50px;
    }

    /* the project listing section */
    .project-lists-segment{
        display: none;
    }

    .project-lists-segment-mobile, .project-information-mobile{
        display: block;
        padding: 0px 15px 30px;
        padding-bottom: 0px;
    }

    .project-information{
        max-width: none;
        max-height: none;
    }

    .thematic-areas-images{
        width: 200px;
    }

    .activity-carousel-images{
        padding: 50px 30px;
    }

    .application-segments{
        flex-direction: column;
        height: auto;
    }

    .volunteer-section-landing{
        padding: 30px;
    }

    .text-about-volunteers{
        padding: 60px 15%;
    }

    .WHO-WE-ARE-HEADER{
        font-size: 15pt;
    }

    .join-team-section{
        padding: 60px 25px;
    }

    .Career-CONTENTS{
        font-size: 10pt;
    }

    .recent-update-opportunities{
        width: 100%;
        gap: 30px;
        flex-direction: row;
        align-items: center;
    }

    .recent-job-adverts{
        width: 100%;
    }

    .recent-updates-stack{
        justify-content: space-evenly;
    }

    .job-advert-picture{
        width: 150px;
    }

    .job-advert-text-short-info{
        font-size: 10pt;
    }

    .main-container{
        margin-left: 15%;
        margin-right: 15%;
    }

    .Next-blog-jump-section{
        margin-top: 50px;    
        width: 100%;
        margin-right: 5%;
        margin-left: 5%;
    }
}

@media (max-width: 700px){

    #Search-options-open:target{
        padding-right: 25px;
        padding-left: 25px;
    }

    #Search-options-open .shortcut-urls{
        display: block;
    }

    #Search-options-open .shortcut-urls .shortcuts-menu{
        display: block;
        margin: 15px;
    }
    .shortcut-urls-and-close-button{
        justify-content: start;
        height: auto;
    }

    .twitter-updates{
        display: block;
    }
    .twitter-updates .whats-text{
        display: block;
        margin-bottom: 20px;
    }

    .board-members, .team-members {
        padding-right: 50px;
        padding-left: 50px;
    }

    .Faces-of-KIMPACT {
        grid-template-rows: 200px auto;
        padding-bottom: 50px;
    }

    .contact-us-Directory .CTA{
        font-size: 19pt;
    }
    
    .contact-us-Directory .action{
        font-size: 17px;
    }

    .short-info-on-KDI > div:last-child{
        margin-bottom: 50px;
    }
    
    .contact-us-Directory {
        padding-top: 25px;
    }

    .picture-row-1 {
        grid-column-gap: 20px;
    }

    .Interractive-buttons{
        column-gap: 25px;
        grid-template-columns: 60px 60px 60px 60px;
    }

    .Research-Preview{
        height: 350px;
    }

    .Publication-Preview-Section {
        grid-template-rows: 370px 50px;
    }

    .Publication-title {
        font-size: 14pt;
        width: auto;
    }
    
    .details-about-selcted-publication *{
        font-size: 11pt;
    }
}

@media (max-width: 650px){
    .thematic-areas{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .thematic-areas-images{
        width: 300px;
    }
}

@media (max-width: 600px){
    .pics {
        height: auto;
        object-fit: contain;
    }

    .thematic-areas-rider-section{
        margin-top: 0px;
    }

    .search-bar-main {
        width: 400px;
    }

    .header .right-section .search-link{
        display: none;
    }
    .header .right-section .search-link-alt{
        display: flex;
    }

    .right-section-images-and-texts{
        grid-template-columns: auto;
        gap: 10px;
    }
    .short-info-on-KDI, .contact-us-Directory {
        padding-right: 7%;
        padding-left: 7%;
    }

    .board-members, .team-members {
        /* gap: 0px; */
    }

    .left-section-texts .Projects{
        font-size: 60px;
    }
    .Faces-of-KIMPACT .KIMPACT{
        font-size: 40px;
    }

    .about-kdi-teaser-for-profile .profile-header {
        font-size: 28pt;
    }

    .thematic-areas-rider {
        font-size: 12pt;
    }

    .thematic-areas-rider-section > p:last-child {
        min-width: 100px;
    }

    .about-kdi-teaser-for-profile {
        padding: 50px 10%;

    }
    .header-partners {
        font-size: 39px;
    }
    .left-section-texts .Our{
        font-size: 24pt;
    }
    .left-section-texts .Projects {
        font-size: 32pt;
    }
    .left-section-texts .details{
        font-size: 12pt;
    }
    .our-projects-text-and-lists{
        padding-top: 50px;
    }

    .Electoral-conflict-and-security-SECTION, 
    .Electoral-Justice-SECTION, 
    .Electoral-Reasearch-SECTION, 
    .Citizen-Participation-SECTION{
        padding: 0px 8%;
    }

    .Gender-responsive-Peace-building-SECTION, 
    .Community-Conflict-Prevention-SECTION,
    .Peace-building-Conflict-research-SECTION{
        padding: 0px 8%;
        margin-bottom: 50px;
    }

    .Election-Security-Team-SECTION{
        gap: 40px;
    }

    .join-text, .button-get-started{
        font-size: 10pt;
    }
    
    .recent-update-opportunities{
        flex-direction: column;
        padding: 50px 30px;
    }

    .job-advert-picture{
        width: 100%;
    }

    .blog-content{
        grid-template-columns: 100%;
        padding-right: 10%;
        padding-left: 10%;
    }

    .sub-header{
        font-size: 15pt;
    }

    .blog-body-copy{
        font-size: 12pt;
    }

    .Info-about-blog{
        margin-top: 70px;
        width: 100%;
        padding-right: 10%;
        padding-left: 10%;
    }

    .blog-title{
        font-size: 18pt;
    }

    .post-item .title{
        font-size: 12pt;
        line-height: initial;
    }

    .content-body .left-section{
        padding-right: 0px;
        padding-left: 0px;
    }
}

@media (max-width: 550px){
    .Election-contents-header{
        font-size: 17pt;
    }

    .Election-CONTENTS{
        font-size: 12pt;
        line-height: 35px;
    }
    .Election-header{
        font-size: 17pt;
    }
    .Election-CONTENTS-PARENT{
        font-size: 12pt;
    }

    .horizontal-line{
        margin-top: 0px;
    }
    .Election-SECTION {
        grid-template-rows: 40px 20px auto;
        margin-bottom: 50px;
    }
    .picture-title-section{
        line-height: 20px;
        padding: 0 30px;
    }

    .Electoral-conflict-and-security-SECTION{
        margin-top: 50px;
    }
    .picture-row-1 {
        grid-template-columns: auto;
    }

    .Peace-conflict-and-security-SECTION-header {
        font-size: 17pt;
    }

    .Peace-conflict-and-security-CONTENTS-PARENT {
        font-size: 12pt;
    }

    .Peace-conflict-and-security-SECTION {
        margin-top: 70px;
        margin-bottom: 50px;
    }

    .horizontal-line {
        margin-top: 15px;
        margin-bottom: 25px;
    }

    .picture-row-1 img, .picture-row-2 img {
        width: 330px;
    }

    .Policy-Lab-SECTION, 
    .Policy-Advocacy-and-Development-SECTION,
    .Democratic-Social-Research-SECTION{
        padding: 0px 8%;
        margin-bottom: 50px;
    }
    .Policy-Advocacy-SECTION{
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .Policy-Advocacy-SECTION-header {
        font-size: 17pt;
    }

    .Policy-Advocacy-CONTENTS-PARENT {
        font-size: 12pt;
    }

    .Pub-Header-SECTION{
        margin-top: 70px;
        margin-bottom: 50px;
        padding: 0px 8%;
    }

    .other-publications-header {
        font-size: 17pt;
    }

    .other-publications-list-carousel {
        margin-top: 25px;
    }

    .landing-content{
        padding-top: 50px;
        padding-right: 5%;
        padding-left: 5%;
    }

    .landing-content .header1{
        font-size: 17pt;
    }
    .landing-content .header2{
        font-size: 25pt;
    }

    .Selected-Research-Preview{
        height: 360px;

    }
    .Selected-Research-Preview .Publication-title{
        margin: 0px;
    }

    .selected-publication-section{
        margin-top: 70px;
        margin-right: 5%;
        margin-left: 5%;
    }
    .details-about-selcted-publication{
        font-size: 12pt;
        line-height: 25px;
        margin-bottom: 50px;
    }

    .WHAT-WE-DO-CONTENT-SECTION{
        padding-right: 0px;
        padding-left: 0px;
    }
    .thematic-carousel-slider{
        padding-right: 5%;
        padding-left: 5%;
    }
    .horizontal-divider-line{
        margin-top: 0px;
    }

    .Our-Projects-Section-and-board-lists{
        margin-top: 50px;
    }
    
    .about-KIMPACT{
        padding-right: 0px;
        padding-left: 0px;
    }

    .contact-us-Directory .CTA{
        font-size: 15pt!important;
        margin-bottom: 20px;
    }

    .contact-us-Directory .action{
        font-size: 11pt!important;
    }

    .short-info-on-KDI .header-part{
        font-size: 25pt;
    }
    .short-info-on-KDI{
        padding-top: 50px;
    }
    .contact-us-Directory > div > div:last-child{
        margin-bottom: 50px;
    }

    .Selected-Research-Interractive-buttons{
        gap: 0px;
    }

    .details-about-selcted-publication *{
        font-size: 11pt;
    }
    
    .Next-blog-post-title{
        font-size: 16pt;
    }
    
    .blog-section-container{
    }
}

@media (max-width: 500px){
    .search-bar-main {
        width: 300px;
    }

    .board-members, .team-members {
        padding-right: 50px;
        padding-left: 50px;
        grid-template-columns: auto auto;
        gap: 20px 35px;
    }
    
    .Picture-Carousel-thematic-areas 
    .thematic-areas-container {
        display: block;
    }
    
    .faces{
        font-size: 17px;
    }
    
    .thematic-areas-rider {
        font-size: 10pt;
    }

    .learn-more-links {
        font-size: 10px;
    }

    .Faces-of-KIMPACT .KIMPACT {
        font-size:30px;
    }

    .KDI{
        font-size: 16px;
    }

    .latest-report-content {
        padding-right: 7%;
        padding-left: 7%;
    }

    .other-publications-list-carousel {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .other-publications-list-carousel img {
        width: 300px;
        height: 350px;
    }
   
    .volunteer-section-landing{
        padding: 15px;
    }
    
    .join-team-section{
        border-radius: 30px;
    }

    .main-container{
        margin: 50px 5%;
        margin-top: 100px;
    }
    .application-heading{
        margin-bottom: 15px;
    }
}

@media (max-width: 450px){
    .recent-updates-stack{
        grid-template-columns: auto;
    }
}

@media (max-width: 400px){
    .search-bar-main {
        width: 250px;
    }
}