/*@charset "UTF-8";*/

/** {
    box-sizing: border-box;
}*/
/*font-size in original home page otherwise choose not to use it !!??*/
/*html {
    font-size: 62.5%;
}*/

/*body {
    background: #eceef1;
    font-family: "Slabo 27px", serif;
    color: #333a45;
}*/

.container_trans {
    /*margin-left: 1rem;*/
    /*margin-right: 1rem;/
   /* background: rgba(104, 101, 101, 0.68);*/
    background: rgba(60, 68, 56, 0.68);
}

.flexboxtitle {
    background-color: none;
    color: #fff;
    /*padding: unset;*/
}

.wrapper {
    /*margin: 5em auto;*/
    max-width: 1500px; /*Originally 1000px */
    /*background-color: #fff;*/
    /*box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);*/
}

.cards {
    padding: 5px; /*was 15px*/
    display: flex;
    flex-flow: row wrap;
}

/*Default 4 cards horizontal (Essentially >= 992px)*/
.card {
    margin: 15px;
    /* width: calc((100% / 3) - 30px);*/
    width: calc((100% / 4) - 30px);
    transition: all 0.2s ease-in-out;
    /*max-width: 280px;*/ /*added*/
    /*border-radius: 20px 20px;*/
   padding: 5px;  
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .card {
        width: calc((100% / 3) - 30px);
    }
}

@media screen and (min-width: 581px) and (max-width: 767px) {
    .card {
        /*width: 100%;*/
        width: calc((100% / 2) - 30px);
    }

    /*Reset close position - Only require if media 481px and not 581px for 2 cards*/
    /*
    .card__expander .fa {
          left: 10px;
    }*/
}

@media screen and (max-width: 580px) {
    .card {
        width: 100%;
        padding :0px;
        margin-top:10px;
        margin-bottom:10px;
        margin-left:0px;
        margin-right:0px;
    }
    /*11/2024*/
    .card__image {
        max-height:220px; 
    }
        /*Reset close position Only require if media 481px and not 581px for 2 cards */
        /*.card__expander .fa {
         right: 10px !important;
    }*/
}

.card:hover .card__inner {
    /*background-color: #1abc9c;*/
    transform: scale(1.05);
}

.card__inner {
    width: 100%;
    /*padding: 30px;*/ /*out dah*/
    position: relative;
    cursor: pointer;
    /*background-color: #949fb0;*/
    color: #eceef1;
    font-size: 1.5em;
    text-transform: uppercase;
    text-align: center;
    transition: all 0.2s ease-in-out;
    /*height: 400px;*/ /*Added*/
    /*overflow: hidden;*/
    /*border-radius:12px;*/
}

    .card__inner:after {
        transition: all 0.3s ease-in-out;
    }

    .card__inner .fa {
        width: 100%;
        margin-top: 0.25em;
    }

.card__expander {
    transition: all 0.2s ease-in-out;
    /*background-color: #333a45;*/ /*make same colour asblog card*/
    background-color: #242323;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    color: #eceef1;
    font-size: 1.5em;
    border-radius: 10px;
    /*Close button will require a higher z-index to be useable */
    margin: 0px;
}

    .card__expander .fa {
        font-size: 1.5em;
        position: absolute;
        /*top: 10px;*/ /*Amended for h2 where 2 cards displayed not to merge with h2*/
        top: 0px;
        right: 10px;
        cursor: pointer;
        z-index:9999!important; /*Important*/
    }

        .card__expander .fa:hover {
            opacity: 0.9;
        }

.card.is-collapsed .card__inner:after {
    content: "";
    opacity: 0;
}

.card.is-collapsed .card__expander {
    max-height: 0;
    min-height: 0;
    overflow: hidden;
    margin-top: 0;
    opacity: 0;
}

.card.is-expanded .card__inner {
    /*background-color: #1abc9c;*/
}

    .card.is-expanded .card__inner:after {
        content: "";
        opacity: 1;
        display: block;
        height: 0;
        width: 0;
        position: absolute;
        bottom: -30px;
        left: calc(50% - 15px);
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 15px solid #333a45;
    }

    .card.is-expanded .card__inner .fa:before {
        content: "";
    }

.card.is-expanded .card__expander {
    /*max-height: 1000px;*/ /*Our for large blog cards expanded*/
    max-height: 5000px; /*Really do not require max height JIC*/
    min-height: 200px;
    overflow: visible;
    margin-top: 30px;
    opacity: 1;
}

.card.is-expanded:hover .card__inner {
    transform: scale(1);
}

.card.is-inactive .card__inner {
    pointer-events: none;
    opacity: 0.3;
}

.card.is-inactive:hover .card__inner {
    /*background-color: #949fb0;*/
    transform: scale(1);
}

/* Expander > 992 */
@media screen and (min-width: 992px) {
    .card:nth-of-type(4n-3) .card__expander {
        margin-left: 0px;
     }

    .card:nth-of-type(4n-2) .card__expander {
        margin-left: calc(-100% - 40px);
    }
    .card:nth-of-type(4n-1) .card__expander {
        margin-left: calc(-200% - 80px);
    }
    .card:nth-of-type(4n) .card__expander {
        margin-left: calc(-300% - 120px);
    }
    
    /*Sort of Reset but all columns now defined above !!*/
    /* .card:nth-of-type(4n+5) {
        clear: left;
    }*/

    /*Expander Width*/
    .card__expander {
        width: calc(400% + 120px);
    }
}

