/*Import custom colfax font*/
@font-face {
    font-family: 'Colfax-light';
    src: url('../fonts/Colfax-light.otf') format('truetype'), url('../fonts/Colfax-light.woff') format('woff'), url('../fonts/Colfax-Light.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Colfax-medium';
    src: url('../fonts/Colfax-medium.otf') format('truetype'), url('../fonts/Colfax-medium.woff') format('woff'), url('../fonts/Colfax-medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Colfax-black';
    src: url('../fonts/Colfax-black.otf') format('truetype'), url('../fonts/Colfax-black.woff') format('woff'), url('../fonts/Colfax-black.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* prev: #ecedf1 */
    --brand-primary: #9ed5cf;
    --brand-primary-dark: #7FB8B2;
    --brand-secondary: #d5cbda;
    --brand-secondary-dark: #B7A5C0;
    --brand-text: #231f20;
}

/* colour resets */
.bg-primary {
    background-color: var(--brand-primary) !important;
}

.bg-light a {
    color: var(--brand-text);
}

.navbar-light .navbar-brand {
    color: var(--brand-text);
}

.breadcrumb {
    background-color: var(--brand-secondary);
}

.breadcrumb a {
    color: var(--brand-text);
}

.breadcrumb-item.active {
    color: var(--brand-text);
}

.breadcrumb-item a:hover {
    background-color: transparent;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--brand-text);
}

.badge-secondary {
    background-color: #4D545B;
}

/* css for Splash Screen Pop-up modal */
.modal-dialog-full-width {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;

}

.modal-content-full-width {
    height: auto !important;
    min-height: 100% !important;
    border-radius: 0 !important;
    background-color: black !important
}

.modal-header-full-width {
    border-bottom: 1px solid #9ea2a2 !important;
}

.modal-footer-full-width {
    border-top: 1px solid #9ea2a2 !important;
}


p.PulledContent {
    width: 100%;
    background-color: #F2F3F4;
    padding: 20px;
    border-left: 8px solid var(--brand-primary);
    line-height: 18px;
}

a {
    color: #014287;
    font-weight: 400;
    text-decoration: underline;
}

.e:hover {
    background-color: #eeeeee;
}

p.h4 {
    font-family: Colfax-black, sans-serif !important;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: .5rem;
}

a.skip-main
/*a.skip-accessibility-statement*/ {
    left: -999px;
    position: absolute;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -999;
}

a.skip-main:focus,
a.skip-main:active
/*a.skip-accessibility-statement:focus,
a.skip-accessibility-statement:active*/ {
    color: var(--brand-text);
    background-color: var(--brand-primary);
    left: auto;
    top: 0;
    width: 15%;
    height: auto;
    overflow: auto;
    margin: 10px 35%;
    padding: 5px;
    text-align: center;
    font-family: Colfax-medium;
    font-size: 1em;
    font-weight: 600;
    z-index: 999;
}

/* Exception: when the target is the footer Accessibility Statement link */

#footer-accessibility-link:target {
    visibility: visible;
    position: static;
    top: auto;
    display: inline;
}

#main:target {
    position: inherit;
    visibility: unset;
    top: unset;
}

:target {
    display: block;
    position: relative;
    top: -200px;
    visibility: hidden;
}

body,
html {
    width: 100vw;
    overflow-x: hidden;
    font-family: Colfax-light;
    color: var(--brand-text);
}

.overflowHidden {
    overflow: hidden;
}

/*Generic background colours*/
/*.purbck {
    color: white;
    background-color: var(--brand-secondary);
	font-family: Colfax-medium, FontAwesome;
}*/

.purbck {
    border: 4px solid var(--brand-secondary);
    border-radius: 7px;
    color: var(--brand-text);
    background-color: var(--brand-secondary);
    font-family: Colfax-medium, FontAwesome;
}

.bluebck {
    color: var(--brand-text);
    background-color: var(--brand-primary);
    font-family: Colfax-medium;
}

.tag {
    font-family: Colfax-medium, FontAwesome;
    border: 4px solid transparent;
    border-radius: 7px;
}

