/* Header width changes start */

/*  Set the header container width, margin and padding to be same as ~regular~ content */
.c-header {
    margin: auto;
    max-width: 1200px; /* no longer required as overwritten by other styles now? */
    width: 100%;
}

/*  Drop the padding on the header when screen size reduces */
@media screen and (max-width: 1100px) {
    .c-header {
        padding: 0;
    }
  }

/*  Set the header logo to shrink - will need to be smaller in some cases as less space */
.c-header .c-logo {
    flex-shrink: 1!important;
    min-width: 100px;
    margin-left: 24px;
}

/*  Kill the min-width on the navigation items - so that they don't overflow the reduced width */
.c-nav {
    min-width: 0!important;
}

/*  Set a maximum font size on the navigation items - so that they better fit in the reduced width */
.c-nav ul {
    font-size: 0.8em!important;
}

@media(min-width: 1024px) {

    /* Make the header contents centralised if not much content */

    .c-header {
        display: flex;
        justify-content: center;
        z-index: 999;
    }
    
    /* Make the header stretch with width */

    #flex-header {
        max-width: 1200px;
        width: 100%;
    }

}

/* Header width changes end */


/* Intro form section begins */

    @media(max-width: 768px) {

        section.intro-form-section .intro-item {
            order: 1;
        }
        section.intro-form-section .intro-form {
            order: 2;
        }
        
    }
    
/* Intro form section ends */



/* campaign menu starts */

.campaign-menu {
    justify-content: center;
}

.campaign-core {
    display: flex;
    max-width: 1200px;
    justify-content: space-between;
    width: 100%;
}

/* campaign menu end */