/* Universal */

:root {
    /* Generic */
    --grid-column-gap: 2rem;
    --grid-row-gap: 0rem;
    --blue-border: 1rem solid #0426ff;
    --yellow-border: 1rem solid #ff8906;
    --green-border: 1rem solid #33ba41;
    --red-border: 1rem solid #fe0000;
    --RAL-light-blue: #3e83fe;
    --RAL-yellow: #ff8906;
    --RAL-blue: #0426ff;
    --RAL-green: #33ba41;
    --RAL-red: #fe0000;

    /* News */
    --news-main-bg-color: #fff;
    --news-border-color: rgb(200,200,200);
    --news-arrow-color: #ff8906;

    /* Tier 1 Passive */
    --news-level-1-bgcolor: #fff;
    --news-level-1-color: #000;
    /* Tier 1 Hover */
    --news-hover-1-color: #3e83fe;
    --news-hover-1-bgcolor: #fff;
    /* Tier 1 Active */
    --news-active-1-color: #33ba41;
    --news-active-1-bgcolor: #fff;

    /* Tier 2 */
    --news-active-2-color: #fff;
    --news-hover-2-color: #feefb2;
    --news-level-2-color: #fff;
    --news-hover-2-bgcolor: #feefb2;
    --news-active-2-bgcolor: #fff;
    --news-level-2-bgcolor: #fff;
    /* Tier 3 */
    --news-hover-3-color: #fedfa0;
    --news-active-3-color: #feefb2;
    --news-level-3-color: #feefb2;
    --news-hover-3-bgcolor: #fedfa0;
    --news-active-3-bgcolor: #feefb2;
    --news-level-3-bgcolor: #feefb2;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    color: black;
    line-height: 1.5;
    font-size: 16px;
    font-weight: 300;
}

p, blockquote {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

h1 {
    font-weight: 500;
    font-size: 3rem;
}

h2 {
    font-weight: 500;
    font-size: 2rem;
}

h3 {
    font-weight: 400;
    font-size: 1.5rem;
}

.centred {
    width: 75%;
    margin: auto;
    text-align: center;
}

.inlineHeading {
    font-weight: 500;
    max-height: 2rem;
    margin-right: 1rem;
}

.flexBoxContainer {
    display: flex;
    flex-wrap: wrap;
}

.flexBox {
    height: 100%;
}

.quoteHeading {
    margin-bottom: 1rem;
    display: block;
}

blockquote {
    padding-left: 1rem;
    margin-left: 0px;
    margin-right: 0px;
    quotes: "\201C""\201D""\2018""\2019";
    font-style: italic;
}

blockquote:before {
    content: open-quote;
}

blockquote:after {
    content: close-quote;
}

blockquote span {
}

blockquote span:before {
}

blockquote span:after {
}

.navLocation {
    position: relative;
    top: -2rem;
}

/* Another Org Contact Details */

.otherContact {
    margin-left: 1rem;
    margin-top: 0.5rem;
    width: 22rem;
    display: grid;
    grid-template-areas:
        'call number'
        'email eAddress';		
}

.otherContactCall {
    font-weight: 500;
    grid-area: call;
}

.otherContactNumber {
    grid-area: number
}

.otherContactEmail {
    font-weight: 500;
    grid-area: email;
}

.otherContactEAddress {
    grid-area: eAddress
}

/*.oneHundred {
        max-width: 100% !important;
        overflow: hidden;
}

.borderGrid {
        display: grid;
        grid-template-columns: 
                2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem
                2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem
                2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 
                2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem
                2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem
                2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 
                2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem 2.15rem
                ;
        grid-template-rows: 2.3rem;
        grid-gap: 0.15rem;
        grid-auto-flow: column;
        padding: 0px;
        margin: 0px;
}

.boundaryImage {
        max-height: 2rem;
        margin: 0px;
        padding: 0px;
}
*/
/* Banner */

#banner {
    /*	width:  60%;
            min-width: 600px;
            margin-left: auto;
            margin-right: auto;*/
    /*	padding-bottom: 2rem;
            background: White;*/
}
/*
#bannerLogo {
        width: 100%;
}

#bannerText {
    padding: 0;
        margin: 0;
    margin-top: 0 !important;
        color: #000000;
}
*/