.light-grey-back {
    background-color: #ecedf1;
    color: var(--brand-text);
}

.breadcrumb {
    font-family: Colfax-medium;
}

/*Generic Borders */
.bordLeftO {
    border-left: 6px solid var(--brand-primary);
}

/* Navigation */

#navbarText>form>input {
    font-family: Colfax-black, FontAwesome;
    width: 100%;
}

.navbar {
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 1030 !important;
}

.navbar-nav .nav-item .nav-link {
    color: var(--brand-text);
    font-size: 18px;
    font-family: Colfax-medium;
    text-decoration: none;
    height: 44px;
}

.navbar-nav .nav-item:hover .nav-link {
    color: var(--brand-text);
    font-size: 18px;
    text-decoration: underline;
    height: 44px;

}

input.form-control::placeholder {
    color: #333;
}

/* Home Page Hero */
.hero {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

.hero .headerHero {
    position: relative;
    margin-top: 60vh;
}

.hero h1 {
    display: inline;
    color: var(--brand-text);
    font-size: 5em;
    font-family: Colfax-black;
    background-color: var(--brand-primary);
    padding: 10px;
    padding-top: 10px;
    padding-right: 20px;
}

/* Home Page Banner Change color on hover to be removed when URL is removed */
/*.hero h1:hover {
    background-color: var(--brand-primary-dark);
}

.hero h2:hover {
    background-color: var(--brand-secondary-dark);
}*/

/* Home Page Banner Change color on hover */
/* FINISHED */

.hero h2 {
    font-family: Colfax-black;
    max-width: 90%;
}

.hero a {
    color: var(--brand-text);
}


/* Home Page Hero */
.heroquart {
    background-image: url(../Images/quays.png);
    background-position: top;
    height: 60vh;
}

.heroquart span {
    color: white;
    margin-top: 55px;
}

.textHeader {
    margin-top: 30vh;
    width: 40%;
    left: 5%;
    position: absolute !important;
    color: var(--brand-text);
    background-color: var(--brand-secondary);
}

.textHeader small {
    font-size: 18px;
    opacity: 1;
}

.heroArrow {
    position: absolute;
    margin-top: 28vh;
    height: 150px;
}

.heroArrow:hover {
    animation-duration: 2s;
    background-color: var(--brand-secondary);
}

/**.heroquart h1 {
    font-size: 4em;
}**/

.heroRightArrow {
    right: 0;
}

.heroLeftArrow {
    left: 0;
}

/*Subtle Highlight Focus*/
.link-wrapper {
    width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--brand-primary);
    /* Optional: dark background behind all */
    border-radius: 5px;
    overflow: hidden;
}

.link-title {
    text-align: center;
    color: var(--brand-text);
    background-color: var(--brand-secondary);
    width: 100%;
    padding: 8px 12px;
    font-weight: bold;
    margin: 0;
}

.link-box {
    background-color: var(--brand-primary);
    color: var(--brand-text);
    text-align: center;
    padding: 12px 15px;
    text-decoration: none;
    display: block;
    width: 100%;
    outline: none;
    font-weight: bold;
    border: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--brand-primary-dark);
    /* subtle divider */
}

/* Remove last border-bottom for cleaner look */
.link-box:last-child {
    border-bottom: none;
}

/* On hover: show white underline */
.link-box:hover {
    text-decoration: underline;
    text-decoration-color: var(--brand-text);
    color: var(--brand-text);
}

/* On focus: yellow border for accessibility */
/*.link-box:focus,
.link-box:focus-visible,
input[type="search"]:focus,
input[type="search"]:focus-visible,
button[type="submit"]:focus,
button[type="submit"]:focus-visible,
button:focus,
button:focus-visible,
a.btn:focus,
a.btn:focus-visible {
    border: 3px solid yellow !important;
}*/

.search-button {
    height: 45px;
    font-size: 18px;
    margin-left: -10px;
    border: solid 1px #495057;
    border-radius: 0px 8px 8px 0px;
}