/* Expander 768-991 */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .card:nth-of-type(3n-2) .card__expander {
        margin-left: 0px;
    }
    .card:nth-of-type(3n-1) .card__expander {
        margin-left: calc(-100% - 40px);
    }
    .card:nth-of-type(3n) .card__expander {
        margin-left: calc(-200% - 80px);
    }

   /* .card:nth-of-type(3n+-2) {
        clear: left;
    }*/

    .card__expander {
        width: calc(300% + 80px);
    }
}

/* Expander 481-767 */
@media screen and (min-width: 581px) and (max-width: 767px) {
    .card:nth-of-type(2n-1) .card__expander {
        margin-left: 5px;
    }

    .card:nth-of-type(2n) .card__expander {
        margin-left: calc(-100% - 35px);
    }

    /* .card:nth-of-type(3n+-2) {
        clear: left;
    }*/

    .card__expander {
        width: calc(200% + 30px);
    }
}



.card__image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    /*filter: contrast(70%);*/ /*No hover on mobile*/
    filter: contrast(100%);
    overflow: hidden;
    position: relative;
    transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
    /*border-bottom-style: solid;*/
    /*border-color: #808080;*/
    /*border-color: #000;*/
    /*max-height: 150px;*/
    padding: 50px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    /*max-height:200px;*/ /*Will obviously reduce all images*/
}

* {
}

    .card__image::before {
        content: "";
        display: block;
        padding-top: 66.25%;
    }

.card__image--a {
    /*background-image: url(../images/homev2/le.jpg);*/
    background-image: url(../images/homev2/eventnotify.jpg);
}

.card__image--b {
    background-image: url(../images/homev2/cc.jpg);
}

.card__image--c {
    background-image: url(../images/homev2/lb.jpg);
}

.card__image--d {
    background-image: url(../images/homev2/mi.jpg);
}

.card__image--e {
    background-image: url(../images/homev2/jw.jpg);
}

.card__image--f {
    background-image: url(../images/homev2/gc.jpg);
}

.card__image--g {
    background-image: url(../images/homev2/mn.jpg);
}

.card__image--h {
    background-image: url(../images/homev2/fc.jpg);
}

.card__image--i {
    background-image: url(../images/homev2/pw.jpg);
}

.card__image--j {
    background-image: url(../images/homev2/cl.jpg);
}

.card__image--k {
    background-image: url(../images/homev2/ar.jpg);
}

.card__image--l {
    background-image: url(../images/homev2/sc.jpg);
}

.card__image--m {
    background-image: url(../images/homev2/cv.jpg);
}

.card__image--n {
    background-image: url(../images/homev2/sac.jpg);
}

.card__image--o {
    background-image: url(../images/homev2/nt.jpg);
}

.card__image--p {
    background-image: url(../images/homev2/cp.jpg);
}

.card__image--q {
    background-image: url(../images/homev2/raf.jpg);
}

.card__image--r {
    background-image: url(../images/homev2/lb2.jpg);
}

.card__image--s {
    background-image: url(../images/homev2/cf.jpg);
}

.card__image--t {
    background-image: url(../images/homev2/unwind.jpg);
}

.card__image--u {
    background-image: url(../images/homev2/rss.jpg);
}

.card__image--30 {
    background-image: url(../images/homev2/galacard.jpg);
}

.card__image--31 {
    background-image: url(../images/homev2/cfestcard.jpg);
}

.card__image--32 {
    background-image: url(../images/bayworkgroup/wgcard.jpg);
}
.card__image--33 {
    background-image: url(../images/homev2/sitesearch.jpg);
}
.card_content {
    padding: 0.2rem;
    /*background: linear-gradient(to bottom left, #EF8D9C 40%, #FFC39E 100%);*/
    background-color:rgba(225, 219, 219, 0.96);
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    height: 200px;
    overflow: hidden;
}

.card_title {
    color: #000 !important;
    font-size: 18px !important;
    letter-spacing: 2px;
    text-transform: capitalize !important;
    margin: 0px !important;
    font-weight:600 !important;
}

/*.card_text {
    color:#000;
    font-size: 0.9rem;
    line-height: 1.3;
    margin-bottom: 1.25rem;
    font-weight: 600;
    text-transform:none;
    overflow:hidden;*/
    /*max-height:60%;*/ /*Works in that where too much text it does not go below the read more button set background colour to black to test*/
/*}(*/

.card_text {
    color: #000;
    font-size: 16px !important;
    line-height: 16px !important;
    margin-bottom: 1.25rem;
    font-weight: 500;
    text-transform: none;
    overflow: hidden;
    max-height: 60%;
    margin-top: 4px;
}

.card_content .read-more {
    text-align: right;
    /*color: #f4f6fb;*/
    color: #fff;
    font-size: 16px;
    display: inline-block;
    position: relative;
    text-decoration: none;
    background: #5e3fca;
    padding: 5px 15px;
    border-radius: 15px;
    font-weight: 600;
    text-transform: none;
}


/*.card_content .read-more:hover {
    background-color:#5e3fca;
}*/

    /*Part of the direction arrow right BUT requires read more hover below*/
    /*
    .card_content .read-more:after {
    content: "";
    font-family: FontAwesome;
    margin-left: -10px;
    opacity: 0;
    vertical-align: middle;
    transition: margin 0.3s, opacity 0.3s;
}*/

.card_content:hover {
    background-color:#eceef1;
}

.card_content .card_content_button {
    position: absolute;
    bottom: 0px;
    left: 0px;
    text-align: center;
    width: 100%;
    color: #000;
    padding: 0px;
}
.card_content .read-more:hover {
    background-color:#2405c4;
}
/*Check this with media settings - otherwise say reduce to 60% possibly*/
.card_content .card_content_height_restrict {
    height: 70%;
    overflow: hidden;
}
    /*.card_content .read-more:hover:after {
    margin-left: 5px;
    opacity: 1;
    color: #fff;
}*/