#cpSubTitle-out {
    background-color: #600040;
}

/* GENERIC ELEMENT OVERWRITES */
a {
    color: #600040;
    text-decoration: underline;
}

a:hover {
    color: #450831;
    text-decoration: underline;
}

a:visited {
    text-decoration: underline;
}


/*Change the heading colour */
h1 {
    color: #600040;
}

.h3-mdg {
    margin: 0; 
    font-weight: bold; 
    color: #600040;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #600040;
}

/* GENERIC ELEMENT ADDITIONS */
.btn-primary-md {
    border-color: #600040;
    background-color: #600040;
}

.btn-primary-md:hover {
    border-color: #450831;
    background-color: #450831;
}

/* CILIP CSS OVERWRITES */
/* member_networks_updated.css overwrites */

.cpCILIPgreybtn {
    text-decoration: none;
}

.cpCILIPgreybtn:hover {
    background-color: #600040;
    text-decoration: none;
}

.cpCILIPgreybtn:visited {
    text-decoration: none;
}

.cpContainer {
    font-size: medium;
}

.cpH3new {
    color: #600040;
    text-align: center;
}

.cpH4new {
    color: #600040;
}

.cpH6new {
    color: #600040;
}

.cpSubTitle {
    color: #ffffff;
}

/* ADDITIONAL ELEMENTS */

/* Remove link underlining, e.g. in buttons*/
.link-not-underlined {
    text-decoration: none;
}

.link-not-underlined:hover {
    text-decoration: none;
}

.link-not-underlined:visited {
    text-decoration: none;
}

.md-icon {
    color: #600040;
}

.md-icon-grey{
    color: #696969;
}

/* LAYOUT CONTAINERS */

/* general content container */
.content-container{
    margin-bottom: 50px;
    margin-top: 40px;
}

/* Container for 3 column card layouts */
.repeater-3-col {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(3, calc(33% - 11.5px));
    grid-gap: 23px;
}
/* Container for 2 column card layouts*/
.repeater-2-col {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 11.5px));
    grid-gap: 23px;
}

/* Container and columns for 2 column 75%/25% layout, collapsing to 100%/100% for smaller screens */
.flex-col-2 {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    gap: 5%;
}

.flex-col-2 > .col-1 {
    width: 70%;
}

.flex-col-2 > .col-2 {
    width: 25%;
}

/* Container for blocks */
.block-group {
    display: flex;
    box-sizing: border-box;
    gap: 0.5em;

    justify-content: center;
    flex-wrap: nowrap;
}

.block-group + .block-group {
    margin-top: 1em;
}

.block-group-vertical {
    display: grid;
    justify-content: center;
    gap: 1em;
    cursor: pointer;
}

.icon-block{
    display: grid;
    align-items: center;
    justify-content: center;
}

.icon-block-menu{
    display: grid;
    align-items: center;
    width: 48px;
}

/* CARDS */

/* Committee member cards */
.flex-card-cmte-member {
    position: relative;
    box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    text-align: center;
    padding: 30px 15px;
}

.flex-card-cmt-member-role {
    letter-spacing: 1px;
    font-weight: 700;
}

.flex-card-cmte-member-img-container {
    width: auto;
    height: 200px;
    text-align: center;
}

.flex-card-cmte-member-img {
    width: 200px;
    height: 200px;
    margin: auto;
    display: block;
    border-radius: 50%;
    border-color: #600040;
    border-width: 4px;
    border-style: solid;
}

.flex-card-cmte-member-name {
    margin: 10px 0px;
    font-size: 20px;
}


.flex-card-cmte-member-bio {

    font-size: small;
    font-style: italic;
    margin: 20px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.flex-card-cmte-member-bio:hover {

    display: block;
}

.flex-card-cmte-member-contact {
    margin: 0 auto;
}

/* Event cards */
.flex-card-event {
    position: relative;
    box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.2);
    border-radius: 15px;
}

.flex-card-event-img {
    max-width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.flex-card-event-date-time-loc-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-wrap: wrap;
}

.flex-card-event-date-time-loc {
    display: flex;
    align-items: center;
    gap: 1em;
}

.flex-card-event-icon {
    width: 1em;
}

.flex-card-event-description {
    margin: 1em 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
}


/* Responsive layout - makes a one column layout instead of a two-column layout */

@media (max-width: 1200px) {
    .flex-card-cmte-member-img-container {
        height: 150px;
    }

    .flex-card-cmte-member-img {
        height: 150px;
        width: 150px;
    }

    .logo {
        height: 90px;
    }
}

@media (max-width: 959px) {
    .repeater-3-col {
        grid-template-columns: repeat(2, calc(50% - 11.5px));
    }

    .flex-card-cmte-member-img-container {
        height: 200px;
    }

    .flex-card-cmte-member-img {
        height: 200px;
        width: 200px;
    }

    .repeater-2-col {
        grid-template-columns: repeat(1, 100%);
    }
}


@media (max-width: 750px) {
    .repeater-3-col {
        grid-template-columns: repeat(2, calc(50% - 11.5px));
    }

    .flex-card-cmte-member-img-container {
        height: 150px;
    }

    .flex-card-cmte-member-img {
        height: 150px;
        width: 150px;
    }


}

@media (max-width: 570px) {
    .block-group + .block-group {
        margin-top: 0
    }
}

@media (max-width: 500px) {
    .repeater-3-col {
        grid-template-columns: repeat(1, 100%);
    }

    .flex-card-cmte-member-img-container {
        height: 150px;
    }

    .flex-card-cmte-member-img {
        height: 150px;
        width: 150px;
    }

    .flex-col-2 {
        flex-flow: column;
    }

    .flex-col-2 > .col-1{
        width: 100%;
    }
    .flex-col-2 > .col-2 {
        width: 100%;
    }
}

  