.form-control:focus,
.form-control:focus-visible,
.search-button:focus,
.search-button:focus-visible {
    outline: none;
    border: 3px solid rgba(0, 0, 0, .7) !important;
}

/* cards */
.card a {
    color: var(--brand-text);
    text-decoration: none;
}

/* Slider Hero */
.homeNewsItems {
    height: 100%;
    min-height: 500px;
    max-height: 500px;
}

.newsSlider {
    height: 500px;
    display: block;
}

.newsSlide {
    background-position: center;
    position: absolute;
    height: 500px;
    width: 100%;
    left: 0px;
    top: 0px;
    opacity: 0;
    z-index: 1;
}

.newsSlide span {
    color: white;
    margin-top: 55px;
}

.newsSlideHeader {
    margin-top: 230px;
    color: var(--brand-text);
    background-color: var(--brand-secondary);
    margin-left: 100px;
}

.newsSlideHeader small {
    font-size: 18px;
    opacity: 1;
}

.arrow:hover {
    animation-duration: 2s;
    background-color: var(--brand-secondary);
}

.newsSlide h1 {
    font-size: 4em;
}

.page-item {
    min-height: 550px;
    max-height: 550px;
}

.page-item a {
    overflow: hidden;
}

.fundingOppPageItem {
    min-height: 550px;
    max-height: 550px;
}

.fundingOppPageItem a {
    overflow: hidden;
}

.sliderRightArrow {
    position: absolute;
    height: 150px;
    right: 0px;
    top: 210px;
    width: 50px;
    z-index: 999;
    border: 0;
}

.sliderLeftArrow {
    position: absolute;
    height: 150px;
    left: 0px;
    top: 210px;
    width: 50px;
    z-index: 999;
    border: 0;
}

.sliderArrow {
    /**width: 40px;
    margin-top: 55px;**/
}

.active-slide {
    opacity: 1;
}

/**Accessibility change Issue 8, if it's not active, set the visibility to hidden*/
.newsSlider>.newsSlide:not(.active-slide) {
    visibility: hidden;
}

.related-articles>img {
    height: 250px;
    object-fit: cover;

}

/*Home Page What We do*/
.secheader {
    color: var(--brand-text);
    background-color: var(--brand-secondary);
}

.col .wwdHeader {
    font-size: 18px;
    padding-bottom: 5px;
    border-bottom: #3A6E84;
    border-bottom: 3px solid var(--brand-primary);
    display: inline-block;
    padding: 10px;
}

object {
    width: 100%;
}

.col:hover .wwdHeader {
    font-size: 18px;
    color: var(--brand-text);
    background-color: var(--brand-secondary);
    border: 2px solid #000;
    cursor: pointer;
}

/*Latest News Section*/
.card .badge {
    font-size: 16px;
}


/*.card:hover > .card-body {
    background-color: var(--brand-primary);
    cursor: pointer;
}*/


/*for a SD call (Ref: F0142168) from Tina Harding re keyboard accessibility on accordions*/
.accordion>.card>.card-header>h5>.btn-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}


/*Find out More Section*/

.fomLink a {
    color: var(--brand-text);
    text-decoration: none;
}

.fomLink:hover .bordLeftO {
    border-left: 6px solid var(--brand-secondary);
}

/*Footer*/
.links a {
    color: var(--brand-text);
    font-size: 18px;
    font-family: Colfax-medium;
}

.links .hoverColor:hover {
    color: var(--brand-text);
    font-size: 18px;
    text-decoration: underline;
}

/* Popup */
#popupwindow {
    background-color: var(--brand-secondary);
    padding: 20px;
    color: var(--brand-text);
    position: absolute;
    align-content: center;
    z-index: 9999;
    bottom: 5%;
    position: fixed;
    margin-left: 50px;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, .2);
}

#close {
    float: right;
    display: inline-block;
    padding: 2px 5px;
    border: none;
    background: none;
    cursor: pointer;
}

/*All News Page*/