/* Main Body*/
#main {
    padding-top: 4.5rem;
}

.content {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 4rem;
    padding-top: 2rem;
    text-align: justify;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 72rem) {
    .content {
        width: 72rem;
    }
}

@media (max-width: 72rem) {
    .content {
        width: auto;
        min-width: 38rem;
    }
}

/* Float Header */

#floatHeader {
    position: fixed;
    top: 0px;
    width: 100%;
    background-color: white;
    height: 5.25rem;
    font-size: 1.25rem;
    border-bottom: 2px solid rgb(50,50,50);
    box-shadow: 0px 3px 3px rgba(50,50,50,0.8);
    z-index: 10;
}

#navMenu {
    margin-left: auto;
    margin-right: auto;
    width: 60%;	
    padding-top: 0.5rem;
    min-width: 680px;
}

#navMenuLogoAnchor {
    display: inline-block;
    text-align: left;
    margin: 0;
    min-width: 232px;
    width: 20%;
    text-decoration: none;
}

#navMenuLogo {
    vertical-align: middle;
    height: 3.5rem;
}

#navMenuLogoStrapline {
    font-size: 0.6rem;
    text-decoration: none;	
    color: black;
    position: relative;
    top: -8px;
}

#navMenuItems {
    text-align: right;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0none;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1rem;
    min-width: 446px;
    float: right;
    margin-top: 0.4rem;
}

.navMenuItem, .navSubMenuHeading {
    vertical-align: middle;
    color: black;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    display: inline-block;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 0px;
    padding-left: 1.4rem;
}

.navSubMenuHeading {
}

.navSubMenu {
    position: relative;
    display: inline-block;
}

.navSubMenuItems {
    background: rgb(255, 255, 255);
    display: none;
    position: absolute;
    min-width: 9rem;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    padding-bottom: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.navSubMenuItem {
    text-align: left;
    color: black;
    padding-top: 1.5rem;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.navSubMenuItem:hover, .navMenuItem:hover {
    color: var(--RAL-light-blue);
}

.navSubMenu:hover .navSubMenuItems {
    display: block;
}

.navSubMenu:hover .navSubMenuHeading {
    color: var(--RAL-light-blue);
}



/* Appeal */

#appealContainer {
    border-top: var(--yellow-border);
}

#appeal p{
}

#appeal h1 {

}

#appeal a {
    text-decoration: none;
    color: white;
}

#googleMap {
    width: 100%;
    height: 20rem;
}

.locationContainer {
    color: white;
    font-weight: bold;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    vertical-align: middle;
    padding: 0rem 0rem 2rem 0rem;
}

.locationItem {
    width: 8rem;
    background-color: #3e83fe;
    border-radius: 1rem;
    padding: 0.5rem;
    margin: 0.5rem;
}

.locationItem:hover {
    background-color: BLACK;
}

/* History */

#historyContainer {
    border-top: var(--blue-border);
}

#history {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: var(--grid-column-gap);
}

#histroy1 {
    grid-column-start: 1;
    grid-column-end: end;
    grid-row-start: 1;
    grid-row-end: 2;
}

#history2 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}

#history3 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
}

#history4 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 5;
}

#history5 {
    grid-column-start: 1;
    grid-column-end: 2;
}

#bosniaImage1 {
    height: 10rem;
    grid-column-start: 2;
    grid-column-end: end;
    grid-row-start: 2;
    grid-row-end: 3;
    margin-top: auto;
    margin-bottom: auto;
}

#bosniaImage2 {
    height: 10rem;
    grid-column-start: 2;
    grid-column-end: end;
    grid-row-start: 3;
    grid-row-end: 4;
    margin-top: auto;
    margin-bottom: auto;
}

#faithInActionLogo {
    width: 100%;
    grid-column-start: 2;
    grid-column-end: end;
    grid-row-start: 4;
    grid-row-end: 5;
    margin-top: auto;
    margin-bottom: auto;
}

/* Air Drop Box */

#adbContainer {
    border-top: var(--green-border);
}

#adb {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: var(--grid-column-gap);
}

#adb1 {
    grid-column-start: 1;
    grid-column-end: end;
    grid-row-start: 1;
    grid-row-end: 2;
}

#adb2 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}

#adb3 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
}

#adb4 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 5;
}

