@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@font-face {
    font-family: 'Source Sans Pro';
    src: url('fonts/SourceSansPro-Regular.eot');
    src: url('fonts/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/SourceSansPro-Regular.woff2') format('woff2'),
        url('fonts/SourceSansPro-Regular.woff') format('woff'),
        url('fonts/SourceSansPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --black: #000000;
    --white: #FFFFFF;
    --blue: #73ADE5;
    --dark-blue: #6699CC;
}

body {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    line-height: 28px;
    letter-spacing: .3px;
    min-height: 100%;
}
body * {
    line-height: 28px;
}
body > .form-wrapper,
body > .form-wrapper > .client-wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
h1 {
    line-height: 60px;
}
h2 {
    line-height: 1.25;
    margin-bottom: 20px;
}
h3 {
    line-height: 1.2;
    margin-bottom: 15px;
}
h4 {
    line-height: 28px;
    margin-bottom: 0;
}
h5 {
    background-color: var(--blue);
    color: var(--white);
    display: inline-block;
    padding: 4px 10px 3px;
    text-shadow: 1px 1px 4px rgb(0 0 0 / 10%);
    margin-bottom: 10px;
    letter-spacing: .5px;
    line-height: 18px;
}
p {
    line-height: 28px;
}
p:last-child {
    margin-bottom: 0;
}
a {
    color: var(--blue);
}
a:hover {
    color: var(--blue);
}
p a {
    color: var(--blue) !important;
}

/* Btns */
.btn {
    color: var(--white);
    font-size: 16px;
    line-height: 26px;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 12px 26px;
    white-space: inherit;
}
.btn-default {
    background-color: var(--blue);
    border-color: var(--blue);
} 
.btn-default:active, 
.btn-default:focus, 
.btn-default:hover {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
}
.btn-green {
    background-color: var(--blue);
    border-color: var(--blue);
}
.btn-green:active, 
.btn-green:focus, 
.btn-green:hover {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
}
.btn-grey,
.btn-gray {
    background-color: #F2F5F8;
    border-color: #F2F5F8;
    color: var(--black);
}
.btn-grey:active,
.btn-grey:focus,
.btn-grey:hover,
.btn-gray:active,
.btn-gray:focus,
.btn-gray:hover {
    background-color: #DDDDDD;
    border-color: #DDDDDD;
    color: var(--black);
}
.btn.btn-sm {
    font-size: 12px;
    line-height: 20px;
    letter-spacing: .3px;
    padding: 10px 12px 9px;
}


/* Common */
.page-container {
    flex: 1 0 auto;
}
.equal-height, .full-height {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.equal-height > div, .full-height > div {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

/* flex css */
.d-flex {
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex-wrap {
    -webkit-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
}
.justify-content-center {
    -ms-flex-pack: center!important;
    justify-content: center!important;
}


/* breadcrumbs */
.breadcrumbs {
    margin-bottom: 0;
    border: none;
    background-color: #F2F5F8;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.breadcrumb > li + li > a {
    margin-left: 3px;
}

/* Header */
.header-navbar {
    transition: all 0.3s ease 0s;
    font-family: 'Source Sans Pro';
}
.header-wrapper {
    border-bottom: 1px solid rgba(255, 255, 255, .5);
}
.non-transparent .header-wrapper {
    border-bottom: 1px solid #dbdbdb;
}
.transparent .header-wrapper {
    z-index: 9999;
}

@-webkit-keyframes sticky-animation {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes sticky-animation {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.header-strapline .btn ~ .btn {
    margin-left: 5px;
}
.header.navbar {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.header.navbar::before,
.header.navbar::after {
    display: none;
}
.header .navbar-header img {
    height: auto;
    padding: 0;
    max-width: 336px;
    max-height: 37px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.header-sticky .header .navbar-header img {
    -webkit-filter: inherit !important;
    filter: inherit !important;
}
.header .nav-right {
    margin-left: auto;
}
.header .navbar-nav > li > a {
    color: var(--black);
    font-weight: normal;
    padding: 0;
    text-transform: uppercase;
}
.header .navbar-nav > li:focus > a,
.header .navbar-nav > li:hover > a,
.header .navbar-nav > .open > a,
.header .navbar-nav > .open > a:focus,
.header .navbar-nav > .open > a:hover,
.header .navbar-nav > li > a.current {
    background-color: transparent;
    color: var(--blue);
}
@media screen and (min-width: 992px) {
    .header .navbar-nav > li > .dropdown-menu {
        background-color: var(--white);
        border: 1px solid #EEEEEE;
        border-top: 2px solid var(--blue);
    }
    .header .navbar-nav .dropdown-menu li a {
        color: var(--black);
    }
    .header .navbar-nav .dropdown-menu li:hover a {
        background-color: #F2F5F8;
        color: var(--blue);
    }
    .transparent .navbar-nav > li > .dropdown-icon:before {
        color: var(--white) !important;
    }
    .transparent .header-sticky .navbar-nav > li > .dropdown-icon:before {
        color: var(--blue) !important;
    }
    .header .navbar-nav > li > .dropdown-icon:hover:before {
        color: var(--blue);
    }
    .header .navbar-nav > li > a:hover,
    .header .navbar-nav > li > a.current {
        border-bottom: none;
    }
}
.header .navbar-nav > li > .dropdown-icon:before {
    content: "+";
    cursor: pointer;
    display: block;
    font-size: 20px;
    margin-left: 5px;
    text-align: center;
    width: 10px;
}
.header .navbar-nav > li > a.current ~ .dropdown-icon:before {
    color: var(--blue);
}
.header .navbar-nav > li.open > .dropdown-icon:before {
    content: "-";
    color: var(--blue);
}
.non-transparent .navbar-toggle:hover .icon-bar {
    background-color: var(--black);
}
.transparent .navbar-toggle:hover .icon-bar {
    background-color: var(--white);
}




.charity-layers-intro,
.transparent-page-header,
.cms-content-heading {
    background-size: cover !important;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    position: relative;
    padding: 120px 0 50px !important;
    height: auto !important;
}
.transparent-page-header {
    color: var(--white);
    padding: 50px 0 50px !important;
}
.transparent-page-header .transparent-page-header-title {
    margin-bottom: 20px;
}
.charity-layers-intro > div,
.transparent-page-header > div,
.cms-content-heading > div {
    position: relative;
}
.charity-layers-intro:before,
.transparent-page-header:before,
.cms-content-heading:before {
    background: rgba(0, 0, 0, .4);
    content: "";
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.charity-layers-intro-panel,
.transparent-page-header-title,
.cms-content-heading-column2 {
    max-width: 600px;
}
.charity-layers-intro-panel h1,
.charity-layers-intro-panel h2,
.transparent-page-header-title h1,
.cms-content-heading-column2 h1,
.dashboard-header-title h1 {
    border-left: 5px solid var(--blue);
    color: var(--white);
    font-size: 36px;
    line-height: 1.2;
    padding: 3px 0 3px 15px;
}
.charity-layers-intro-content p,
.cms-content-heading-summary p,
.dashboard-header-summary p {
    color: var(--white);
    font-weight: 500;
}
.dashboard-header-summary p {
    color: var(--black);
}
.charity-layers-intro-content p:first-child,
.cms-content-heading-summary p:first-child,
.dashboard-header-summary p:first-child {
    margin-top: 20px;
}
div.dashboard-header-title h1 {
    color: var(--black);
    margin-bottom: 0;
}


/* Home banner */
.charity-layers-welcome {
    background-size: cover !important;
    background-position: top center !important;
    display: flex;
    align-items: flex-end;
    position: relative;
    padding: 120px 0 60px;
}
.charity-layers-welcome:before {
    background-color: rgba(89, 84, 84, .2);
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}
.charity-layers-welcome-panel {
    max-width: 600px;
}
.charity-layers-welcome h1 {
    margin-bottom: 15px;
}
.charity-layers-welcome p {
    color: var(--white);
    font-size: 20px;
    line-height: 32px;
}
.banner-btn-wrap {
    margin-top: 33px;
}
.banner-btn-wrap .btn{
    margin-right: 10px;
    margin-bottom: 10px;
}

/* WHO WE ARE */
.layers {
    padding: 0;
}
.charity-layers-whoweare-panel .card-box {
    background-color: rgba(0, 0, 0, .5);
    color: var(--white);
}
.charity-layers-whoweare-panel .card-box h2,
.charity-layers-whoweare-panel .card-box h2 a {
    color: var(--white);
}
.charity-layers-whoweare-panel h5 {
    color: var(--white);
}
.tag {
    background: var(--black);
    color: var(--white);
}
.whatwedo-panel-box h3 {
    border-left: 5px solid var(--blue);
}


/***** Blog *****/
.blog-list-item-title a:hover {
    color: var(--blue);
}
.blog-list-item-date {
    color: #768692;
}
.blog-list-item-title {
    border-left: 5px solid var(--blue);
}
.blog-space {
    background-color: #F5F5F5;
}
.blog-list-header .blog-list-item-title {
    border-left: 5px solid var(--blue);
}
/* Pagination */
.pagination-box .pagination li a {
    background: #F2F5F8;
}
.pagination-box .pagination li a:hover,
.pagination-box .pagination li a:focus {
    background-color: #F1F1F1;
    color: var(--black);
}
.pagination-box .pagination li.active a,
.pagination-box .pagination li.active a:hover {
    background-color: var(--blue);
    color: var(--white); 
}


/***** blog details *****/
.blog-listing-image {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-end;
    margin-bottom: 50px;
}
/* share */
.blog-listing-share .blog-listing-share-inner {
    border-bottom: 1px solid var(--black);
}
.blog-listing-share .blog-listing-share-on a i {
    color: var(--black);
}




/* Content-Layer-Templates => page */
.sbs-layer .sbs-layer-type-2.card-box .full-height > div {
    justify-content: center;
    text-align: center;
}


/* Top cookie */
.cookie-consent {
    background-color: #E6F7FF;
}
.cookie-confirmation {
    background: #E6F7FF;
}
.cookie-confirmation p a,
.cookie-consent p a {
    color: #1a558e !important;
}

/* Footer */
.footer.footer-desktop {
    color: var(--black);
}
.footer-copyright {
    background-color: var(--black);
}
.footer h3 {
    color: var(--black);
}
.footer h3:after {
    background-color: var(--blue);
}






/***************** joe-navin new site css *******************/
/* home slider */
.non-transparent .carousel-caption .slider-title, 
.carousel-caption .slider-title {
    background: rgba(255, 255, 255, .85);
}
.slider-title {
    font-family: inherit;
}
.slider-title > a {
    color: var(--black);
}
.slider-title:hover > a {
    color: var(--blue);
}
.front-carousel .btn-default,
.front-carousel-V2 .btn-default {
    background: rgba(255, 255, 255, .8) !important;
}
.front-carousel .btn-default:hover, 
.front-carousel .btn-default:active, 
.front-carousel .btn-default:focus, 
.front-carousel .btn-default:visited,
.front-carousel-V2 .btn-default:hover,
.front-carousel-V2 .btn-default:active,
.front-carousel-V2 .btn-default:focus,
.front-carousel-V2 .btn-default:visited {
    background: var(--white) !important;
}
.front-carousel .btn-default > i,
.front-carousel-V2 .btn-default > i {
    color: var(--black);
}

/* only gallery slider changes  */
.gallery-slider {
    border-bottom: 1px solid #DBDBDB;
}
.gallery-slider .front-carousel .btn-default {
    background: #dfdfdf !important;
}
.gallery-slider .front-carousel .btn-default > i {
    color: var(--black);
}
.gallery-slider .front-carousel .btn-default:hover {
    background: #C2CBC8 !important;
}

/* home - gallery-types slider */
.gallery-types-item-title > a {
    color: var(--black);
}
.front-carousel-V2 .btn.btn-default {
    background: #dfdfdf !important;
}
.front-carousel-V2 .btn.btn-default:hover {
    background: #C2CBC8 !important;
}

/*  new Galleries - Work page */
.row.work-gallery-row .card .card-body {
    color: var(--white);
    -webkit-tap-highlight-color: transparent;
    background: rgba(0, 0, 0, .85);
}
@media screen and (max-width: 767px) {
    .row.work-gallery-row .card .card-body {
        color: var(--black);
        background: transparent;
    }
}


/* Galleries details */
.btn-white {
    color: var(--black);
}
.btn-white:hover {
    background-color: #F0F0F0;
    color: var(--black);
}
.gallery-detail-items h6 {
    color: var(--white);
    background: rgba(0, 0, 0, .6);
}


/* === Gallery Overlay === */
.gallery-overlay {
	background: rgba(0, 0, 0, 0.95);
}
.overlay-image-wrapper img {
	border: 2px solid var(--white);
}
.close-btn,
.prev-btn,
.next-btn {
	color: var(--white);
}
.back-gallery {
    color: var(--white);
}
.back-gallery:hover {
    color: #ccc;
}
/* Loader (spinner) */
.loader {
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top: 4px solid var(--white);
}


/* custom breadcrumb */
.cus-breadcrumb {
    text-transform: uppercase;
    font-weight: 500;
}
.cus-breadcrumb > a {
    margin-right: 5px;
}
.cus-breadcrumb > a:hover {
    margin-right: 5px;
    text-decoration: underline;
}
.cus-breadcrumb > span {
    margin-left: 5px;
}
.Gallerie-dis {
    margin-bottom: 20px;
}


.full-height, .full-height > div {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.full-height:before, .full-height:after {
    display: none;
}
/* Intro and about pages*/
.wellbeing-about > div > .card-box {
    padding: 40px;
}
.wellbeing-about-intro .full-height {
   -webkit-align-items: center;
   align-items: center;
}
.wellbeing-about-intro .full-height > div:first-child .sbs-layer-content {
    width: 100%;
}
.wellbeing-about-intro .layer-image-col-2 {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    border-radius: 15px;
    padding-top: 75.09%;
    float: right;
    width: 100%;
    height: 100%;
    border: 1px solid #eeeef0;
    min-height: 320px;
}
.wellbeing-about-intro .sbs-layer-content {
    width: 100%;
}
.wellbeing-about-intro .sbs-layer-content .btn {
    margin-top: 30px;
}
.wellbeing-about-intro .full-height > div:first-child .sbs-layer-content > img {
    border-radius: 15px;
}
@media screen and (max-width: 991px) {
    .wellbeing-about-intro .row > div + div {
        margin-top: 30px;
        width: 100%;
    }
}
@media screen and (max-width: 767px) {
    .wellbeing-about > div > .card-box {
        padding: 25px;
    }
    .wellbeing-about-intro .row > div {
        width: 100%;
    }
}
@media screen and (max-width: 479px) {
    .wellbeing-about-intro .layer-image-col-2 {
        min-height: 350px;
    }
}
@media screen and (max-width: 380px) {
    .wellbeing-about-intro .layer-image-col-2 {
        min-height: 280px;
    }
}











/* contact, about - header */
.overall-layer-wrapper-subhome > div {
    margin-bottom: 50px;
}
.banner-layer .header-overlay-box h1 {
    background: rgba(0, 0, 0, .5);
    padding: 5px 10px;
    display: inline-block;
    margin-bottom: 10px;
    color: #fff !important;
    text-transform: inherit;
}
.banner-layer:before {
    display: none;
}
.banner-layer:after {
    content: "";
    height: 30%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 48%) 40%, rgba(0, 0, 0, 0) 100%);
}
.banner-layer .header-overlay-box h1 + div {
    margin-bottom: 0;
    background: rgba(0, 0, 0, .5);
    padding: 10px;
    color: #fff !important;
    display: inline-block;
}
.banner-layer .header-overlay-box h1 + div p {
    color: #fff !important;
}
.banner-layer .header-overlay-box h1 + div p:last-child {
    margin-bottom: 0;
}

/* Charity Intro - header*/
.charity-layers-intro.layer-colour-scheme-dark-grey:before {
    display: none;
}
.header-overlay-box {
    display: inline-block;
    width: 100%;
    max-width: 750px;
}
.header-overlay-box .cus-breadcrumb {
    background: rgba(0, 0, 0, .5);
    padding: 5px 10px;
    display: inline-block;
    margin-bottom: 10px;
    font-weight: bold;
     color: var(--white) !important;
     text-transform: inherit;
}
.header-overlay-box .Gallerie-dis {
    margin-bottom: 0;
    background: rgba(0, 0, 0, .5);
    padding: 10px;
     color: var(--white) !important;
}
.header-overlay-box .Gallerie-dis p:last-child {
    margin-bottom: 0;
}
.header-overlay-box .cus-breadcrumb *,
.header-overlay-box .Gallerie-dis * {
    color: var(--white) !important;
}


/* blog details - header */
.cms-content-image-panel.charity-layers-intro,
.blog-listing-image,
.banner-layer {
    background-color: #F2F5F8 !important;
    min-height: 480px !important;
}
.blog-listing-image.layer-colour-scheme-dark-grey:before {
    display: none;
}
.cms-content-image-panel .image-panel-title-wrapper .cms-content-image-title {
    text-align: left;
    margin-bottom: 10px;
}
.cms-content-image-panel .image-panel-title-wrapper .cms-content-image-title h1 {
    border: none;
    padding: 0;
    background: rgba(0, 0, 0, .5);
    padding: 5px 10px;
    display: inline-block;
    margin-bottom: 10px;
    color: var(--white) !important;
    text-transform: inherit;
}
.cms-content-image-panel .cms-content-image-dis {
    background: rgba(0, 0, 0, .5);
    padding: 10px;
    color: var(--white) !important;
    display: inline-block;
}
.cms-content-image-panel .cms-content-image-date {
    background: var(--black);
    position: relative;
    font-weight: 500;
    display: inline-block;
    padding: 6px 10px 6px 30px;
    color: var(--white);
    border-radius: 4px;
}
.cms-content-image-panel .cms-content-image-date::before {
    content: "\f073";
    font-family: 'FontAwesome';
    position: absolute;
    left: 10px;
}
.tags-wrap {
    margin-bottom: 10px;
}




/* Responsive css */

@media screen and (max-width: 767px) {
    .header-overlay-box .cus-breadcrumb,
    .cms-content-image-panel .image-panel-title-wrapper .cms-content-image-title h1,
    .banner-layer .header-overlay-box h1 {
        font-size: 20px;
        line-height: 1.5;
    }
    .header-overlay-box .Gallerie-dis,
    .banner-layer .header-overlay-box h1 + div,
    .cms-content-image-panel .cms-content-image-dis {
        font-size: 12px;
        line-height: 1.5;
        max-height: 170px;
        overflow: auto;
    }
    .header-overlay-box .Gallerie-dis p,
    .banner-layer .header-overlay-box h1 + div p,
    .cms-content-image-panel .cms-content-image-dis p {
        line-height: 1.5;
    }
    .cms-content-image-panel.charity-layers-intro, 
    .blog-listing-image, .banner-layer {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
    }
    .cms-content-image-panel .image-panel-title-wrapper {
        bottom: 40px;
        top: auto;
        transform: inherit;
    }
    .blog-listing-image,
    .cms-content-image-panel.charity-layers-intro {
        min-height: 400px !important;
    }

    .overall-layer-wrapper-subhome > div {
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 479px) {
    .container {
        width: 100%;
    }
    .navbar-header .header-logo {
        width: 70%;
    }
    .header-wrapper .navbar-header img {
        max-width: 180px;
    }

    .download-item .download-btn .btn {
        font-size: 12px;
        padding: 6px 10px;
    }
}



/********** Blog Comments /**********/
.blog-comments .comment ~ .comment {
    border-top: 1px solid #DBDBDB;
    margin-top: 10px;
    padding-top: 10px;
}
.blog-comments .comment-date::before {
    content: '• ';
}
.blog-comments .comment-form h4 {
    margin-top: 20px;
    margin-bottom: 10px;
}