/*Leaders */
.leader {
    height: 300px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.details {
    position: absolute !important;
    bottom: 5%;
    left: 2%;
}

/*Individual LEader PAge */
#leaderInfo p {
    font-size: 18px;
}

.leaderActions {
    font-size: 24px;
    font-weight: 500;
    text-align: left;
}

/*Individual News Item*/

.article p {
    font-size: 18px;
}

/*Individual Funding Opp Item*/

.fundingOppItem p {
    font-size: 18px;
}

/* Media Queries */

/* for banner images issue */
/* Styles for screens smaller than 600px */
@media only screen and (max-width: 600px) {
    #bannerImage {
        height: auto !important;
    }

    .textHeader {
        left: 0px;
        margin-top: auto;
        position: relative !important;
    }

    #pageTitle {
        font-size: 1.5rem;
        padding-top: 5%;
    }

    .heroquart {
        height: auto;
    }
}

@media screen and (min-width:0px) and (max-width: 319px) {
    .navbar-brand img {
        width: 50px;
        height: 25px !important;
        margin-left: -30px !important;
    }

    .navbar-toggler {
        width: 22px;
        height: 20px !important;
        margin-right: -30px;
    }

    .navbar-toggler-icon {
        width: 22px;
        height: 20px !important;
        margin-left: -11px;
        margin-top: -10px;
    }

    .newsSlideHeader {
        margin-left: 0px;
    }

    .newsSlideHeader h2 {
        font-size: 50%;
    }

    .newsSlideHeader small {
        font-size: 12px;
        opacity: 1;
    }

    .fa {
        font-size: 1em;
    }

    .sliderRightArrow {
        position: absolute;
        height: 50px;
        right: 0px;
        top: 240px;
        width: 20px;
        z-index: 999;
        border: 0;
    }

    .sliderLeftArrow {
        position: absolute;
        height: 50px;
        left: 0px;
        top: 240px;
        width: 20px;
        z-index: 999;
        border: 0;
    }

    /*Issue 3 - SiteMap page accessibility 400% issue starts here*/
    .sitemap {
        margin-left: -10% !important;
        font-size: 5px;
        width: 100% !important;
        overflow-x: scroll;
        overflow-y: scroll;
    }

    .sitemap::-webkit-scrollbar:horizontal {
        height: 8px;
        background-color: red;
    }

    .sitemap::-webkit-scrollbar-thumb:horizontal {
        background: #000;
        border-radius: 10px;
    }

    /*SiteMap page accessibility 400% issue ends here*/

    /*Issue 6 accessibility 400% issue here*/
    .textHeader {
        font-size: 90%;
        width: 100%;
    }

    .textHeader h2 {
        font-size: 90%;
    }

    .textHeader small {
        font-size: 12px;
        opacity: 1;
    }

    .breadcrumb {
        margin-top: 10px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: .75rem 1rem;
        margin-bottom: 0.5rem;
        list-style: none;
        background-color: var(--brand-secondary);
        color: var(--brand-text);
        border-radius: .25rem;
        font-size: 12.96px;
    }

    /*Issue 6 accessibility 400% issue ends here*/

    /*Issue 7 accessibility 400% issue here*/
    iframe {
        max-width: 100%;
    }

    img {
        max-width: 100%;
    }

    table {
        max-width: 100%;
    }

    /*Issue 7 accessibility 400% issue ends here*/

    /*.heroquart {*/
    /*   	background-position: center;*/
    /*height: 60vh;*/
    /*	width: 100vh;*/
    /*}*/
}