#adb5 {
    grid-column-start: 1;
    grid-column-end: 2;
}

#adbLogoContainer {
    grid-column-start: 2;
    grid-column-end: end;
    grid-row-start: 2;
    grid-row-end: 7;
    margin-top: auto;
    margin-bottom: auto;
    width: 100%;
}

#adbLogo {
    width: 100%;
}

.inGridImageBox {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-gap: 1rem;
    margin-top: 1rem;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.adbImage {
    display: block;
    width: 100%;
    transition: transform .3s;
}

.adbImage:hover {
    transform: scale(2.0);
}

/* Trustees */

#trusteesContainer {
    border-top: var(--red-border);
}

/* Charitable Objects */

#cObjContainer {
    border-top: var(--yellow-border);
}


#cObj {
    font-style: italic;
    margin-left: auto;
    margin-right: auto;
}

/* Footer */

#footer {
    margin-top: 0rem;
    width: 100%;
    border-top: 0.5rem solid black;
    margin-top: 2rem;
    padding-top: 2rem;
    text-align: left;
    padding-bottom:2rem;
}

#contact {
    display: grid;
    grid-template-areas:
        'social social social'
        /*		'title title title' */
        'address phone other'
        'address email other';
    grid-gap: 1rem;
    width: 60%;
    min-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

#socialMedia {
    grid-area: social;
    text-align: center;
    margin-bottom: 1rem;
}

#socialMedia a img {
    height: 2.5rem;
    width: 2.5rem;
}

#socialMedia a {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

#contactTitle {
    grid-area: title;
}

#phone{
    grid-area: phone;
}

#email{
    grid-area: email;
}

#phoneNumber {
    min-width: 7rem;
}

#address {
    grid-area: address;
}

#adressText {
    min-width: 10rem;
}

#other {
    grid-area: other;
}

/* News Expandable */

#newsBoxContainer {
    padding-top: 2rem;
}