/* Media Queries */
@media screen and (min-width:319px) and (max-width: 751px) {
    .hero {
        background: url('/media/1670/gmcamobile.jpg') no-repeat center center !important;
        background-attachment: scroll !important;
        width: 100vw;
        /*height: 200vh; */
        white-space: normal;
    }

    .navbar-brand img {
        width: 190px;
        height: 50px !important;
        margin-left: -30px !important;
    }

    .navbar-toggler {
        margin-right: -30px;
    }

    .headerHero h2 {
        display: none !important;
    }

    .headerHero12 {
        margin-left: 0 !important;
    }

    .headerHero {
        margin-top: 40vh !important;
    }

    .headerHero h1 {
        width: 100%;
        display: inline-block;
        flex-wrap: wrap;
        font-size: 3.0em;
        padding: 5px;
    }

    .carouselRow {
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .col .wwdHeader {
        font-size: 14px;
    }

    .newsListHome,
    .article-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .fundingOppListHome,
    .fundingOppRow {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .newsSlideHeader {
        margin-left: 0px;
    }

    .newsSlideHeader h2 {
        font-size: 90%;
    }

    .sliderLeftArrow,
    .sliderRightArrow {
        display: none !important;
    }

    .page-item {
        margin-top: 20px;
        width: 100%;
    }

    .fundingOppPageItem {
        margin-top: 20px;
        width: 100%;
    }

    .textHeader {
        font-size: 90%;
        width: 100%;
    }

    .textHeader h2 {
        font-size: 100%;
    }

    .sideBar {
        display: none;
    }

    .mobileLinks {
        display: block !important;
    }

    .leaderImage {
        display: none;
    }

    .featured {
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
        margin-bottom: 20px !important;
    }

    #results,
    .tweets {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .homeNewsItems {
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
        margin-bottom: 20px !important;
    }

    body>footer>div.bg-light.mt-5>div>div>div.col-md-4.mt-4>img {
        width: 260px;
    }

    iframe {
        max-width: 100%;
    }

    /*.heroquart {*/
    /*   	background-position: center;*/
    /*height: 60vh;*/
    /*	width: 100vh;*/
    /*}*/
}

@media (min-width:750px) and (max-width:1000px) {
    iframe {
        max-width: 100%;
    }

    .hero {
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100vh;
        white-space: normal;
    }

    .headerHero h1 {
        width: 100%;
        flex-wrap: wrap;
        font-size: 3em;
        padding: 5px;
        margin-right: 20px;
    }

    .headerHero h2 {
        display: none !important;
    }

    .headerHero12 {
        margin-left: 0 !important;
    }

    .homeNewsItems {
        height: auto !important;
        margin-top: 40px !important;
        max-height: none !important;
        min-height: auto !important;
    }
}

@media (min-width:992px) {
    .container {
        max-width: 960px
    }
}

@media (min-width:1005px) and (max-width:1300px) {
    .headerHero {
        margin-top: 35vh !important;
    }
}

caption {
    margin-top: 1.33em !important;
    margin-bottom: 1.33em !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-weight: bold !important;
    caption-side: top !important;
    color: black;
}


/* Accesibility Issues 4.1.1 Parsing */

/* Issue 1 - Navigation Partial View */
#logout {
    width: 100%;
    position: fixed;
    margin-top: 90px;
    z-index: 9999;
}

/* Issue 2 - LoggedInDetail Partial View */
#userInformation {
    background-color: var(--brand-primary-dark);
    color: var(--brand-text);
    width: 100%;
    height: 60px;
}

#userInformation p {
    color: var(--brand-text);
    top: 10px;
}

#user_content {
    margin-top: 10px;
}

#logoutBtn {
    width: 150px;
}

/* Issue 3 - Grid of child Pages Macro, and Issue 4 - Standard Page Right Column Template */
.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0, 0, 0, 0);
}

.card:hover .card-body {
    background-color: rgba(211, 211, 211, 0.3);
}

.brexitInfo .card-body {
    min-height: 140px;
}

@media (max-width: 600px) {
    .macrobtn {
        display: block;
        width: 90%;
        max-width: 100%;
        margin: 10px auto;
        padding: 14px 20px;
        font-size: 16px;
        text-align: center;
        white-space: normal;
        /* Allow text to wrap */
        word-wrap: break-word;
        /* Break long words if needed */
        box-sizing: border-box;
        /* Ensures padding doesn't overflow width */
    }
}

@media (max-width: 960px) {
    .col-md-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

.mission-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #f3f3f3;
    /* your grey */
}

/* Keep content readable inside */
.mission-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}