.newsTop {
    border-bottom: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.newsCollapse1.newsTop {
    border-radius: 10px 10px 0px 0px;
}

.newsBetween {
    border-top: 1px solid var(--news-border-color);
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.newsBottom {
    border-radius: 0px 0px 10px 10px;
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.newsCollapse1.newsBottom {
    border-top: 1px solid var(--news-border-color);
}

.newsBox {
    border-radius: 10px;
    border: 1px solid var(--news-border-color);
    box-shadow: 0px 0px 3px rgba(50,50,50,0.8);
}

.newsCollapse1, .newsCollapse2, .newsCollapse3{
    display: button;
    min-height: 4.5rem;
    line-height: 4.5rem;
    color: black;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-size: 1rem;
}

.newsCollapse1 {
    font-weight: 600;
    font-size: 1.5rem;
    background-color: var(--news-level-1-bgcolor);
    color: var(--news-level-1-color);
}

.newsCollapse2 {
    font-weight: 500;
    background-color: var(--news-level-2-bgcolor);
    color: var(--news-level-2-color);
    font-size: 1.5rem;
}

.newsCollapse3 {
    background-color: var(--news-level-3-bgcolor);
    color: var(--news-level-3-color);
    font-weight: 400;
    font-size: 1.5rem;
}

.newsVerticalMiddle {
    pointer-events: none;
    padding-left: 1.5rem;
    line-height: 1.5rem;
    width: 90%;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    display: inline-grid;
    grid-template-columns: 79% 19%;
    grid-column-gap: 2%;
}

.newsHeadline {
    grid-column-start: 1;
    grid-column-end: 2;
}

.newsDate {
    grid-column-start: 2;
    grid-column-end: end;
}

.newsCollapse1:hover {
    background-color: var(--news-hover-1-bgcolor);
    color: var(--news-hover-1-color);
}

.newsCollapse2:hover {
    background-color: var(--news-hover-2-bgcolor);
    color: var(--news-hover-2-color)
}

.newsCollapse3:hover {
    background-color: var(--news-hover-3-bgcolor);
    color: var(--news-hover-3-color)
}

.newsActive1 {
    background-color: var(--news-active-1-bgcolor);
    color: var(--news-active-1-color);	
}

.newsActive2 {
    background-color: var(--news-active-2-bgcolor);
    color: var(--news-active-2-color);
}

.newsActive3 {
    background-color: var(--news-active-3-bgcolor);
    color: var(--news-active-3-color);
}

.newsActive1.newsBottom, .newsActive2.newsBottom, .newsActive3.newsBottom {
    border-radius: 0px;
}

.newsCollapse1:after, .newsCollapse2:after, .newsCollapse3:after {
    padding-right: 1rem;
    content: '\2bc6';
    color: var(--news-arrow-color);
    font-weight: normal;
    font-size: 1.25rem;
    display: inline;
    float: right;
    height: 100%;
}

.newsActive1:after, .newsActive2:after, .newsActive3:after {
    content: "\2bc5"; 
}

.newsContent {
    padding-left: 1rem;
    padding-right: 1rem;
    height: 0;
    overflow: hidden;
    background-color: var(--news-main-bg-color);
}

.newsTransition {
    transition: height 0.2s ease-out;
}

.newsExpanded1, .newsExpanded2, .newsExpanded3 {
    border-top: 1px solid var(--news-border-color);	
}

.newsItemImage {
    width: 14rem;
    display: inline-block;
    transition: transform .3s;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: auto;
    margin-bottom: auto;
}

.newsItemImage.top:hover {
    transform: scale(2.0) translateX(-3rem) translateY(3rem);
}

.newsItemImage.middle:hover {
    transform: scale(2.0) translateX(-3rem);
}

.newsItemImage.bottom:hover {
    transform: scale(2.0) translateX(-3rem) translateY(-3rem);
}

.newsItemSingleImageContainer {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.newsItemSingleImage {
    width: 95%;
}

.newsItemVideoContainer {
    margin: 2rem;
    position: relative;
    padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */ 
}

.newsItemVideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.externalLogos {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.externalLogoContainer {
    min-width: 15rem;
    text-align: center;
}

.externalLogo {
    height: 5rem;
    margin-bottom: 1rem;
    max-width: 15rem;
    object-fit: contain;
}

.socialMediaBox {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.socialIcon {
    height: 2rem;
    width: 2rem;
}
/* News Items */

/* Heart of Kent Hospice Bath Bombs Donation */

/* Freezer Donation */

#freezerDonation {
    display: grid;
    grid-template-columns: auto 13rem;
    grid-column-gap: var(--grid-column-gap);
    grid-row-gap: var(--grid-row-gap);
}

#freezerDonation1 {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 3;
}

#freezerDonationImage1 {
    grid-column-start: 2;
    grid-column-end: end;
    grid-row-start: 1;
    grid-row-end: 2;
}

#freezerDonationImage2 {
    grid-column-start: 2;
    grid-column-end: end;
    grid-row-start: 2;
    grid-row-end: 3;
}

/* PPE Donation */

#ppeDonationContainer {
}

#ppeDonation {
    display: grid;
    grid-template-columns: auto 13rem;
    grid-column-gap: var(--grid-column-gap);
    grid-row-gap: var(--grid-row-gap);
}

#ppeDonation1 {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 3;
}

#ppeDonationImage1 {
    grid-column-start: 2;
    grid-column-end: end;
    grid-row-start: 1;
    grid-row-end: 2;
}

#ppeDonationImage2 {
    grid-column-start: 2;
    grid-column-end: end;
    grid-row-start: 2;
    grid-row-end: 3;
}

/* Appeal Success */

#appealSuccessContainer {
}

#appealSuccess {
    display: grid;
    grid-template-columns: auto 13rem;
    grid-column-gap: var(--grid-column-gap);
    grid-row-gap: var(--grid-row-gap);
}

#appealSuccess div {
    margin-top: auto;
    margin-bottom: auto;
}

#appealSuccess1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 5;
}

#archCoImage1 {
    grid-column-start: 2;
    grid-column-end: end;
    grid-row-start: 1;
    grid-row-end: 2;
}

#archCoImage2 {
    grid-column-start: 2;
    grid-column-end: end;
    grid-row-start: 2;
    grid-row-end: 3;
}

#archCoImage3 {
    grid-column-start: 2;
    grid-column-end: end;
    grid-row-start: 3;
    grid-row-end: 4;
}

#archCoImage4 {
    grid-column-start: 2;
    grid-column-end: end;
    grid-row-start: 4;
    grid-row-end: 5;
}