@charset "utf-8";
/***** STYLESHEET NAVIGATION STARTS ****************************************************************************************************************************
****************************************************************************************************************************************************************
****************************************************************************************************************************************************************

    - GLOBAL STYLES - USED SITE WIDE
        - DECLARATIONS, RESETS AND FIXES
        - HTML ELEMENTS
        - COLUMNS AND ROWS 2020 - GRID 2021 SYSTEM TO BE ADDED ONCE TESTED
        - TEXT AND LINKS
        - BACKGROUNDS
        - MARGINS AND PADDING
        - IMAGES
        - FLOATS AND ALIGNMENTS
        - BUTTONS AND CALL TO ACTIONS (CTA'S)

    - FEATURED STYLES - USED IN SPECIFIC AREAS
        - FORMS
        - SEARCH
        - MESSAGES
        - HERO
        - PARALLAX
        - CAMPAIGN LANDING TITLE
        - HIGHLIGHTED QUOTE
        - SLIDESHOW
        - MASONRY GRID
        - FULL PAGE TABS
        - EVENT CARDS
        - VCARD
        - DATA FILTER
        - RICH-MEDIA, CATEGORIES AND TRAINING COURSE DETAILS
        - SCIENTIFIC NEEDS GRID
        - SPEAKER PROFILES AND AVATARS
        - TESTIMONIALS
        - TOP NAV
        - MINI DROPDOWN MENU
        - BASKET AND CHECKOUT
        - ICONS

    - WIDTHS AND COLUMNS

    - UTILITIES

    - TESTING AREA - USED TO TEST NEW FEATURES - DON'T MIX AMONGST OTHER STYLES AND FEATURES

    - RESPONSIVE - USED FOR TABLET AND MOBILE
        - MIN 770PX - MAX 1064PX
        - MAX 769PX
        - MAX 420PX

****************************************************************************************************************************************************************
****************************************************************************************************************************************************************
****** STYLESHEET NAVIGATION ENDS *****************************************************************************************************************************/



/***** GLOBAL STYLES STARTS ************************************************************************************************************************************
****************************************************************************************************************************************************************
/***** DECLARATIONS, RESETS AND FIXES STARTS ******************************************************************************************************************/

*,*:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {clear: both;}
.clear-both {clear: both;}
.clear-left {clear: left;}
.clear-right {clear: right;}

/***** DECLARATIONS, RESETS AND FIXES ENDS ********************************************************************************************************************/


/***** HTML ELEMENTS STARTS ***********************************************************************************************************************************/

html {
    font-size: 100%;
    font-weight: normal;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

:root {
    /*--primary-purple-color: #8131B0; NEW PURPLE 2022 */
    --primary-purple-color: #7A1E99;
    --primary-grey-color: #9D9D9D;
    --primary-blue-color: #02216E;

    /*--secondary-light-green-color: #A7C190;*/
    /*--secondary-dark-green-color: #40725A;*/
    /*--secondary-blue-color: #8CA7C9;*/

    --site-black-color: #0F0C0C;
    --site-white-color: #FFFFFF;
    --site-light-grey-color: #DEDEDE;
    --site-lighter-grey-color: #F6F6F6;
    --site-dark-grey-color: #414141;

    --message-alert-color: #C12929;
    --message-warning-color: #DB7900;
    --message-success-color: #3CA64F;
}

body, h1, h2, h3, h4, h5, h6, ul, p {
    margin: 0;
    padding: 0;
    color: var(--site-dark-grey-color);
}


#wrapper {
    margin-right: auto;
    margin-left: auto;
    width: 96%; /*holding outermost div*/
    max-width: 1414px; /*147.29166666%; 96%;1414px;*/
}

[class^=extended-section] {
    height: 100%;
    position: relative;
    margin: 50px 0;
    padding-top: 20px;
    padding-bottom: 20px;
}

[class^=extended-section]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -80%);
    height: inherit;
    width: 99.02vw;
    z-index: -1;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.4;
}

@supports (display: grid ) {
    #header {
        display: grid;
        grid-template-areas: 'logo search basket-account';
        /*grid-template-columns: 270px auto 150px;*/ /* 1x contact icons */
        grid-template-columns: 270px auto 250px; /* 2x contact icons */
        /*grid-template-columns: 270px auto 270px;*/ /* 3x contact icons */
        padding: 8px 10px;
        align-items: center;
    }

    #header .grid-item-1 {grid-area: logo;}

    #header .grid-item-2 {grid-area: search;}

    #header .grid-item-3 {grid-area: basket-account;}

}

#header .grid-item-1 img {max-width: 210px;}

#header .grid-item-2 div {margin-top: 3px;}

#header .grid-item-2 div a {
    font-size: 1.8em;
    float: right;
}

#header .grid-item-2 div:first-child {float: right;}

#header .grid-item-2 div:first-child a {
    padding: 4px 10px 3px 10px;
    border-right: solid 1px #c8c8c8;
}

#header .grid-item-2 div:last-child {
    border-right: none;
    float: right;
    width: 80%;
}

#header .grid-item-2 div:last-child form a {margin-right: 10px;}

@supports (display: grid ) {
    #header .grid-item-3 div {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        font-size: 1.8em;
        float: right;
        align-items: center;
        margin-top: 3px;
        position: relative;
    }
}

#header .grid-item-3 a {
    border-right: solid 1px #c8c8c8;
    padding: 4px 10px 3px 10px;
    text-align: center;
    vertical-align: text-bottom;
}

#header .grid-item-3 span a {
    border-right: none;
    padding: 3px 10px;
    text-align: center;
}

#header .grid-item-3 div #basket-counter-container {
    position: absolute;
    top: 2px;
    right: 10px;
    min-width: 20px;
    min-height: 20px;
    text-align: center;
    background-color: var(--message-success-color);
    border: solid 1px var(--message-success-color);
    border-radius: 50%;
    padding: 3px;
    font-size: 0.5em;
}

#header .grid-item-3 a:hover #basket-counter-container {opacity: 0.5;}

#basket-counter-container span {
    color: var(--site-white-color);
    margin-top: 1px;
    margin-left: -0.5px;
    text-align: center;
}


/* IE HEADER FIX */

.ie11-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 5px 10px;
    /*border: solid 1px red;*/
}

.ie11-header > .grid-item-1 {
    display: inline-block;
    vertical-align: middle;
    align-self: center;
}

.ie11-header > .grid-item-1 img {
    margin-left: -25px;
}

.ie11-header > .grid-item-2 {
    flex-grow: 1;
    align-self: center;
    display: inline-block;
}

.ie11-header > .grid-item-2 div {
    float: right;
    max-width: 400px;
}

.ie11-header > .grid-item-3 {
    display: inline-block;
    align-self: center;
    /*border: solid 1px green;*/
    text-align: right;
}

.ie11-header > .grid-item-3 > div {
    display: flex;
    flex-direction: row;
    font-size: 1.8em;
    float: right;
    align-items: center;
    position: relative;
}


.ie11-header > .grid-item-3 span a {
    border-right: none;
    padding: 3px 10px;
    text-align: center;
}

.ie11-header > .grid-item-3 div #basket-counter-container {
    position: absolute;
    /*top: -20px;*/
    right: 10px;
    min-width: 20px;
    min-height: 20px;
    text-align: center;
    background-color: var(--message-success-color);
    border: solid 1px var(--message-success-color);
    border-radius: 50%;
    padding: 3px;
    font-size: 0.5em;
}

/* IE HEADER FIX ENDS */

main {padding-top: .5em;}

#footer {
    padding: 1em;
    background-color: var(--primary-purple-color);
}

@supports (display: grid ) {
    #footer {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        align-items: end;
        padding: 1em;
        background-color: var(--primary-purple-color);
    }
}

#footer .grid-item-1 {
    grid-column: 2 / span 3;
    padding:  1em 3em;
    text-align: center;
}

#footer .grid-item-2 {
    grid-column: 1 / span 2;
    text-align: left;
    align-content: end;
}

#footer .grid-item-3 {
    grid-column: 3 / span 1;
    text-align: center;
    align-content: end;
}

#footer .grid-item-4 {
    grid-column: 4 / span 2;
    text-align: right;
    align-content: end;
}


/* IE FOOTER FIX */

.ie11-footer {
    display: block;
    position: relative;
    padding: 1em;
    background-color: var(--primary-purple-color);
}

.ie11-footer > .grid-item-1 {
    display: block;
    width: 70%;
    margin: 10px auto;
}

.ie11-footer > .grid-item-2 {
    display: inline-block;
    width: 35%;
    margin: 10px auto;
    text-align: left;
}

.ie11-footer > .grid-item-3 {
    display: inline-block;
    width: 25%;
    margin: 10px auto;
}

.ie11-footer > .grid-item-4 {
    display: inline-block;
    width: 35%;
    margin: 10px auto;
    text-align: right;
}

/* IE FOOTER FIX ENDS */


.data-type-table,
.list-type-table {
    margin: 0.5em 0;
    border-collapse: collapse;
    min-width: 500px;
    border: solid 1px var(--primary-grey-color);
}

.data-type-table th {
    padding: 15px 10px;
    text-align: center;
    font-weight: bold;
    background-color: var(--site-light-grey-color);
    border: solid 1px var(--primary-grey-color);
}

.data-type-table td {
    border: solid 1px var(--primary-grey-color);
    padding: 10px;
    text-align: center;
}

.data-type-table th.text-left,
.data-type-table td.text-left {text-align: left;}

.data-type-table.zebra-stripes tr:nth-child(odd) {background-color: var(--site-light-grey-color);}
.table.zebra-stripes tr:nth-child(even) {background-color: var(--site-light-grey-color);}

.list-type-table {text-align: left;}

.list-type-table.no-border {border: none;}

.list-type-table.no-border td {border-bottom: none;}

.list-type-table th {padding: 15px 10px;}

.list-type-table thead tr {
    padding: 15px 10px;
    font-size: 1.2em;
    font-weight: lighter!important;
    color: #585858;
}

.list-type-table td {
    border-bottom: solid 1px var(--primary-grey-color);
    padding: 15px 10px;
}

/* TERMS AND CONDITIONS TYPE TABLES */
.terms-type-table {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    border-collapse: collapse;
    min-width: 500px;
}

.terms-type-table td {padding: 5px 10px;}



/***** HTML ELEMENTS ENDS *************************************************************************************************************************************/


/***** COLUMNS AND ROWS STARTS ********************************************************************************************************************************/
/***** COLUMNS AND ROWS STARTS ********************************************************************************************************************************/


.column-row.no-border {
    border-top: none!important;
    padding-top: 0!important;
    margin-top: 0!important;
}

.column-row-2 .column-row-item {
    width: 49.5%;
    padding: 25px;
    margin: 0!important;
}

.column-row-3 .column-row-item {
    width: 33%;
    padding: 15px;
    margin: 0!important;
}

.column-row-4 .column-row-item {
    width: 24%;
    padding: 15px;
    margin: 0!important;
}

.column-row-6 .column-row-item {
    width: 16%;
    padding: 15px;
    margin: 0!important;
}



/* BELOW COLUMN ITEM STYLES TO BE REPLACED BY NEW GRID COLUMN ITEM STYLES (CURRENTLY IN TESTING AREA - .grid-item) */

.column-row-item {
    /*margin: 0.5em 0.8em;*/
    display: inline-block;
    vertical-align: top;
}

.column-row-item:first-child {margin-left: 0;}

.column-row-item img {width: 100%;}

.column-row-item > .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    min-width: 100%;
}

.column-row-item .avatar {width: 100%;}
.column-row-item .avatar img {width: 100px;}

.column-row-item > div {padding: 0.5em 0.5em 0.5em 0;}

.column-row-item h3 {
    font-size: 1.1em;
    margin-bottom: 0.3em;
}

/***** COLUMNS AND ROWS ENDS **********************************************************************************************************************************/


/***** TEXT AND LINKS STARTS **********************************************************************************************************************************/

/*** FONT SIZES ***/
h1, h2, h3, h4, h5, h6 {
    font-weight: lighter;
    color: var(--site-dark-grey-color);
    line-height: 1.3em;
    margin-bottom: 1rem;
}

section > h1 {font-size: 2em;} /* USED FOR BREWING DATABASES WHERE H1 SITS WITHIN SECTION NOT MAIN */

p, li {line-height: 1.4em;}

.smaller-body {font-size: 85%;} /*specifically for brewing databases to be removed when font issues resolved VJJ*/

.small {font-size: .9em;/*font-size: 1.1vw;*/}

.small8-5 {font-size: .85em;/*font-size: 1.1vw;*/}

.smaller {font-size: .8em; /*font-size: .9vw;*/}

.smallest {font-size: .7em; /*font-size: .9vw;*/}

.tiny {font-size: .6em; /*font-size: .9vw;*/}

.large {font-size: 1.1em;}

.larger {font-size: 1.2em;}

.largest {font-size: 1.5em;}

.large-plus {font-size: 3.5em;}

.bigger {font-size: 1.7em;}

.smallh1 {font-size: 1.5em;}

.font1-3 {font-size: 1.3em;}

.font2-3 {font-size: 2.3em;} /* font size used for font awesome icons at 2x size */

.font2-8 {font-size: 2.8em;}

.sub-heading {margin-bottom: 0.3em;}

.sub-heading-notopmargin {margin-top: 0!important;}

h2.sub-heading {
    font-size: 1.4em;
    margin-top: 1.5em;
}

h2.sub-heading-large {
    font-size: 1.7em;
    margin-top: 1.5em;
}

h3.sub-heading {
    font-size: 1.2em;
    margin-top: 1.3em;
}

h4.sub-heading {
    font-size: 1.2em;
    margin-top: 1.1em;
}

h5.sub-heading {
    font-size: 1em;
    margin-top: 1em;
}

.caption {
    font-weight: bold;
    margin-top: 0.3em;
    margin-bottom: 1.8em;
    padding: 0.2em 0 0.2em 0.6em;
    border-left: solid 3px #909090;
}

blockquote {
    margin-top: 2em;
    margin-bottom: 2em;
    margin-left: 0;
    padding-left: 0.6em;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    border-left: solid 3px #909090;
    line-height: 1.4em;
    color: #909090;
}

blockquote span:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f10d";
    text-decoration: none;
    font-weight: bold;
    font-size: 3.8em;
    display: inline;
    line-height: 0.8em;
    margin-right: 10px;
    float: left;
}

blockquote p {
    display: inline;
    vertical-align: top;
    font-size: 1.4em;
    line-height: 1.2em;
    color: #909090;
}

blockquote.em {
    margin: 1em;
    padding: 0;
    line-height: 1.2em;
    color: #909090;
    font-style: italic;
    border-left: none;
}

.reference {
    font-size: small;
    font-style: italic;
}


/*** FONT STYLES ***/
.text-bold {font-weight: 600;}

.font-normal {font-weight: normal}

.italic {font-style: italic;}

.text-left {text-align: left;}

.text-left-mob-center {text-align: left;} /* aligns center on mobile */

.text-right-mob-center {text-align: right;} /* aligns center on mobile */

.lowercase {text-transform: lowercase;}

.capitalize {text-transform: capitalize;}

.line-through {text-decoration: line-through;}

.line-height-3 {line-height: 0.3em}  /* to replace inline style line-height: 5px on Hungary menu */

.line-height-6 {line-height: 0.6em}          /* to replace inline style line-height: 10px on Hungary menu */

.line-height-1-1 {line-height: 1.1em}          /* to replace inline style line-height: 10px on Hungary menu */

.vert-text-top {vertical-align: text-top;}

.vert-top {vertical-align: top;}

.vert-middle {vertical-align: middle;}

.vert-bottom {vertical-align: bottom;}

.vert-baseline {vertical-align: baseline;}

.sub {vertical-align: sub;}

.super {vertical-align: super;}

.word-break {word-break: break-all;}

.justify-end  {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
}

.justify-end-italics {
    display: block; /* .justify-end class as html tags (<em>) etc were breaking display: flex. margin-left: 98px; adn display: block worked for training.php*/
    flex-wrap: wrap;
    align-content: flex-end;
    margin-left: 98px;
}


/*** FONT COLOURS ***/
.text-blue { color: #336699;}
.text-blueA {color: #004689;} /* Aldi blue */
.text-greenM {color: #BDD752;} /* Marks & Spencer green */
.text-greenW {color: #7d9946;} /* Waitrose green */
.text-green {color: var(--message-success-color);}
.text-redW {color: #c0002b;} /* Waitrose red */
.text-grey {color: var(--site-dark-grey-color);}
.text-white { color: var(--site-white-color);}
.text-purple {color: var(--primary-purple-color);} /*527*/
.text-dark-blue {color: var(--primary-blue-color);}
.text-teal {color: #2dbbab;}
.text-orange {color: var(--message-warning-color);}
.text-black {color: var(--site-black-color);}
.text-mid-blue { color: #507CBE; } /* Facebook */
.text-skyblue {color: #63CDF1; } /* Twitter */
.text-red {color: #F16261;}  /* Google+ */
.text-blue-grey {color: #90CADD;} /* LinkedIn */
.text-fade {color: #A8A8A8} /* fading out paragraph**/
.text-fade-light {color: #C0C0C0} /* fading out paragraph**/
.text-fade-lighter {color: #E0E0E0} /* fading out paragraph**/
.text-light-grey {color: #989898;}
.text-sea-green {color: #348017;} /* specifically added for HACCP level 4 M&S page */
.text-jade {color: #008b8b;} /* specifically added for HACCP level 4 M&S page */
.text-dark-slate {color: #483d8d;} /* specifically added for HACCP level 4 M&S page */
.text-dark-magenta {color: #8b008b;} /* specifically added for HACCP level 4 M&S page */
.text-dark-pink {color: #ff1493;} /* specifically added for HACCP level 4 M&S page */
.text-dark-orange {color: #ff8c00;} /* specifically added for HACCP level 4 M&S page */
.text-orange {color: #ffa500;} /* specifically added for HACCP level 4 M&S page */
.text-gold {color: #fcc423;} /* specifically added for HACCP level 4 M&S page */
.text-light-lilac {color: #e6ccff;} /* specifically added for HACCP level 4 M&S page */
.text-warning {color: var(--message-alert-color);}  /* For warning messages */
.text-caution {color: var(--message-warning-color);}  /* For caution messages */
.text-success {color: var(--message-success-color);}  /* For success messages */
.text-light-green {color: #A7C190;}
.text-dark-green {color: #40725A;}

/*** LINKS ***/
a:link, a:active, a:visited {
    text-decoration: none;
    color: var(--primary-purple-color);
}

a:hover {color: var(--primary-grey-color);}

:hover.info-hover {color: var(--message-success-color);}

a.small-white:link, a.small-white:active, a.small-white:visited {
    font-size: .9em;
    color: #fff;
    text-decoration: none;
}

a.small-white:hover {color: #6699cc;}

.footer-link a:link, .footer-link a:active, .footer-link a:visited {color: #fff;}

.footer-link a:hover {color: #6699cc;}  /* @ToDo CHECK USAGES */

a.purple:hover {} /*specifically for training.php for hovers that Jo Rathkey requested*/

a.white-lilac:link, a.white-lilac:active, a.white-lilac:visited  {color: #fff;}
a.white-lilac:hover {color: #e6ccff;}

a.green-purple:link, a.green-purple:active, a.green-purple:visited  {color: var(--message-success-color);}
a.green-purple:hover {color: var(--primary-purple-color);}

.opaqueHover:hover {opacity: 0.5;}

.text-purple-hover {color: var(--primary-purple-color);}
.text-purple-hover:hover {color: var(--primary-grey-color);}

::selection {
    color:var(--site-white-color);
    background-color:var(--primary-purple-color);
}

/*** LISTS ***/
.list-style-none {list-style: none;}
.list-style-circle {list-style-type: circle;}
.list-style-square {list-style-type: square;}

.hover-shift-right {
    margin-right: 0;
    transition: margin-right 2s;
    -webkit-transition: margin-right 2s;}

.hover-shift-right:hover {
    margin-right: 60px;

}

.nth-row-change:nth-child(even) {background-color: var(--site-light-grey-color);}

/***** TEXT AND LINKS ENDS ************************************************************************************************************************************/


/***** BACKGROUNDS STARTS *************************************************************************************************************************************/

/*** BACKGROUND COLOURS ***/
.primary-purple-background {background-color: var(--primary-purple-color);}
.primary-grey-background {background-color: var(--primary-grey-color);}
.primary-blue-background {background-color: var(--primary-blue-color);}

.site-black-background {background-color: var(--site-black-color);}
.site-dark-grey-background {background-color: var(--site-dark-grey-color);}
.site-light-grey-background {background-color: var(--site-light-grey-color);}
.site-lighter-grey-background {background-color: var(--site-lighter-grey-color);}
.site-white-background {background-color: var(--site-white-color);}

.blue-background {background-color: #0000cc;}
.purple-background {background-color: var(--primary-purple-color);} /*527*/
.teal-background {background-color: #2dbbab;}
.mid-grey-background {background-color: #c0c0c0;}
.grey-background {background-color: #cccccc;}
.light-grey-background {background-color: #F6F6F6;}
.soft-grey-background {background-color: #e6e6e6;}
.light-lilac-background {background-color: #e6ccff;}
.white-background {background-color: var(--site-white-color);}
.mfr-background {background-color: #f7f4fd;}
.cyan-background {background-color: #339999;}
.orange-background {background-color: var(--message-warning-color);}
.light-grey-transparent-background {background-color: rgba(222, 222, 222, 0.2);}
.transparent-background {background: transparent;}
.dark-blue-background {background-color: var(--primary-blue-color);}
.mid-blue-background {background-color: #004689;}
.red-background {background-color: var(--message-alert-color);}
.light-blue-bg {background-color: #8ED5F7;}
.dark-blue-bg {background-color: #6EB4D6;}
.mint {background-color: #98fb98;} /* specifically added for HACCP level 4 M&S page */
.pale-green-background {background-color: #a2cd88;} /* specifically added for HACCP level 4 M&S page */
.pale-blue {background-color: #87ceeb;} /* specifically added for HACCP level 4 M&S page */
.pale-mauve {background-color: #dda0dd;} /* specifically added for HACCP level 4 M&S page */
.pale-pink {background-color: #ffc0cb;} /* specifically added for HACCP level 4 M&S page */
.pale-orange-background {background-color: #ffdc9e;}
.pale-yellow {background-color: #f0e68c;} /* specifically added for HACCP level 4 M&S page */
.pale-red-background {background-color: #f69898;}
.light-green-background {background-color: #A7C190;}
.green-background {background-color: var(--message-success-color);}
.dark-green-background {background-color: #40725A;}
.dark-green-background-gradient-20 {background-color: rgba(64, 114, 90, 0.2);}
.dark-green-background-gradient-25 {background-color: rgba(64, 114, 90, 0.25);}
.dark-green-background-gradient-30 {background-color: rgba(64, 114, 90, 0.3);}
.dark-green-background-gradient-40 {background-color: rgba(64, 114, 90, 0.4);}
.dark-green-background-gradient-50 {background-color: rgba(64, 114, 90, 0.5);}
.dark-green-background-gradient-60 {background-color: rgba(64, 114, 90, 0.6);}
.dark-green-background-gradient-70 {background-color: rgba(64, 114, 90, 0.7);}
.dark-green-background-gradient-75 {background-color: rgba(64, 114, 90, 0.75);}
.dark-green-background-gradient-80 {background-color: rgba(64, 114, 90, 0.8);}
.dark-green-background-gradient-90 {background-color: rgba(64, 114, 90, 0.9);}

.blur-background {
    position: relative;
}

.blur-background:after {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 32px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(5px);
    content: " ";
    z-index: 5;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
}


/***** BACKGROUNDS ENDS ***************************************************************************************************************************************/


/***** MARGINS, PADDINGS AND BOARDERS STARTS ******************************************************************************************************************/

/*** MARGINS ***/
.margin-none {margin: 0 !important;}
.margin-2 {margin: .2em;}
.margin-3 {margin: .3em;}
.margin-5 {margin: .5em;}
.margin-10 {margin: 1em;}
/* MINUS TOP */
.margin-top-minus-80 {margin-top: -8em;}
.margin-top-minus-60 {margin-top: -6em;}
.margin-top-minus-33 {margin-top: -3.3em;}
.margin-top-minus-35 {margin-top: -3.5em;}
.margin-top-minus-30 {margin-top: -3em;}
.margin-top-minus-25 {margin-top: -2.5em;}
.margin-top-minus-20 {margin-top: -2em;}
.margin-top-minus-15 {margin-top: -1.5em;}
.margin-top-minus-10 {margin-top: -1em;}
.margin-top-minus-8 {margin-top: -.8em;}
.margin-top-minus-5 {margin-top: -.5em;}
.margin-top-minus-2-5 {margin-top: -.25em;}
/* TOP */
.margin-top { margin-top: 0;}
.margin-2-top {margin-top: .2em;}
.margin-3-top {margin-top: .3em;}
.margin-4-top {margin-top: .4em;}
.margin-5-top {margin-top: .5em;}
.margin-8-top {margin-top: .8em;}
.margin-10-top {margin-top: 1em;}
.margin-15-top {margin-top: 1.5em;}
.margin-20-top {margin-top: 2em;}
.margin-25-top {margin-top: 2.5em;}
.margin-30-top {margin-top: 3em;}
.margin-35-top {margin-top: 3.5em;}
.margin-40-top {margin-top: 4em;}
.margin-60-top {margin-top: 6em;}
.margin-80-top {margin-top: 8em;}
/* RIGHT */
.margin-0-right {margin-right: 0;}
.margin-2-right {margin-right: .2em;}
.margin-3-right {margin-right: .3em;}
.margin-4-right {margin-right: .4em;}
.margin-5-right {margin-right: .5em;}
.margin-8-right {margin-right: .8em;}
.margin-10-right {margin-right: 1em;}
.margin-16-right {margin-right: 1.6em;}
.margin-20-right {margin-right: 2em;}
.margin-30-right {margin-right: 3em;}
.margin-40-right {margin-right: 4em;}
.margin-50-right {margin-right: 5em;}
.margin-60-right {margin-right: 6em;}
.margin-80-right {margin-right: 8em;}
/* MINUS BOTTOM */
.margin-bottom-minus-10 {margin-bottom: -1em;}
.margin-bottom-minus-20 {margin-bottom: -2em;}
.margin-bottom-minus-25 {margin-bottom: -2.5em;}
/* BOTTOM */
.margin-0-bottom {margin-bottom: 0;}
.margin-3-bottom {margin-bottom: .3em;}
.margin-4-bottom {margin-bottom: .4em;}
.margin-5-bottom {margin-bottom: .5em;}
.margin-6-bottom {margin-bottom: .6em;}
.margin-8-bottom {margin-bottom: .8em;}
.margin-10-bottom {margin-bottom: 1em;}
.margin-12-bottom {margin-bottom: 1.2em;}
.margin-15-bottom {margin-bottom: 1.5em;}
.margin-19-bottom {margin-bottom: 1.9em;}
.margin-20-bottom {margin-bottom: 2em;}
.margin-25-bottom {margin-bottom: 2.5em;}
.margin-30-bottom {margin-bottom: 3em;}
.margin-40-bottom {margin-bottom: 4em;}
.margin-60-bottom {margin-bottom: 6em;}
.margin-80-bottom {margin-bottom: 8em;}
/* MINUS LEFT */
.margin-left-minus-10 {margin-left: -1em;}
.margin-left-minus-20 {margin-left: -2em;}
/* LEFT */
.margin-0-left {margin-left: 0;}
.margin-2-left {margin-left: .2em;}
.margin-3-left {margin-left: .3em;}
.margin-4-left {margin-left: .4em;}
.margin-5-left {margin-left: .5em;}
.margin-8-left {margin-left: .75em;}
.margin-10-left {margin-left: 1em;}
.margin-15-left {margin-left: 1.5em;}
.margin-16-left {margin-left: 1.6em;}
.margin-20-left {margin-left: 2em;}
.margin-30-left {margin-left: 3em;}
.margin-40-left {margin-left: 4em;}
.margin-50-left {margin-left: 5em;}
.margin-60-left {margin-left: 6em;}
.margin-70-left {margin-left: 7em;}
.margin-80-left {margin-left: 8em;}

.margin-none {margin: 0;}
.margin-xxsmall {margin: 0.25rem;}
.margin-xsmall {margin: 0.5rem;}
.margin-small {margin: 1rem;}
.margin-medium {margin: 2rem;}
.margin-large {margin: 3rem;}
.margin-xlarge {margin: 4rem;}
.margin-xxlarge {margin: 5rem;}

.margin-top-none {margin-top: 0;}
.margin-top-xxsmall {margin-top: 0.25rem;}
.margin-top-xsmall {margin-top: 0.5rem;}
.margin-top-small {margin-top: 1rem;}
.margin-top-medium {margin-top: 2rem;}
.margin-top-large {margin-top: 3rem;}
.margin-top-xlarge {margin-top: 4rem;}
.margin-top-xxlarge {margin-top: 5rem;}

.margin-right-none {margin-right: 0;}
.margin-right-xxsmall {margin-right: 0.25rem;}
.margin-right-xsmall {margin-right: 0.5rem;}
.margin-right-small {margin-right: 1rem;}
.margin-right-medium {margin-right: 2rem;}
.margin-right-large {margin-right: 3rem;}
.margin-right-xlarge {margin-right: 4rem;}
.margin-right-xxlarge {margin-right: 5rem;}

.margin-bottom-none {margin-bottom: 0;}
.margin-bottom-xxsmall {margin-bottom: 0.25rem;}
.margin-bottom-xsmall {margin-bottom: 0.5rem;}
.margin-bottom-small {margin-bottom: 1rem;}
.margin-bottom-medium {margin-bottom: 2rem;}
.margin-bottom-large {margin-bottom: 3rem;}
.margin-bottom-xlarge {margin-bottom: 4rem;}
.margin-bottom-xxlarge {margin-bottom: 5rem;}

.margin-left-none {margin-left: 0;}
.margin-left-xxsmall {margin-left: 0.25rem;}
.margin-left-xsmall {margin-left: 0.5rem;}
.margin-left-small {margin-left: 1rem;}
.margin-left-medium {margin-left: 2rem;}
.margin-left-large {margin-left: 3rem;}
.margin-left-xlarge {margin-left: 4rem;}
.margin-left-xxlarge {margin-left: 5rem;}


/*** PADDINGS ***/
.pad-0 {padding: 0;}
.pad-1 {padding: .1em;}
.pad-2 {padding: .2em;}
.pad-3 {padding: .3em;}
.pad-5 {padding: .5em;}
.pad-6 {padding: .6em;}
.pad-7 {padding: .7em;}
.pad-8 {padding: .8em;}
.pad-9 {padding: .9em;}
.pad-10 {padding: 1em;}
.pad-10-important {padding: 1em!important;}
.pad-11 {padding: 1.1em;}
.pad-12 {padding: 1.2em;}
.pad-13 {padding: 1.3em;}
.pad-14 {padding: 1.4em;}
.pad-15 {padding: 1.5em;}
.pad-20 {padding: 2em;}
/* TOP */
.pad-1-top {padding-top: .1em;}
.pad-2-top {padding-top: .2em;}
.pad-3-top {padding-top: .3em;}
.pad-5-top {padding-top: .5em;}
.pad-6-top {padding-top: .6em;}
.pad-10-top {padding-top: 1em;}
.pad-15-top {padding-top: 1.5em;}
.pad-16-top {padding-top: 1.6em;}
.pad-17-top {padding-top: 1.7em;}
.pad-20-top {padding-top: 2em;}
.pad-25-top {padding-top: 2.5em;}
.pad-30-top {padding-top: 3em;}
/* RIGHT */
.pad-1-right {padding-right: .1em;}
.pad-3-right {padding-right: .3em;}
.pad-5-right {padding-right: .5em;}
.pad-6-right {padding-right: .6em;}
.pad-7-right {padding-right: .7em;}
.pad-10-right {padding-right: 1em;}
.pad-15-right {padding-right: 1.5em;}
.pad-20-right {padding-right: 2em;}
.pad-25-right {padding-right: 2.5em;}
.pad-30-right {padding-right: 3em;}
.pad-35-right {padding-right: 3.5em;}
.pad-40-right {padding-right: 4em;}
.pad-50-right {padding-right: 5em;}
.pad-60-right {padding-right: 6em;}
/* BOTTOM */
.pad-1-bottom {padding-bottom: .1em;}
.pad-2-bottom {padding-bottom: .2em;}
.pad-3-bottom {padding-bottom: .3em;}
.pad-5-bottom {padding-bottom: .5em;}
.pad-6-bottom {padding-bottom: .6em;}
.pad-7-bottom {padding-bottom: .7em;}
.pad-10-bottom {padding-bottom: 1em;}
.pad-15-bottom {padding-bottom: 1.5em;}
.pad-20-bottom {padding-bottom: 2em;}
.pad-30-bottom {padding-bottom: 3em;}
/* LEFT */
.pad-1-left {padding-left: .1em;}
.pad-3-left {padding-left: .3em;}
.pad-4-left {padding-left: .4em;}
.pad-5-left {padding-left: .5em;}
.pad-6-left {padding-left: .6em;}
.pad-7-left {padding-left: .7em;}
.pad-8-left {padding-left: .8em;}
.pad-9-left {padding-left: .9em;}
.pad-10-left {padding-left: 1em;}
.pad-15-left {padding-left: 1.5em;}
.pad-20-left {padding-left: 2em;}
.pad-25-left {padding-left: 2.5em;}
.pad-30-left {padding-left: 3em;}
.pad-35-left {padding-left: 3.5em;}
.pad-40-left {padding-left: 4em;}
.pad-45-left {padding-left: 4.5em;}
.pad-50-left {padding-left: 5em;}
.pad-60-left {padding-left: 6em;}
/* PADDING # MOBILE NONE */
.pad-20-right-mob-10 {padding-right: 2em;}
.pad-20-left-mob-10 {padding-left: 2em;}
.margin-30-left-mob-0 {margin-left: 3em;}
.margin-40-left-mob-0 {margin-left: 4em;}

.padding-none {padding: 0;}
.padding-xxsmall {padding: 0.25rem;}
.padding-xsmall {padding: 0.5rem;}
.padding-small {padding: 1rem;}
.padding-medium {padding: 2rem;}
.padding-large {padding: 3rem;}
.padding-xlarge {padding: 4rem;}
.padding-xxlarge {padding: 5rem;}

.padding-top-none {padding-top: 0;}
.padding-top-xxsmall {padding-top: 0.25rem;}
.padding-top-xsmall {padding-top: 0.5rem;}
.padding-top-small {padding-top: 1rem;}
.padding-top-medium {padding-top: 2rem;}
.padding-top-large {padding-top: 3rem;}
.padding-top-xlarge {padding-top: 4rem;}
.padding-top-xxlarge {padding-top: 5rem;}

.padding-right-none {padding-right: 0;}
.padding-right-xxsmall {padding-right: 0.25rem;}
.padding-right-xsmall {padding-right: 0.5rem;}
.padding-right-small {padding-right: 1rem;}
.padding-right-medium {padding-right: 2rem;}
.padding-right-large {padding-right: 3rem;}
.padding-right-xlarge {padding-right: 4rem;}
.padding-right-xxlarge {padding-right: 5rem;}

.padding-bottom-none {padding-bottom: 0;}
.padding-bottom-xxsmall {padding-bottom: 0.25rem;}
.padding-bottom-xsmall {padding-bottom: 0.5rem;}
.padding-bottom-small {padding-bottom: 1rem;}
.padding-bottom-medium {padding-bottom: 2rem;}
.padding-bottom-large {padding-bottom: 3rem;}
.padding-bottom-xlarge {padding-bottom: 4rem;}
.padding-bottom-xxlarge {padding-bottom: 5rem;}

.padding-left-none {padding-left: 0;}
.padding-left-xxsmall {padding-left: 0.25rem;}
.padding-left-xsmall {padding-left: 0.5rem;}
.padding-left-small {padding-left: 1rem;}
.padding-left-medium {padding-left: 2rem;}
.padding-left-large {padding-left: 3rem;}
.padding-left-xlarge {padding-left: 4rem;}
.padding-left-xxlarge {padding-left: 5rem;}



/* BOARDERS */
.border {border: solid 1px #cccccc;}
.border-top {border-top: solid 1px #cccccc;}
.border-right {border-right: solid 1px #CCCCCC;}
.border-bottom {border-bottom: solid 1px #CCCCCC;}
.border-left {border-left: solid 1px #CCCCCC;}

.border-light {border: solid 1px var(--site-light-grey-color);}
.border-dashed {border: dashed 2px #cccccc;}
.border-white {border: solid 2px var(--site-white-color);}
.border-purple {border: solid 1px var(--primary-purple-color);}
.border-dark-blue {border: solid 1px var(--primary-blue-color);}
.border-red {border: solid 1px var(--message-alert-color);}
.border-teal {border: solid 1px #2dbbab;}
.border-green {border: solid 1px var(--message-success-color);}
.border-bottom-green {border-bottom: solid 1px var(--message-success-color);}
.border-orange {border: solid 1px var(--message-warning-color);}
.border-top-purple {border-top: solid 1px var(--primary-purple-color);}
.border-right-purple {border-right: solid 1px var(--primary-purple-color);}
.border-bottom-purple {border-bottom: solid 1px var(--primary-purple-color);}
.border-left-purple {border-left: solid 1px var(--primary-purple-color);}
.border-bottom-white {border-bottom: solid 4px var(--site-white-color);}
.border-left-white {border-left: solid 2px var(--site-white-color);}
.border-none {border: none;}
.border-thick {border-width: 4px;}
.border-radius-4 {border-radius: 4px;}
.border-circle {border-radius: 50%;}

.icon-border {
    border: solid 1px var(--primary-purple-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    left: 0;
    top: 50%;
    text-align: center;
    line-height: 40px;
}

a:hover .icon-border {border: solid 1px #d3d3d3;}

/***** MARGINS, PADDINGS AND BOARDERS ENDS ********************************************************************************************************************/


/***** IMAGES STARTS ******************************************************************************************************************************************/

img {
    max-width: 100%;
    border: 0;
}

.img-full-height {min-height: inherit;}

.grid-item img {width: 100%;}
.grid-item img.not-full-width {width: auto!important;}

.grid-item .captcha1 {
    width: inherit;
    vertical-align: middle;}

.grid-item:hover a img {opacity: 0.8;}

img.twenty {max-width: 20%;}
img.twenty-five {max-width: 25%;}
img.thirty {max-width: 30%;}
img.thirty-five {max-width: 35%;}
img.forty {max-width: 40%;}
img.fifty {max-width: 50%;}
img.seventy {max-width: 70%;}

.img-flip {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.img-object-contain {object-fit: contain;}
.img-object-cover {object-fit: cover;}
.img-object-fill {object-fit: fill;}

.landing-main-img {
    width: 100%;
    max-height: 55vh;
    object-fit: cover;
}

.content-image {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
}

/***** IMAGES ENDS ********************************************************************************************************************************************/


/***** FLOATS AND ALIGNMENTS STARTS ***************************************************************************************************************************/

.right {float: right;}

.left {float: left;}

.text-left {text-align: left;}

.text-right {text-align: right;}

.centre, .center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.block-center, .block-centre {
    margin-left: auto;
    margin-right: auto;
}

.relative {position: relative;}
.absolute {position: absolute;}

.top {top: 0;}
.right {right: 0;}
.bottom {bottom: 0;}
.left {left: 0;}

/***** FLOATS AND ALIGNMENTS ENDS *****************************************************************************************************************************/


/***** BUTTONS AND CALL TO ACTIONS STARTS *********************************************************************************************************************/

.register-button-filled,
.action-button-filled,
.action-teal-button-filled,
.alert-teal-button-filled,
.delete-button-filled,
.register-button-ghost,
.action-button-ghost,
.action-teal-button-ghost,
.alert-button-ghost,
.disabled-button {
    display: block;
    min-width: 64px;
}

.disabled-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-block;
    padding: 8px 16px;
    font-size: 1.1em;
    text-align: center;
    color: var(--site-white-color);
    background-color: #b6b6b6;
    border: solid 1px #6d6d6d;
}

.disabled-button:hover {cursor: not-allowed;}

/*** FILLED BUTTONS ***/
.action-button-filled > a,
.action-button-filled > button,
.action-button-filled > input[type=submit],
.action-button-filled.modal-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-block;
    padding: 8px 16px;
    font-size: 1.1em;
    text-align: center;
    color: var(--site-white-color);
    background-color: var(--primary-purple-color);
    border: solid 1px var(--primary-purple-color);
}

.action-button-filled a:hover,
.action-button-filled a:focus,
.action-button-filled button:hover,
.action-button-filled button:focus,
.action-button-filled input[type=submit]:hover,
.action-button-filled input[type=submit]:focus {
    color: var(--primary-purple-color);
    background-color: var(--site-white-color);
    cursor: pointer;
}

.action-teal-button-filled > a,
.action-teal-button-filled > button,
.action-teal-button-filled > input[type=submit] {
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-block;
    padding: 8px 16px;
    font-size: 1.1em;
    text-align: center;
    color: var(--site-white-color);
    background-color: #2dbbab;
    border: solid 1px #2dbbab;
}

.action-teal-button-filled a:hover,
.action-teal-button-filled a:focus,
.action-teal-button-filled button:hover,
.action-teal-button-filled button:focus,
.action-teal-button-filled input[type=submit]:focus,
.action-teal-button-filled input[type=submit]:hover {
    color: #2dbbab;
    background-color: var(--site-white-color);
    cursor: pointer;
}

.alert-button-filled > a,
.alert-button-filled > button,
.alert-button-filled > input[type=submit] {
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-block;
    padding: 8px 16px;
    font-size: 1.1em;
    text-align: center;
    color: var(--site-white-color);
    background-color: var(--message-alert-color);
    border: solid 1px var(--message-alert-color);
}

.alert-button-filled a:hover,
.alert-button-filled button:hover,
.alert-button-filled input[type=submit]:hover {
    color: var(--message-alert-color);
    background-color: var(--site-white-color);
    cursor: pointer;
}

.register-button-filled > a,
.register-button-filled > button,
.register-button-filled > input[type=submit] {
    -webkit-appearance: none;
    display: inline-block;
    padding: 8px 16px;
    font-size: 1.1em;
    text-align: center;
    color: var(--site-white-color);
    background-color: var(--message-success-color);
    border: solid 1px var(--message-success-color);
}

.register-button-filled a:hover,
.register-button-filled a:focus,
.register-button-filled button:hover,
.register-button-filled button:focus,
.register-button-filled input[type=submit]:focus,
.register-button-filled input[type=submit]:hover {
    color: var(--message-success-color);
    background-color: var(--site-white-color);
    cursor: pointer;
}

.register-button-filled > select:focus,
.register-button-filled > input:active,
.register-button-filled > input:visited,
.register-button-ghost > select:focus,
.register-button-ghost > input:active,
.register-button-ghost > input:visited {
    outline-color: var(--message-success-color);
}

.register-button-filled > input[type=submit],
.action-button-filled > input[type=submit] {min-width: 64px;}

/*** GHOST BUTTONS ***/
.action-button-ghost > a,
.action-button-ghost > button,
.action-button-ghost > input[type=submit],
.action-button-ghost.modal-button,
.local-search-dropdown .ui-accordion-content .action-button-ghost a {
    -webkit-appearance: none;
    display: inline-block;
    padding: 8px 16px;
    font-size: 1.1em;
    text-align: center;
    color: var(--primary-purple-color);
    background-color: var(--site-white-color);
    border: solid 1px var(--primary-purple-color);
}

.action-button-ghost a:hover,
.action-button-ghost button:hover,
.action-button-ghost input[type=submit]:hover,
.action-button-ghost.modal-button:hover,
.local-search-dropdown .ui-accordion-content .action-button-ghost a:hover {
    color: var(--site-white-color);
    background-color: var(--primary-purple-color);
    cursor: pointer;
}

.action-teal-button-ghost > a,
.action-teal-button-ghost > button,
.action-teal-button-ghost > input[type=submit] {
    -webkit-appearance: none;
    display: inline-block;
    padding: 8px 16px;
    font-size: 1.1em;
    text-align: center;
    color: #2dbbab;
    background-color: var(--site-white-color);
    border: solid 1px #2dbbab;
}

.action-teal-button-ghost a:hover,
.action-teal-button-ghost button:hover,
.action-teal-button-ghost input[type=submit]:hover {
    color: var(--site-white-color);
    background-color: #2dbbab;
    cursor: pointer;
}

.local-search-dropdown .ui-accordion-content .action-button-ghost a {padding: 8px 16px;!important;} /* ADDED DUE TO LOCAL-SEARCH-DROPDOWN REMOVING PADDING FROM BUTTON */

.alert-button-ghost > a,
.alert-button-ghost > button,
.alert-button-ghost > input[type=submit] {
    -webkit-appearance: none;
    display: inline-block;
    padding: 8px 16px;
    font-size: 1.1em;
    text-align: center;
    color: var(--message-alert-color);
    background-color: var(--site-white-color);
    border: solid 1px var(--message-alert-color);
}

.alert-button-ghost a:hover,
.alert-button-ghost button:hover,
.alert-button-ghost input[type=submit]:hover {
    color: var(--site-white-color);
    background-color: var(--message-alert-color);
    cursor: pointer;
}

.register-button-ghost > a,
.register-button-ghost > button,
.register-button-ghost > input[type=submit] {
    -webkit-appearance: none;
    display: inline-block;
    padding: 8px 16px;
    font-size: 1.1em;
    text-align: center;
    color: var(--message-success-color);
    background-color: var(--site-white-color);
    border: solid 1px var(--message-success-color);
}

.register-button-ghost a:hover,
.register-button-ghost button:hover,
.register-button-ghost input[type=submit]:hover {
    color: var(--site-white-color);
    background-color: var(--message-success-color);
    cursor: pointer;
}

.register-button-filled,
.action-button-filled,
.action-teal-button-filled,
.alert-teal-button-filled,
.delete-button-filled,
.register-button-ghost,
.action-button-ghost,
.action-teal-button-ghost,
.alert-button-ghost,
.disabled-button, + .small {
    font-size: 0.9em;
}

a.white-cta-button {
    -webkit-appearance: none;
    display: inline-block;
    padding: 8px 16px;
    font-size: 1.1em;
    text-align: center;
    color: var(--site-white-color)!important;
    border: solid 1px var(--site-white-color);
}

a.white-cta-button:hover {
    color: var(--primary-blue-color)!important;
    background-color: var(--site-white-color)!important;
    border: solid 1px var(--site-white-color);
}

a.campaign-homepage-title-button {
    -webkit-appearance: none;
    display: inline-block;
    padding: 8px 16px;
    font-size: 1.3em;
    text-align: center;
    color: var(--site-white-color)!important;
    border: solid 2px var(--site-white-color);
    backdrop-filter: blur(2px);
}

a.campaign-homepage-title-button:hover {
    color: var(--site-dark-grey-color)!important;
    background-color: var(--site-white-color)!important;
}

/*** DOWNLOAD, PRINT, SHARE RICHMEDIA BUTTONS ***/
.download-button,
.print-button,
.email-share-button {
    background: #a9a9a9;
    border-radius: 3px;
    font-size: 1.3em;
    color: var(--site-white-color)!important;
}

.download-button:hover,
.print-button:hover,
.email-share-button:hover {
    background: var(--site-white-color);
    border: solid 1px #a9a9a9;
    cursor: pointer;
    color: #a9a9a9!important;
}

/*** DELETE BUTTON ***/
.delete-button-filled a:before,
.delete-button-ghost a:before {
    content: "X";
}

.delete-button-filled > a,
.delete-button-filled > button,
.delete-button-filled > input[type=submit] {
    -webkit-appearance: none;
    display: inline-block;
    padding: 8px;
    color: var(--site-white-color);
    font-size: 1.1em;
    background-color: var(--message-alert-color);
    border: solid 1px var(--message-alert-color);
}

.delete-button-filled a:hover,
.delete-button-filled button,
.delete-button-filled input[type=submit]:hover {
    color: var(--message-alert-color);
    background-color: var(--site-white-color);
    cursor: pointer;
}

.delete-button-ghost > a,
.delete-button-ghost > button,
.delete-button-ghost > input[type=submit] {
    -webkit-appearance: none;
    display: inline-block;
    padding: 8px;
    color: var(--message-alert-color);
    font-size: 1.1em;
    background-color: var(--site-white-color);
    border: solid 1px var(--message-alert-color);
}

.delete-button-ghost a:hover,
.delete-button-ghost button,
.delete-button-ghost input[type=submit]:hover {
    color: var(--site-white-color);
    background-color: var(--message-alert-color);
    cursor: pointer;
}

/*** BACK TO TOP BUTTON ***/
#top-button {
    -webkit-appearance: none;
    display: none;
    position: fixed;
    scroll-behavior: smooth;
    bottom: 30px;
    right: 100px;
    z-index: 99;
    color: var(--primary-purple-color);
    cursor: pointer;
    font-size: 3em;
}

#top-button:hover {color: #b4b4b4;}

/*** CONTACT AN EXPERT BUTTON ***/
#contact-an-expert {
    display: none;
    scroll-behavior: smooth;
    position: fixed;
    bottom: 0;
    right: 10%;
    cursor: pointer;
    z-index: 10;
}

.contact-sticky-button {
    border: solid 1px var(--site-white-color);
    border-bottom: none;
    background-color: var(--primary-purple-color);
    padding: 8px 16px;
}

.contact-sticky-button h3 {
    font-size: 1.3em;
    text-align: center;
}

.contact-sticky-button:hover {
    border: solid 1px #f5f5f5;
    background: #f5f5f5;
}

.contact-sticky-button a {color: var(--site-white-color);}

.contact-sticky-button:hover a {color: var(--primary-purple-color);}

.discount-icon {
    color: var(--site-white-color);
    border: double 2px var(--site-white-color);
    box-shadow: 0 0 0 2px var(--primary-purple-color);
    background-color: var(--primary-purple-color);
    border-radius: 50%;
    height: 2.5rem;
    width: 2.5rem;
    padding: 9px 0 0 3.5px;
    font-weight: 700;
    font-size: 0.95em;
    text-align: left;
    cursor: default;
    -ms-transform: rotate(-25deg); /* IE 9 */
    -webkit-transform: rotate(-25deg); /* Safari 3-8 */
    transform: rotate(-25deg);
    transform-origin: center center;
}

.discount-icon-large {transform: scale(180%) rotate(-25deg);}

.discount-icon.discount-icon-grey {
    box-shadow: 0 0 0 2px var(--site-dark-grey-color);
    background-color: var(--site-dark-grey-color);
}

.discount-icon.discount-icon-dark-blue {
    border: double 2px var(--primary-blue-color);
    box-shadow: 0 0 0 2px var(--primary-blue-color);
}

.discount-icon.discount-icon-background-white {
    background-color: var(--site-white-color);
    box-shadow: none;
}

.discount-icon.discount-icon-dark-blue.discount-icon-background-white {
    border: solid 4px var(--primary-blue-color);
    box-shadow: none;
    font-size: 0.8em;
    padding: 7px 0 0 3.5px;
    color: var(--primary-blue-color);
}

span .discount-icon {
    border: double 1.5px var(--site-white-color);
    box-shadow: 0 0 0 1.5px var(--primary-purple-color);
    height: 30px;
    width: 30px;
    padding: 6.5px 0 0 2.5px;
    font-weight: 500;
    font-size: 0.7em;
}

span .discount-icon.discount-icon-grey {
    box-shadow: 0 0 0 1.5px var(--site-dark-grey-color);
}
/* TO BE REMOVED - JD CHECKED USAGES 08/20 - USAGES FOUND IN OLD STYLE WHITE PAPERS. TO BE CONVERTED IN 2020 */

.secondary-button {
    background-color: var(--primary-purple-color);
    padding: 0.6em 0.8em;
    color: var(--site-white-color);
    display: inline-block;
    cursor: pointer;
    border: 1px solid var(--primary-purple-color);
    /*border-radius: 4px;*/
    transition: all .4s;
    -webkit-transition: all .4s;
    opacity: 1;
    /*-moz-box-shadow: 0 1px 2px 1px #576354;
    -webkit-box-shadow: 0 1px 2px 1px #576354;
    box-shadow: 0 1px 2px 1px #576354;
    -webkit-appearance: none;*/
}

.secondary-button:hover {opacity: 0.5;}

/* TO BE REMOVED - JD CHECKED USAGES 08/20 - USAGES FOUND IN MULTIPLE AREAS. TO BE CONVERTED IN 2020 */
/**vjj add to create ways to contact us button**/
.button {
    background-color: var(--primary-purple-color);/* purple */
    border: none;
    /*border-radius: 8px;*/
    color: white;
    padding: .5em .5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button:hover {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}

.richmedia-info-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1em;
    margin: 2em 0;
}

.richmedia-tag-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .4em;
}

.richmedia-share-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .2em;
    min-width: 125px;
}

.richmedia-share-container a {
    width: 28px;
    height: 28px;
    position: relative;
}

.richmedia-share-container i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.richmedia-button {
    font-size: 0.9em;
    border: 1px solid var(--primary-purple-color);
    padding: .3em;
    background: none;
}

.richmedia-button-right {
    font-size: 1em;
    margin-right: 0;
    float: right;
    position: absolute;
    padding: .3em .4em;
    top: 1em;
    right: 1em;
    background-color: var(--site-white-color);
    opacity: 0.7;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.richmedia-button-hidden {
    border: none;
    box-shadow: none;
    cursor: default;
}

a.richmedia-button:hover {border: 1px solid #d3d3d3;}

/*JAD added for side wide contact us buttons *** USED IN TOP-MODAL.PHP AND CONTACT-MODAL.PHP *** */
.contact-button-dropdown {
    margin-top: 1.5em;
    float: none;
}

/**mca button which looks like plain text */
.text-button {
    background: none;
    border: none;
    padding:0;
    cursor: pointer;
}

.hidden-text, .button.hidden-text {display: none;}

/*** CALL TO ACTIONS ***/

.contact-us-cta {
    width: 100%;
    padding: 2em;
    margin: auto;
    background-color: #e6e6e6;
}

.contact-us-cta h4 {
    font-size: 1.3em;
    font-weight: bold;
    text-align: left;
    margin-right: .5em;
}

.contact-us-cta p {
    font-size: 1.1em;
    text-align: left;
}

.contact-us-cta a {
    margin: 0 .5em;
}

.contact-us-cta a:hover {
    color: var(--primary-purple-color);
    border-bottom: solid 1px var(--primary-purple-color);
}

#cta-contact {
    border-top: solid 1px var(--primary-purple-color);
    border-bottom: solid 1px var(--primary-purple-color);
    padding: 20px 0;
}

#cta-contact .grid-item-1 {
    grid-area: sentence;
    font-size: 1.4em;
    text-align: right;
}

#cta-contact .grid-item-2 {
    grid-area: email;
}

#cta-contact .grid-item-3 {
    grid-area: phone;
}

#cta-contact .grid-item-4 {
    grid-area: form;
}

#cta-contact .grid-container {
    display: grid;
    margin: 0 auto;
    grid-template-areas: 'sentence sentence email phone form';
    grid-gap: 10px;
    align-content: center;
    align-items: center;
}

#cta-contact .grid-container > div {
    padding: 10px 0;
    text-align: center;
}

#cta-contact-single {
    border-top: solid 1px var(--primary-purple-color);
    border-bottom: solid 1px var(--primary-purple-color);
    padding: 20px 0;
}

#cta-contact-single div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}


.cta-flex-height {
    display: flex;
}

.cta-flex-height > div {
    padding: 30px 20px;
    margin-right: 15px!important;}

.cta-flex-height > div:last-child {margin-right: 0!important;}


.rapid-turnaround-container {
    display: flex;
    margin: 2em 0;
    padding: 1em;
    border: solid 1px var(--primary-purple-color);
}

.rapid-turnaround-enquiry {max-width: 707px;}

.promo-cta {
    display: flex;
    align-items: center;
    margin: 3em 0;
}

.promo-cta-heading {
    max-width: 60%;
    padding-right: 2em;
}

.promo-cta-image {
    max-width: 40%;
}

/***** BUTTONS AND CALL TO ACTIONS ENDS ***********************************************************************************************************************/


/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************
***** GLOBAL STYLES ENDS **************************************************************************************************************************************/



/***** FEATURED ITEMS START ************************************************************************************************************************************
****************************************************************************************************************************************************************
/**************************************************************************************************************************************************************/


/***** FORMS START ********************************************************************************************************************************************/

/* TO SLOWLY BE OVERWRITTEN */
form .form-label {margin-top: 18px;}

form ::placeholder {font-size: 13px;}

form .form-input {
    height: 30px;
    background-color: var(--site-white-color);
    border: solid 1px #cccccc;
    margin-top: 8px;
    padding: 0 5px;
}

form .form-text-area {
    min-height: 100px;
    background-color: var(--site-white-color);
    border: solid 1px #cccccc;
    margin-top: 8px;
}

form .form-text-area-small {
    min-height: 50px;
    background-color: var(--site-white-color);
    border: solid 1px #cccccc;
    margin-top: 8px;
}

form .form-checkbox {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    background-color: var(--site-white-color);
    vertical-align: middle;
    border: solid 1px #cccccc;
    position: relative;
}

.checkbox-grey {background-color: #F6F6F6!important;}
.checkbox-white {background-color: var(--site-white-color)!important;}

form .form-checkbox:checked:after {
    content: '\2714';
    position: absolute;
    top: -1px;
    left: 3px;
}
/* TO SLOWLY BE OVERWRITTEN ENDS */

.form {
    background-color: #F6F6F6;
    text-align: left;
    padding: 20px;
    width: 100%;
    max-width: 1000px;
    margin: 2rem auto;
    display: block;
}

.form.smallform {
    width: 100%;
    max-width: 600px;
    padding: 2rem;
}

.form.fullwidth {
    min-width: 100%;
    padding: 2rem;
}

.form.form-left {
    margin-left: 0;
    margin-right: 0;
}



.form .form-label {
    margin-top: 18px;
    text-align: left;
    width: 100%;
    display: block;
}

.form ::placeholder {font-size: 13px;}

.form select:disabled {color: #CCCCCC;}

.form select {
    height: 30px;
    border: solid 1px #cccccc;
}

.form input[type="file"] {padding: 4px 5px 0 5px;}

.form input[type="submit"],
.form input[type="date"],
.form select {font-family: Open Sans, Arial, Helvetica, sans-serif;}

.form input[type="radio" i] {
    width: 1.2rem;
    height: 1.2rem;
    vertical-align: middle;
}

.form .form-input,
.form .form-input-inline,
.form .form-text-area,
.form .form-text-area-small {
    background-color: var(--site-white-color);
    border: solid 1px #cccccc;
    margin-top: 8px;
    padding: 0 5px;
    display: block;
}

.form .form-input {
    height: 30px;
    width: 100%;
}

.form .form-input-inline {
    height: 30px;
    display: inline;
}

.form .form-text-area,
.form .form-text-area-small {
    padding: 5px;
    font-size: 95%;
    font-weight: normal;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    width: 100%;
}

.form .form-text-area-small {min-height: 50px;}
.form .form-text-area {min-height: 100px;}

.form .form-checkbox {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    background-color: var(--site-white-color);
    vertical-align: middle;
    border: solid 1px #cccccc;
    position: relative;
}

.form-checkbox-center {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

.checkbox-grey {background-color: #F6F6F6!important;}

.form .form-checkbox:checked:after {
    content: '\2714';
    position: absolute;
    top: -1px;
    left: 3px;
}

.form-radio-likert-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
}

.form-radio-likert-label {
    width: 140px;
    align-self: center;
}

.form-radio-likert {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    justify-content: start;
    align-items: center;
}

input, textarea {-webkit-border-radius: 0;}

input:focus, textarea:focus, select:focus, option:focus {outline-color: #711a8d;}

.email-signup {
    position: relative;
    width: 100%;
}

.email-signup input[type="email"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 72%;
    padding: 8px 4px;
    background-color: var(--site-white-color);
    border: solid 1px #cccccc;
    font-size: 1.1em;
    height: 40px;
}

.email-signup button {
    position: absolute;
    right: 0;
    top: 0;
    width: 28%;
    padding: 8px 2px;
    color: var(--site-white-color);
    font-size: 1.1em;
    background-color: var(--message-success-color);
    cursor: pointer;
    border: solid 1px var(--message-success-color);
    height: 40px;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
}

.email-signup button:hover {
    background-color: var(--site-white-color);
    color: var(--message-success-color);
    border: solid 1px var(--message-success-color);
}

/*.email-signup {
    text-align: left;
    width: 100%;
    max-width: 800px;
    display: block;
}

.email-signup label {
    margin-top: 18px;
    text-align: left;
}

.email-signup input {
    background-color: var(--site-white-color);
    border: solid 1px #cccccc;
    margin-top: 8px;
    padding: 0 5px;
    width: inherit;
}*/

/*
* Layout for simple input forms - see forgot_password_3.php for example usage
* also for messages
*/

/* SORT!!!!!!!!!!!! */
label.normal {
    float: left;
    width: 30%;
}

label.tight {
    float: left;
    width: 20%;
}

.simple_form p {
    position: relative;
    padding: 0.25em;
}

.simple_form input {padding: 0.25em;}

.response_form input[readonly], .response_form textarea[readonly] {border: 0;}

/***** FORM ENDS **********************************************************************************************************************************************/


/***** SEARCH STARTS ******************************************************************************************************************************************/

@supports (display: grid ) {
    .topsearch {
        justify-content: end;
        display: grid;
        grid-template-columns: 40px 400px 0;
        margin-right: 10px;
    }
}

.topsearch-query {
    margin-top: 1px;
    margin-left: 10px;
    border: none;
    box-shadow: 0 1px #c8c8c8;
}

.topsearch input::placeholder {
    font-size: 1.2em;
    padding-left: 10px;
}

.topsearch button {
    border: none;
    background-color: transparent;
    margin-left: -30px;
}

.topsearch button i {
    font-size: 1.2em;
    background-color: transparent;
    color: var(--site-dark-grey-color);
}

.topsearch-submit {
    border: none;
    cursor: pointer;
    background-color: #fff;
}

#header.ie11-header .topsearch {
    display: block;
    margin-top: 3px;
    min-width: 100%;
    max-width: 300px;
}

#header.ie11-header .topsearch a {
    float: left;
}

#header.ie11-header .topsearch-query {
    display: inline-block;
    margin-top: 10px;
    padding-left: 10px;
    width:  75%;
    border: none;
    box-shadow: 0 1px #c8c8c8;
}

.searchbox {
    width: 80%;
    margin-top: 3%;
    border: 0;
}

.searchbox-query {
    width: 100%;
    float: left;
    height: 3em;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: .2em;
}

.searchbox-submit {
    float: right;
    margin-right: 2%;
    border: none;
    cursor: pointer;
    background-color: #fff;
    color: var(--primary-purple-color);
}



/***** SEARCH ENDS ********************************************************************************************************************************************/


/***** MESSAGES STARTS ****************************************************************************************************************************************/

/*** FORM AND ERROR CLASSES FROM DATABASE_STYLES.CSS - END - MCA 16 NOV 2016 ***/
@keyframes largeToNormal {
    from { transform: scale(3);}
    to  {transform: scale(1);} /* MCA animation - start 3 times normal size and shrink to normal size  */
}

.addToBasket_message {
    color: var(--message-success-color);
    animation: largeToNormal 1s;
    text-align: right; /* so that the message appears under the shopping basket on the page */
}

label.error, .error_message {
    padding: 0;
    color: var(--message-alert-color);
}

label.error:before, .error_message:before {
    /* Use font awesome fa-certificate */
    font-family: 'Font Awesome 5 Pro';
    content: "\f0a3";
    font-weight: 900;
    margin-left: 5px;
}

.success, .success_message {color: var(--message-success-color);}

.success:before, .success_message:before, .addToBasket_message:before {
    /* Use font awesome fa-check */
    font-family: 'Font Awesome 5 Pro';
    content: "\f00c";
    font-weight: 900;
    margin-left: 5px;
}

.normal_message {padding: 0;}

.warning_message {color: var(--message-warning-color);}

.warning_message:before {
    /* Use font awesome fa-exclamation-triangle */
    font-family: 'Font Awesome 5 Pro';
    content: "\f071";
    font-weight: 900;
    margin-left: 5px;
}

input.error {background-color: pink;}

.delete_symbol:before {
    /* Use font awesome fa-times */
    font-family: 'Font Awesome 5 Pro';
    content: "\f00d";
    color: var(--message-alert-color);
}

/***** MESSAGES ENDS ******************************************************************************************************************************************/


/***** HERO IMAGE STARTS **************************************************************************************************************************************/

/*** ENTER HERO BACKGROUND IMAGES - INCLUDE ID ON HTML PAGE ***/
#migs .hero-image {background-image: url('/research/images/migs_hero1.jpg');}

.hero-container {
    margin: 0.2em 0 2em 0;
    height: 100%;
    text-align: center;
}

.hero-image {
    height: 400px;
    justify-content: center;
    background-size: cover;
    background-position: center 120%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    padding: 2em;
}

.hero-text {
    width: 90%;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    color: var(--site-white-color);
    padding: 1em;
}

.hero-text h1 {
    font-size: 3em;
    color: var(--site-white-color);
    text-align: center;
    margin-top: 1em;
}

.hero-button {
    width: -moz-fit-content;
    width: fit-content;
    font-size: 1.7em;
    border: 2px solid var(--site-white-color);
    padding: .8em 1.3em;
    color: var(--site-white-color);
    cursor: pointer;
    margin: 1.5em auto 0.5em auto;
}


.hero-button:hover, .hero-button:active {
    background-color: var(--site-white-color);
    color: var(--site-dark-grey-color);
}

/***** HERO IMAGE ENDS ****************************************************************************************************************************************/


/***** PARALLAX STARTS ****************************************************************************************************************************************/



/***** PARALLAX ENDS ******************************************************************************************************************************************/


/***** CAMPAIGN LANDING TITLE STARTS **************************************************************************************************************************/

.campaign-landing-title {
    position: relative;
    height: 100%;
    clear: both;
    margin-top: 10px;
}

.campaign-landing-image {
    width: 100%;
    max-height: 550px;
    object-fit: cover;
    -webkit-filter: grayscale(10%);
    filter: grayscale(10%);
}

.campaign-landing-title-text {
    position: absolute;
    width: 100%;
    top: 20%;
    left: 0;
    transform: translate(0, -20%);
    padding: 3em;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(52, 52, 52, 0.4), rgba(255, 255, 255, 0));
}

.campaign-landing-title-text h1,
.campaign-landing-title-text h2 {
    color: var(--site-white-color);
    text-shadow: 0 0 20px var(--site-dark-grey-color);
}

.campaign-landing-title-text h1 {
    font-size: 6.2em;
    margin-bottom: 30px;
    font-weight: bold;
    letter-spacing: 1px;
}

.campaign-landing-title-text h1.smaller {
    font-size: 4em;
}

.campaign-landing-title-text h2 {font-size: 2.2em;}

.campaign-homepage-title {
    position: relative;
    clear: both;
    margin-top: 10px;
}

.campaign-homepage-image {
    height: 550px;
    width: 100%;
    object-fit: cover;
    -webkit-filter: grayscale(5%);
    filter: grayscale(5%);
}

.campaign-homepage-image.background-darker {
    -webkit-filter: grayscale(15%);
    filter: grayscale(15%);
}

.campaign-homepage-title-text {
    position: absolute;
    width: 100%;
    top: 30%;
    left: 0;
    transform: translate(0, -30%);
    padding: 3em;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(52, 52, 52, 0.6), rgba(255, 255, 255, 0));
}

.campaign-homepage-title-text h1,
.campaign-homepage-title-text h2,
.campaign-homepage-title-text h3,
.campaign-homepage-title-text h4 {
    color: #fffefe;
    text-shadow: 0 0 20px var(--site-dark-grey-color);
    font-weight: bold;
}

.campaign-homepage-title-text h1 {font-size: 3.7em;}
.campaign-homepage-title-text h2 {font-size: 2.2em;}
.campaign-homepage-title-text h3 {font-size: 1.8em;}
.campaign-homepage-title-text h4 {font-size: 1.4em;}

/***** CAMPAIGN LANDING TITLE ENDS ****************************************************************************************************************************/


/***** HIGHLIGHTED QUOTE STARTS *******************************************************************************************************************************/

.highlighted-quote-container {
    position: relative;
    padding: 0;
}

.highlighted-quote-container span:before {
    font-family: "Font Awesome 6 Pro";
    content: "\f10d";
    color: rgba(64, 114, 90, 0.2);
    text-decoration: none;
    font-weight: bold;
    font-size: 12em;
    position: absolute;
    top: 0;
    left: 0;

}

.highlighted-quote-text {
    font-size: 1.4em;
    font-style: italic;
    padding: 80px 0 0 10%;
}

.highlighted-quote-author {
    margin-top: 10px;
    padding-left: 10%;
}


/***** HIGHLIGHTED QUOTE ENDS *********************************************************************************************************************************/


/***** SLIDESHOW STARTS ***************************************************************************************************************************************/
.slideshow {
    position: relative;
}

.slideshow img {
    max-height: 470px;
}

.slideshow > a > div {
    width: fit-content;
    position: absolute;
    top: 55%;
    left: 0;
    background-color: var(--primary-purple-color);
    padding: 1.2em;
}

.slideshow h2 {
    color: var(--site-white-color);
    text-align: left;
    margin: 0;
    font-size: 1.9em;
    width: fit-content;
}

.slideshow p {
    color: var(--site-white-color);
    text-align: left;
    font-size: 1.2em;
    font-weight: lighter;
}


/***** SLIDESHOW ENDS *****************************************************************************************************************************************/


/***** MASONRY GRID STARTS ************************************************************************************************************************************/

.masonry {
    display: -ms-flexbox; /* IE 10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE 10 */
    flex-wrap: wrap;
    flex: 50%;
}

.masonry-col {
    -ms-flex: 50%; /* IE 10 */
    flex: 50%;
    padding-right: 20px;
    clear: right;
}

.masonry-col.masonry-secondary-col {padding-right: 0;}

.masonry-col .masonry-tile {
    margin-top: 20px;
    background-color: var(--site-light-grey-color);
    padding: 10px;
    text-align: left;
    vertical-align: middle;
}



/***** MASONRY GRID ENDS **************************************************************************************************************************************/


/***** FULL PAGE TABS STARTS **********************************************************************************************************************************/

/* TABLINK STYLES START - USED ON EVENT PAGES */

.tablink-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.tablink-container-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.tablink-container-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.tablink {
    color: var(--primary-purple-color);
    background-color: var(--site-light-grey-color);
    border: none;
    cursor: pointer;
    padding: 14px;
    font-size: 17px;
    margin-right: 10px;
}

.tablink:last-child {
    margin-right: 0;
}

.tablink:hover {
    background-color: var(--primary-purple-color);
    color: var(--site-white-color);
}

.tabcontent {
    display: none;
    height: 100%;
    width: 100%;
}

.tablink.tab-active {
    background-color: var(--primary-purple-color);
    color: var(--site-white-color);
}

.speaker-bios div {
    padding: 1em;
    margin: .5em 0;
}

.speaker-bios div:nth-child(odd) {background-color: var(--site-light-grey-color);}

/* TABLINK STYLES END */

/* GLOBAL TAB STYLES STARTS */

.cbri-tabs-menu {
    display: block;
    margin: 20px 0;
    /*border: solid 1px deeppink;*/
    width: auto;
    font-size: 0;
}

.cbri-tabs {
    display: inline-block;
    padding: 12px 28px;
    margin-left: .4rem;
    font-size: 18px;
    border-bottom: solid 1px var(--primary-grey-color);
    color: var(--primary-purple-color)
}

.cbri-tabs:hover {
    color: var(--primary-grey-color);
    transition: 0.2s;
    cursor: pointer;
}

.cbri-tabs.tab-active {
    box-shadow: 0 -4px var(--primary-purple-color) inset;
    border-bottom: solid 1px var(--primary-purple-color);}

.cbri-tabs-container.tabcontent {
    display: none;
    height: 100%;
    margin-bottom: 20px;
}

/* GLOBAL TAB STYLES ENDS */

/***** FULL PAGE TABS ENDS ************************************************************************************************************************************/


/***** EVENT CARDS AND CTA'S START ****************************************************************************************************************************/

.event-card {
    background-color: var(--site-light-grey-color);
    padding: 10px;
    display: inline-block;
    text-align: left;
    vertical-align: top;
}

.event-card-info {
    width: 75%;
    padding-left: 10px;
    display: inline-block;
    float: right;
}

.event-card-info h3 {font-size: 1.5em;}

.event-card-img {
    width: 25%;
    max-height: 120px;
    overflow: hidden;
}

.event-card-date {
    width: 25%;
    font-size: 1.25em;
    color: var(--site-white-color);
    background-color: var(--primary-purple-color);
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 8px;
    text-align: center;
    float: left;
    display: inline-block;
}

.event-card-button {
    width: 75%;
    display: inline-block;
    padding-left: 10px;
}

.event-card-button > div {
    float: right;
    padding-top: 5px;
}

.event-card-button > div:first-child {margin-left: 5px;}

.event-card-cta {
    display: inline-block;
    border: solid 1px #cccccc;
    padding: 1em;
    vertical-align: top;
}

.event-card-cta h3 {
    min-height: 2.6em;
}

.event-card-seminar {
    text-align: left;
    vertical-align: top;
    position: relative;
    display: inline-block;
}

.event-card-seminar-info {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.9);
    padding: 15px;
}

.event-card-seminar-info h3 {font-size: 1.4em;}

.event-card-seminar-img img {
    height: 320px;
    object-position: 50% 50%;
    object-fit: cover;
    transition: transform .2s;
    transform: scale(1);
}

.event-card-seminar:hover {
    transform: scale(1.01);
    object-position: 50% 50%;
}

.event-card-seminar img {margin-bottom: -5px;}

.event-card-seminar-date {
    font-size: 1.25em;
    color: var(--site-white-color);
    background-color: var(--primary-purple-color);
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 8px;
    position: absolute;
    top: 10px;
    right: 0;
}

.event-banner {
    margin: 15px 100px;
    padding: 30px;
    background-color: #e6e6e6;
    display: block;
    text-align: left;
}

.event-banner-container {
    position: relative;
}

.event-banner-text {
    width: 75%;
    display: inline-block;
}

.event-banner-button {
    width: 22%;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    margin-left: 10px;
}

.event-banner-button > .action-button-ghost {float: right;}

.event-banner-button .action-button-ghost a {padding: 8px 30px!important;}


/***** EVENT CARDS AND CTA'S ENDS *****************************************************************************************************************************/


/***** VCARDS STARTS ******************************************************************************************************************************************/

.vcard-container {
    width: 100%;
    max-width: 500px;
    border: solid 1px #bfbfbf;
    padding: 20px 10px;
    margin: 10px auto;
}

.vcard-container img {
    display: block;
    margin: 0 auto 20px auto;
    width: 100px;
}

.vcard-title h1 {
    font-size: 1.6em;
    margin-bottom: 8px;
}

.vcard-title h2 {
    font-size: 1.2em;
    margin-bottom: 8px;
}

.vcard-title {
    margin: 0 auto 40px auto;
    text-align: center;
}

.vcard-line-item {
    display: grid;
    grid-template-columns: 20px auto;
    grid-gap: 20px;
    justify-items: start;
    margin-bottom: 5px;
    /*border: solid 1px deeppink;*/
}

.vcard-icon {
    width: 28px;
    font-size: 1.3em;
    /*border: solid 1px deepskyblue;*/
    text-align: center;
}

.vcard-icon i {justify-self: center;}

.vcard-info {
    /*border: solid 1px orange;*/
    text-align: left;
    justify-self: start;
}

/***** VCARDS STARTS ******************************************************************************************************************************************/


/***** PROCESS ICONS STARTS ***********************************************************************************************************************************/

.process-icon-container {display: flex;}

.process-icon-item {
    flex-basis: 25%;
    text-align: center;
    position: relative;
    margin-bottom: 1rem;
}

.process-icon-item-bar {
    background-color: var(--primary-purple-color);
    height: 16px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 68px;
}

.process-icon-item-bar.first-icon {
    width: 50%;
    left: 50%;
}

.process-icon-item-bar.last-icon {
    width: 50%;
    right: -50%;
}

.process-icon {
    width: 120px;
    height: 120px;
    background-color: var(--primary-purple-color);
    border-radius: 50%;
    position: relative;
    text-align: center;
    margin: 1rem auto;
}

.process-icon-connecting-bar-container {

}

.process-icon-connecting-bar {
    width: 70%;
    height: 16px;
    background-color: var(--primary-purple-color);
    justify-content: center;
}

.process-icon-item i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    color: var(--site-white-color);
}


/***** PROCESS ICONS ENDS *************************************************************************************************************************************/


/***** MODAL STARTS *******************************************************************************************************************************************/


.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    width: 50vw;
    position: relative;
    background-color: #fefefe;
    margin: 10% auto; /* 10% from the top and centered */
    padding: 2em 4em;
    border: 1px solid #888;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.5s;
    animation-name: animatetop;
    animation-duration: 0.5s;
}

@-webkit-keyframes animatetop {
    from {top: -600px; opacity: 0}
    to {top: 0; opacity: 1}
}

@keyframes animatetop {
    from {top: -600px; opacity: 0}
    to {top: 0; opacity: 1}
}

.modal-button {
    color: var(--primary-purple-color);
    cursor: pointer;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.modal-close:hover,
.modal-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 95%;
        margin: 15% auto;
        padding: 2em 1em;
    }
}

/***** MODAL ENDS *********************************************************************************************************************************************/


/***** DATA FILTER STARTS *************************************************************************************************************************************/

.pointer {cursor: pointer;}

.data-container {overflow: hidden;}

.data-filter-item {display: none; /* Hidden by default */}

.filter-btn {
    border: none;
    padding: 12px 16px;
    background-color: #f1f1f1;
    cursor: pointer;
    margin: 0.3em 0.1em;
}

.filter-btn a {color: var(--site-dark-grey-color)}
.filter-btn:hover {background-color: #dddddd;}
.filter-btn:hover a:hover {color: var(--site-dark-grey-color);}

.filter-btn.active {
    background-color: var(--primary-purple-color);
    color: white;
}

.filter-btn.active:hover {
    cursor: default;
    background-color: var(--primary-purple-color);
    color: white;
}

.filter-btn.active a {
    background-color: var(--primary-purple-color);
    color: white;
}

/***** DATA FILTER ENDS ***************************************************************************************************************************************/


/***** RICH-MEDIA, CATEGORIES AND TRAINING COURSE DETAILS STARTS **********************************************************************************************/
.height-auto {
    height: auto;
    overflow: hidden;
}

.height-inherit {height: inherit;}

/*case studies div height */
.height-160-auto {
    height: 16em;
    vertical-align: top;
    position: relative;
}

.height-170-auto {
    height: 17em;
    vertical-align: top;
    position: relative;
}

.category {
    position: relative;
    height: auto;
    overflow-y: auto;
}

.richmediaAside img {
    object-fit: cover;
    width: 90px;
    height: 60px;
    float: left;
    border: solid 1px #cccccc;
    padding: 5px;
    background: transparent;
    margin: 7px 5px 7px 0;
}

.richmediaAside .js-results-item h3 {font-size: 1.1em;}

.richmedia-main-img {
    width: 100%;
    height: 450px;
    object-fit: cover;
}



.mfr-background .ellipsis:before {background-image: linear-gradient(to right, rgba(215, 255, 222, 0), #f7f4fd 10px);}
.mfr-background .richmedia-button {background-color: var(--site-white-color) !important;}

.line-clamp-3 p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.training-course-details {width: 37%;}

.training-events-table {
    width: 100%;
    border-collapse: collapse;
}

.training-events-table th,
.training-events-table tr,
.training-events-table td {padding: 1em;}

.training-events-table tr:nth-child(odd){background-color: var(--site-light-grey-color);}

.training-events-table tr td, .training-events-table th:first-child {
    padding-right: 1em;
    text-align: right;
    vertical-align: top;
}

.training-events-table tr td:first-child {
    font-weight: 600;
    width: 130px;
}

.training-events-table tr td:last-child {text-align: left;}

.training-events-table tr.center > td {text-align: center!important;}

/***** RICH-MEDIA, CATEGORIES AND TRAINING COURSE DETAILS ENDS ************************************************************************************************/


/***** SPEAKER PROFILES AND AVATARS STARTS ********************************************************************************************************************/

.profile-grid {
    display: grid;
    grid-template-columns: 300px auto;
    grid-template-areas:
            "avatar contact-info"
            "credentials bio";
    gap: 2rem;
}

.profile-avatar {
    grid-area: avatar;
    padding: 1rem;
}

.profile-contact-info {
    grid-area: contact-info;
    padding: 1rem 1rem 1rem 0;
}

.profile-credentials {
    grid-area: credentials;
    padding: 1rem 2rem 1rem 1rem;
    border-right: solid 1px var(--primary-grey-color);
}

.profile-bio {
    grid-area: bio;
    padding: 1rem 1rem 1rem 0;
}

.profile-img {
    margin: auto;
    border-radius: 50%;
    width: 100%;
    max-width: 280px;
    max-height: 280px;
}

.profile-info {
    margin: 20px auto 0 auto;
    width: 100%;
    max-width: 1000px;
    border: solid 1px #999999;
    padding: 30px 30px 15px;
}

.profile-details {
    margin: 10px 0;
    padding: 10px;
    text-align: center;
}

.profile-bio-intro {
    /*height: 2.8em;
    overflow: hidden;*/
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow-ellipsis: 2;
    overflow: hidden;
}

.profile-index {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    height: 100%;
}

.avatar img {
    width: 100px;
    height: 100px;
    background-size: cover;
    border-radius: 50%;
    display: inline-block;
    margin-right: 1em;
    float: left;
}

.avatar {
    display: inline-block;
    padding: .8em;
    width: 100%;
    margin-top: 1em;
    background-color: #efefef;
}

.avatar h3 {margin-top: 10px;}

#podcasts .avatar {width: 100%;}

/***** SPEAKER PROFILES AND AVATARS ENDS **********************************************************************************************************************/


/***** TESTIMONIALS STARTS ************************************************************************************************************************************/

.testimonial-container {
    display: flex;
    flex-flow: row wrap;
}

.testimonial-container-column {
    flex: 50%;
    padding-right: 30px;
    clear: right;
}

.testimonial-container-column.testimonial-container-secondary-col {padding-right: 0;}

.testimonial-card {
    display: flex;
    flex-flow: row nowrap;
    gap: 20px;
    align-items: flex-start;
    padding: 1em;
    width: 100%;
    margin-bottom: 30px;
}

.testimonial-card.column {
    flex-flow: column nowrap;
    align-items: center;
    text-align: center;
}

.testimonial-image {
    border-radius: 50%;
    min-width: 80px;
    min-height: 80px;
    max-width: 80px;
    max-height: 80px;
    display: flex;
    align-content: center;
    align-items: center;
}

.testimonial-image > div {
    background-color: var(--primary-purple-color);
    border-radius: 50%;
    min-width: 80px;
    min-height: 80px;
    max-width: 80px;
    max-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: var(--site-white-color)
}

.testimonial-text-review {font-style: italic;}

.testimonial-text-author {color: var(--primary-grey-color);}
/***** TESTIMONIALS ENDS **************************************************************************************************************************************/


/***** MINI DROPDOWN MENU STARTS ******************************************************************************************************************************/

.mini-dropdown {
    position: relative;
    display: inline-block;
}

.mini-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 12em;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1;
    left: 3%;
}

.mini-dropdown:hover .mini-dropdown-content {display: block;}

/***** MINI DROPDOWN MENU ENDS ********************************************************************************************************************************/


/***** TOP NAV STARTS *****************************************************************************************************************************************/

.top-bar {
    display: block;
    margin: 0 auto;
    padding: 5px 0;
    max-width: 1414px;
    width: 100%;
    border-bottom: solid 1px #ececec;
    text-align: center;
}


/***** TOP NAV ENDS *******************************************************************************************************************************************/


/***** BASKET AND CHECKOUT STARTS *****************************************************************************************************************************/

.basketQty {
    width: 3em;  /* Wide enough for a 2 digit number + up and down arrows in some browsers */
    border: solid 1px #cccccc;
}

/**tooltip**/
a.tooltip {outline: none;}
a.tooltip strong {line-height: 3em;}
a.tooltip:hover {text-decoration: none;}
a.tooltip span {
    z-index: 10;
    display: none;
    padding: .5em .5em;
    margin-top: -3em;
    margin-left: -8%;
    width: 10%;
    line-height: 1.3em;
    text-align: left;
}

a.tooltip:hover span {
    display: inline;
    position: absolute;
    color: var(--site-dark-grey-color);
    border: 1px solid #DCA;
    background: #fffAF0;
}

.callout {
    z-index: 20;
    position: absolute;
    top: 1em;
    border: 0;
    left: -10%;
}

/*CSS3 extras*/
a.tooltip span {
    border-radius: 4px;
    box-shadow: 5px 5px 8px #CCC;
}

/***** BASKET AND CHECKOUT ENDS *******************************************************************************************************************************/


/***** ICONS STARTS *******************************************************************************************************************************************/

.rt-icon {
    vertical-align: top;
    content: url("/css/images/rapid-turnaround-icon.svg");
    max-width: 40px;
}

h1 .rt-icon {
    max-width: 30px;
    margin-top: -10px;
    margin-left: 3px
}

h2 .rt-icon {
    max-width: 27px;
    margin-top: -10px;
    margin-left: 3px
}

h3 .rt-icon {
    max-width: 24px;
    margin-top: -10px;
    margin-left: 3px
}

p .rt-icon {
    max-width: 18px;
    margin-top: -8px;
}

a.rt-icon:hover,
.rt-icon-grey {content: url("/css/images/rapid-turnaround-icon-grey.svg");}



/***** ICONS ENDS *********************************************************************************************************************************************/

/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************
***** FEATURED ITEMS ENDS *************************************************************************************************************************************/



/***** WIDTHS AND COLUMNS STARTS *******************************************************************************************************************************
****************************************************************************************************************************************************************
***************************************************************************************************************************************************************/

/*** WIDTHS ***/
.width-10 {width: 10%;}
.width-15 {width: 15%;}
.width-20 {width: 20%;}
.width-25 {width: 25%;}
.width-30 {width: 30%;}
.width-40 {width: 40%;}
.width-45 {width: 45%;}
.width-50 {width: 50%;}
.width-55 {width: 55%;}
.width-60 {width: 60%;}
.width-65 {width: 65%;}
.width-70 {width: 70%;}
.width-75 {width: 75%;}
.width-80 {width: 80%;}
.width-85 {width: 80%;}
.width-90 {width: 90%;}
.width-95 {width: 95%;}
.width-100 {width: 100%;}
.width-100-important {width: 100% !important;}
/* WIDTH # MOBILE # */
.width-13-32 {width: 13%;}  /* goes to 32% on small screens JAD */
.width-23-45 {width: 23%;}  /* goes to 45% on small screens JAD */
.width-15-50 {width: 15%;}  /* goes to 50% on small screens JAD */
.width-20-50 {width: 20%;}  /* goes to 50% on small screens JAD */
.width-25-50 {width: 25%;}  /* goes to 50% on small screens JAD */
.width-30-45 {width: 30%;}  /* goes to 50% on small screens JAD */
.width-30-50 {width: 30%;}  /* goes to 50% on small screens JAD */
.width-30-80 {width: 30%;}  /* goes to 50% on small screens JAD */
.width-40-90 {width: 40%;}  /* goes to 90% on small screens MCA */
.width-65-90 {width: 65%;}  /* goes to 90% on small screens JAD */
/* WIDTH # MOBILE 100% */
.width-10-100 {width: 10%;}  /* goes to 100% on small screens JAD */
.width-13-100 {width: 13%;}  /* goes to 100% on small screens JAD */
.width-15-100 {width: 15%;}  /* goes to 100% on small screens JAD */
.width-20-100 {width: 20%;}  /* goes to 100% on small screens JAD */
.width-23-100 {width: 23%;}  /* goes to 100% on small screens JAD */
.width-25-100 {width: 25%;}  /* goes to 100% on small screens JAD */
.width-30-100 {width: 30%;}  /* goes to 100% on small screens JAD */
.width-30-28-100 {width: 30%;}  /* used for 3 column on projects and MIG pages*/
.width-33-100 {width: 33%;}  /* goes to 100% on small screens JAD */
.width-32-100 {width: 32%;}  /* goes to 100% on small screens JAD */
.width-35-100 {width: 35%;}  /* goes to 100% on small screens JAD */
.width-40-100 {width: 40%;}  /* goes to 100% on small screens JAD */
.width-45-100 {width: 45%;}  /* goes to 100% on small screens JAD */
.width-47-100 {width: 47%;}  /* goes to 100% on small screens JAD */
.width-49-100 {width: 49%;}  /* goes to 100% on small screens JAD */
.width-50-100 {width: 50%;}  /* goes to 100% on small screens JAD */
.width-55-100 {width: 55%;}  /* goes to 100% on small screens VJJ*/
.width-65-100 {width: 65%;}  /* goes to 100% on small screens JAD */
.width-60-100 {width: 60%;}  /* goes to 100% on small screens JAD */
.width-70-100 {width: 70%;}  /* goes to 100% on small screens JAD */
.width-75-100 {width: 75%;}  /* goes to 100% on small screens JAD */
.width-80-100 {width: 80%;}  /* goes to 100% on small screens JAD */
.width-85-100 {width: 85%;}  /* goes to 100% on small screens JAD */
.width-90-100 {width: 90%;}  /* goes to 100% on small screens JAD */

/* COLUMNS */
.col-1-12 {width: 6.5%;}
.col-2-12 {width: 15%;}
.col-3-12 {width: 23.5%;}
.col-4-12 {width: 32%;}
.col-5-12 {width: 40.5%;}
.col-6-12 {width: 49%;}
.col-7-12 {width: 57.5%;}
.col-8-12 {width: 66%;}
.col-9-12 {width: 74.5%;}
.col-10-12 {width: 83%;}
.col-11-12 {width: 91.5%;}
.col-12-12 {width: 100%;}

[class*='col-'] {
    float: left;
    margin-right: .5%;
    padding-left: .5%;
    padding-right: .5%;
}

.row [class*='col-']:last-of-type {margin-right: 0;}

.width-fixed-50 {width: 50px;}
.width-fixed-100 {width: 100px;}
.width-fixed-200 {width: 200px;}
.width-fixed-300 {width: 300px;}


/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************
***** WIDTHS AND COLUMNS ENDS *********************************************************************************************************************************/



/***** UTILITIES STARTS ****************************************************************************************************************************************
****************************************************************************************************************************************************************
***************************************************************************************************************************************************************/

.break:after {
    content: "\000A";
    white-space: pre;
}

.separator:before {
    content: " | ";
    color: var(--site-dark-grey-color);
}


.display-none {display: none;}

.inline {display: inline;}

.block {display: block;}

.inline-block {display: inline-block;}

.inline-block-mob-block {display: inline-block;}

.rwd-line {display: inline;}

.large-screen-only {display: block;}

.mid-screen-only {display: none;}

.mob-only {display: none;}

.no-wrap {white-space: nowrap;}

.height-100 {height: 100%;}

.flex {display: flex;}

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

.column-flex {
    display: flex;
    flex-direction: column;
}

.row-flex {
    display: flex;
    flex-direction: row;
}

.row-flex-reverse-mobile {
    display: flex;
    flex-direction: row;
}

.flex-row-mobile-column-reverse {
    display: flex;
    flex-direction: row;
}

.flex-column-reverse {flex-direction: column-reverse;}
.flex-row-reverse {flex-direction: row-reverse;}

.flex-item-30-100 {flex: 30%;}
.flex-item-40-100 {flex: 40%;}
.flex-item-50-100 {flex: 50%;}
.flex-item-60-100 {flex: 60%;}
.flex-item-70-100 {flex: 70%;}

.flex-basis-auto {flex-basis: auto;}
.flex-basis-20-100 {flex-basis: 20%;}
.flex-basis-30-100 {flex-basis: 30%;}
.flex-basis-40-100 {flex-basis: 40%;}
.flex-basis-50-100 {flex-basis: 50%;}
.flex-basis-60-100 {flex-basis: 60%;}
.flex-basis-70-100 {flex-basis: 70%;}
.flex-basis-80-100 {flex-basis: 80%;}

.flex-gap-xsmall {gap: 10px;}
.flex-gap-small {gap: 15px;}
.flex-gap-medium {gap: 30px;}
.flex-gap-large {gap: 50px;}
.flex-gap-xlarge {gap: 60px;}

.flex-wrap-none {flex-wrap: nowrap;}
.flex-wrap-wrap {flex-wrap: wrap;}
.flex-wrap-reverse {flex-wrap: wrap-reverse;}

.flex-item-grow-1 {flex-grow: 1;}
.flex-item-grow-2 {flex-grow: 2;}
.flex-item-grow-3 {flex-grow: 3;}
.flex-item-grow-4 {flex-grow: 4;}

.flex-item-order-1-mobile {order: inherit;}

.justify-content-between {justify-content: space-between;}
.justify-content-evenly {justify-content: space-evenly;}
.justify-content-start {justify-content: flex-start;}
.justify-content-end {justify-content: flex-end;}
.justify-content-center {justify-content: center;}

.align-content-between {align-content: space-between;}
.align-content-evenly {align-content: space-around;}
.align-content-start {align-content: flex-start;}
.align-content-end {align-content: flex-end;}
.align-content-center {align-content: center;}
.align-content-stretch {align-content: stretch;}

.align-items-start {align-items: flex-start;}
.align-items-end {align-items: flex-end;}
.align-items-center {align-items: center;}
.align-items-stretch {align-items: stretch;}
.align-items-baseline {align-items: baseline;}

.align-self-start {align-self: flex-start;}
.align-self-end {align-self: flex-end;}
.align-self-center {align-self: center;}
.align-self-stretch {align-self: stretch;}
.align-self-baseline {align-self: baseline;}

.relative {position: relative;}
.absolute {position: absolute;}
.sticky {position: sticky;}

.position-top {top: 0;}
.position-top-10 {top: 1em;}
.position-top-20 {top: 2em;}

.radius {
    border-radius: 4px;
    box-shadow: 5px 5px 8px #CCC;
}

.pointer {cursor: pointer;}

.alpha {
    margin-left: 0;
    padding-left: 0;
}

.omega {
    margin-right: 0;
    padding-right: 0;
}

.captcha2 {display: none;} /* Hidden field for captcha honeypot */

/*** FONT AWESOME ***/
.fa-icon-round {
    width: auto;
    height: auto;
    border-radius: 50px;
    border: 3px solid;
    vertical-align: middle;
    padding: 15px;
}

/*** VIDEO ***/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.video-container iframe, .embed-container object, .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* FADING ANIMATION */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************
***** UTILITIES ENDS ******************************************************************************************************************************************/



/***** TESTING AREA STARTS *************************************************************************************************************************************
****************************************************************************************************************************************************************
***************************************************************************************************************************************************************/

/*** 2021 GRID SYSTEM STARTS ***/
@supports (display: grid) {
    .grid-2-column,
    .grid-3-column,
    .grid-4-column {
        display: grid;
        grid-gap: 30px;
    }

    .grid-5-column,
    .grid-6-column {
        display: grid;
        grid-gap: 20px;
    }

    .grid-column-gap-xsmall {grid-column-gap: 10px;}
    .grid-column-gap-small {grid-column-gap: 15px;}
    .grid-column-gap-large {grid-column-gap: 50px;}
    .grid-column-gap-xlarge {grid-column-gap: 60px;}

    .grid-row-gap-xsmall {grid-row-gap: 10px;}
    .grid-row-gap-small {grid-row-gap: 15px;}
    .grid-row-gap-large {grid-row-gap: 50px;}
    .grid-row-gap-xlarge {grid-row-gap: 60px;}

    .grid-2-column.grid-gap-xsmall,
    .grid-3-column.grid-gap-xsmall,
    .grid-4-column.grid-gap-xsmall,
    .grid-5-column.grid-gap-xsmall,
    .grid-6-column.grid-gap-xsmall {grid-gap: 10px;}

    .grid-2-column.grid-gap-small,
    .grid-3-column.grid-gap-small,
    .grid-4-column.grid-gap-small,
    .grid-5-column.grid-gap-small,
    .grid-6-column.grid-gap-small {grid-gap: 15px;}

    .grid-2-column.grid-gap-large,
    .grid-3-column.grid-gap-large,
    .grid-4-column.grid-gap-large,
    .grid-5-column.grid-gap-large,
    .grid-6-column.grid-gap-large {grid-gap: 50px;}

    .grid-2-column.grid-gap-xlarge,
    .grid-3-column.grid-gap-xlarge,
    .grid-4-column.grid-gap-xlarge,
    .grid-5-column.grid-gap-xlarge,
    .grid-6-column.grid-gap-xlarge {grid-gap: 60px;}

    .grid-2-column.grid-gap-none,
    .grid-3-column.grid-gap-none,
    .grid-4-column.grid-gap-none,
    .grid-5-column.grid-gap-none,
    .grid-6-column.grid-gap-none {grid-gap: 0;}

    .grid-2-column {grid-template-columns: repeat(2, 1fr);}
    .grid-3-column {grid-template-columns: repeat(3, 1fr);}
    .grid-4-column {grid-template-columns: repeat(4, 1fr);}
    .grid-5-column {grid-template-columns: repeat(5, 1fr);}
    .grid-6-column {grid-template-columns: repeat(6, 1fr);}

    .grid-row-height-auto {grid-auto-rows: 1fr;}

    .grid-2-column .grid-item,
    .grid-3-column .grid-item,
    .grid-4-column .grid-item,
    .grid-5-column .grid-item,
    .grid-6-column .grid-item {margin: 0;}

    .grid-item a h2,
    .grid-item a h3 {color: var(--primary-purple-color);}
    .grid-item a:hover h3 {color: #d3d3d3;}

    .grid-item-span-2-col {grid-column: span 2;}
    .grid-item-span-3-col {grid-column: span 3;}
    .grid-item-span-4-col {grid-column: span 4;}
    .grid-item-span-all-col {
        grid-column-start: 1;
        grid-column-end: -1;
    }

    .grid-item-justify-center {justify-self: center;}
    .grid-item-justify-stretch {justify-self: stretch;}
    .grid-item-align-center {align-self: center;}

    .grid-aside-main {
        display: grid;
        grid-template-columns: 25% 75%;
    }
}

/* START FALLBACK */
.ie-grid-2-column,
.ie-grid-3-column,
.ie-grid-4-column,
.ie-grid-5-column,
.ie-grid-6-column {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
}

.ie-grid-2-column .grid-item,
.ie-grid-3-column .grid-item,
.ie-grid-4-column .grid-item,
.ie-grid-5-column .grid-item,
.ie-grid-6-column .grid-item {
    /* CLASSES LEFT HERE IN CASE PROPERTIES NEED TO BE ADDED. IF NONE REQUIRED, REMOVE */
}

.ie-grid-2-column .grid-item,
.ie-grid-3-column .grid-item {
    margin: 20px 0;
}

.ie-grid-4-column .grid-item,
.ie-grid-5-column .grid-item,
.ie-grid-6-column .grid-item {
    margin: 15px 0;
}

.ie-grid-2-column .grid-item {width: 48%;}
.ie-grid-3-column .grid-item {width: 31%;}
.ie-grid-4-column .grid-item {width: 23%;}
.ie-grid-5-column .grid-item {width: 18%;}
.ie-grid-6-column .grid-item {width: 15%;}

.ie-grid-2-column .ie-grid-item-span-2-col,
.ie-grid-3-column .ie-grid-item-span-3-col,
.ie-grid-4-column .ie-grid-item-span-4-col {width: 100%!important;}
/* END FALLBACK */


@media only screen and (max-width: 1400px) {
    .landing-main-img {
        max-height: 55vh;
    }
}

@media only screen and (max-width: 1000px) {
    .ie-grid-3-column .grid-item,
    .ie-grid-5-column .grid-item,
    .ie-grid-6-column .grid-item {width: 31%;}

    .grid-3-column,
    .grid-5-column,
    .grid-6-column {grid-template-columns: repeat(3, 1fr);}

    .ie-grid-4-column .grid-item {width: 48%;}

    .grid-4-column {grid-template-columns: repeat(2, 1fr);}

    .grid-4-column.grid-column-maintain {grid-template-columns: repeat(4, 1fr);}

    .pubs-grid-item-order-change {
        grid-row-start: 1;
        grid-column-start: 2;
    }

}

@media only screen and (max-width: 800px) {
    .ie-grid-3-column .grid-item,
    .ie-grid-4-column .grid-item {width: 48%;}

    .grid-3-column,
    .grid-4-column {grid-template-columns: repeat(2, 1fr);}

    .grid-3-column.grid-column-maintain {grid-template-columns: repeat(3, 1fr);}
    .grid-4-column.grid-column-maintain {grid-template-columns: repeat(4, 1fr);}
}

@media only screen and (max-width: 600px) {
    .ie-grid-2-column .grid-item,
    .ie-grid-3-column .grid-item,
    .ie-grid-4-column .grid-item {width: 100%;}

    .grid-2-column,
    .grid-3-column,
    .grid-4-column {grid-template-columns: 1fr;}

    .grid-3-column.grid-column-maintain,
    .grid-4-column.grid-column-maintain {grid-template-columns: 1fr;}

    .grid-item-span-2-col {grid-column: 1 / span all;}
    .grid-item-span-3-col {grid-column: 1 / span all;}
    .grid-item-span-4-col {grid-column: 1 / span all;}

    .form.grid-2-column .grid-item,
    .form .grid-2-column .grid-item {
        grid-column-start: 1;
        grid-column-end: end;
    }

    .form.fullwidth {padding: 1rem;}

    .ie-grid-5-column .grid-item,
    .ie-grid-6-column .grid-item {width: 48%;}

    .grid-5-column,
    .grid-6-column {grid-template-columns: repeat(2, 1fr);}

    .grid-1-column-mobile {grid-template-columns: 1fr!important;}

    .grid-item-border-bottom-none {border-bottom: none;}

    .tablink-container, .tablink-container-4 {grid-template-columns: 1fr;}
    .tablink {
        margin-right: 0;
        margin-bottom: 5px;}
}

@media only screen and (max-width: 400px) {
    .ie-grid-2-column .grid-item,
    .ie-grid-3-column .grid-item,
    .ie-grid-4-column .grid-item,
    .ie-grid-5-column .grid-item,
    .ie-grid-6-column .grid-item {width: 100%;}

    .grid-2-column,
    .grid-3-column,
    .grid-4-column,
    .grid-5-column,
    .grid-6-column {grid-template-columns: 1fr;}
}
/*** 2021 GRID SYSTEM ENDS ***/


/*** 2022 FLEXBOX SYSTEM STARTS ***/

/*** 2022 FLEXBOX SYSTEM ENDS ***/


/*** HOMEPAGE SLIDER SINGLE IMAGE REPLACEMENT ***/

.home-slider-container {
    max-height: 600px;
    margin: .5em 0 1em 2em;
    background-color: var(--site-dark-grey-color);
    padding: 40px;
}

.home-slider-container-text {
    border: solid 2px var(--site-white-color);
    padding: 40px;
}

.home-slider-container h2 {
    color: var(--site-white-color);
    font-size: 1.8em;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 2em;
    margin-top: 0.5em;
}

.home-slider-container h2 span {
    color: var(--site-white-color);
    font-size: 1.8em;
    letter-spacing: 4px;
    font-weight: bold;
    line-height: 1.4em;
}

.home-slider-container h3 {
    color: var(--site-white-color);
    font-size: 1.1em;
}


/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************
***** TESTING AREA ENDS ***************************************************************************************************************************************/

.card-container {
    display: grid;
    grid-template-rows: repeat(auto-fill, minmax(min(90px, 100%), 1fr));
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2rem;
    row-gap: 2rem;
}

.card-content {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    @supports (grid-template-rows: subgrid) {
        display: grid;
        row-gap: 0!important;
        grid-template-rows: subgrid;
    }
    @supports not (grid-template-rows: subgrid) {
        display: flex;
        flex-direction: column;
        .content {
            flex: 1;
        }
    }
}

@media only screen and (max-width: 769px) {
    .card-container {
        grid-template-columns: 1fr;
    }
}


/***** RESPONSIVE STARTS ***************************************************************************************************************************************
****************************************************************************************************************************************************************
***************************************************************************************************************************************************************/

/***** LARGER SCREEN STARTS ***********************************************************************************************************************************/
@media only screen and (max-width: 1250px) {
    .large-screen-only {display: none;}

    .campaign-landing-title-text {
        position: absolute;
        top: 10%;
        transform: translate(0, -10%);
        padding: 1em;
    }

    .campaign-landing-title-text h1 {
        font-size: 4em;
        margin-bottom: 20px;
    }

    .campaign-landing-title-text h1.smaller {
        font-size: 2.4em;
    }

    .campaign-landing-title-text h2 {
        font-size: 2em;
    }
}

@media only screen and (max-width: 1120px) {
    #header {grid-template-columns: 270px auto 210px;}
    #header .grid-item-2 div a, #header .grid-item-3 div {font-size: 1.5em;}
    #header .grid-item-2 a {padding: 4px 4px 3px 4px;}
    #header .grid-item-3 div #basket-counter-container {
        right: 8px;
        min-width: 16px;
        min-height: 16px;
        padding: 1px;
        font-size: 0.45em;
    }

    .topsearch {margin-top: 0;}
}

@media only screen and (min-width: 770px) and (max-width: 1064px) {

    #header {grid-template-columns: 240px auto 180px;}

    #header .grid-item-2 div a, #header .grid-item-3 div {font-size: 1.3em;}

    .topsearch {grid-template-columns: 30px 300px 0;}

    .width-30-28-100 {width: 28%;} /* USED FOR 3 COLUMN PROJECT OUTPUTS ON PROJECT WEBPAGES */

    .hero-image {
        min-height: 300px;
        background-position: center;
        background-attachment: unset;
        background-color: var(--site-dark-grey-color);
    }

    .hero-text h1 {
        font-size: 2.3em;
        margin-top: 0;
        margin-bottom: 0.5em;
    }

    .hero-button {
        font-size: 1.5em;
        font-weight: bold;
        margin-bottom: 0;
        margin-top: 0.8em;
    }

    .training-course-details {width: 100%;}

}

@media only screen and /*(min-width: 320px) and*/ (max-width: 1015px) {

    #meetings .event-card-date {display: none;}

    .event-card-button {
        width: 100%;
        padding-left: 0;
    }

    .event-card-button > div {width: 49%;}

    .event-card-button > div:only-child {
        width: 100%;
        margin-left: 0;
    }

    .event-card-button > div:last-child {float: left;}

    .event-card-button .action-button-filled a, .event-card-button .register-button-filled a {width: 100%;}

}

@media only screen and /*(min-width: 320px) and*/ (max-width: 912px) {
    #header {grid-template-columns: 210px auto 198px;}

    .topsearch {grid-template-columns: 30px 250px 0;}

    #cta-contact .grid-container {grid-template-areas: 'sentence sentence sentence sentence sentence sentence' 'email email phone phone form form';}

    .campaign-homepage-image {
        height: 450px;
        width: 100%;
    }

    .campaign-homepage-title-text  {padding: 1em;}
    .campaign-homepage-title-text h1 {font-size: 2.2em;}
}

@media only screen and /*(min-width: 320px) and*/ (max-width: 863px) {
    #header {grid-template-columns: 180px auto 198px;}

    #meetings .event-card-button > div {width: 100%;}
}
/***** LARGER SCREEN ENDS *************************************************************************************************************************************/


/***** MID SIZED SCREENS AND MOBILE STARTS ********************************************************************************************************************/
@media only screen and /*(min-width: 320px) and*/ (max-width: 769px) {

    .home-slider-container {
        margin-right: 0;
        margin-left: 0;
        padding: 20px;
    }

    .home-slider-container-text {padding: 20px;}

    .home-slider-container-text h2 {font-size: 1.4em;}

    #header {
        grid-template-areas: 'logo basket-account search';
        grid-template-columns: 1fr 1fr;
        padding: 10px 5px;
    }

    #header .grid-item-1 {margin-right: 10px;}

    #header .grid-item-2 {
        grid-area: 2 / span 2;
        max-width: 730px;
        margin-bottom: -63px;
        margin-left: 60px;
        z-index: 210;
    }

    #header .grid-item-2 a {color: var(--site-white-color);}

    #header .grid-item-2 div:first-child a {
        border-right: none;
        margin-right: 5px;
    }

    #header .grid-item-2 div:last-child {
        min-width: 300px;
        max-width: 100%!important;
        background-color: var(--site-white-color);
    }

    #header .grid-item-2 div:last-child form a {margin-right: 0;}

    .topsearch {grid-template-columns: 1fr 8fr 1fr;}

    .topsearch a i {color: var(--primary-purple-color);}

    .topsearch-query {
        min-width: auto;
        box-shadow: none;
        margin-top: 0;
        margin-left: 0;
    }

    .topsearch input::placeholder {
        font-size: 1em;
        padding-left: 10px;
    }

    .topsearch button {margin-left: -50px;}

    #header.ie11-header {
        display: block;
        width: auto;
    }

    #header.ie11-header > .grid-item-1 {display: inline-block;}

    #header.ie11-header > .grid-item-1 img {
        max-width: 70%;
        margin-left: -15px;
    }

    #header.ie11-header > .grid-item-2 {
        display: inline-block;
        margin: -5px 0 0 0;
        width: 100%;
    }

    #header.ie11-header > .grid-item-2 a {color: var(--primary-purple-color);}

    #header.ie11-header > .grid-item-2 div {float: right;}

    #header.ie11-header > .grid-item-2 div a {
        font-size: 1.8em;
        float: right;
    }

    #header.ie11-header > .grid-item-2 div:first-child {float: right;}

    #header.ie11-header > .grid-item-2 div:first-child a {
        padding: 4px 10px 3px 10px;
        border-right: none;
    }

    #header.ie11-header > .grid-item-2 div:last-child {
        border-right: none;
        float: right;
        width: auto;
    }

    #header.ie11-header > .grid-item-2 div:last-child form a {
        float: left;
        padding-top: 0;
    }

    #header.ie11-header > .grid-item-3 {
        display: inline-block;
        margin-top: -100px;
        float: right;
        width: auto;
    }

    #header.ie11-header .topsearch {
        display: inline-block;
        margin-right: 10px;
    }

    #header.ie11-header .topsearch-query {
        margin-top: 10px;
        margin-left: 10px;
        width: 80%;
    }

    #header.ie11-header .topsearch input::placeholder {
        font-size: 1.2em;
        padding-left: 0;
    }

    #header.ie11-header .topsearch button {
        border: none;
        background-color: transparent;
        margin-left: -30px;
    }

    #header.ie11-header .topsearch button i {
        font-size: 1.2em;
        background-color: transparent;
        color: var(--site-dark-grey-color);
    }

    #header.ie11-header .topsearch-submit {
        border: none;
        cursor: pointer;
        background-color: #fff;
    }

    #footer {
        grid-template-columns: auto;
        grid-gap: 15px;
    }

    #footer .grid-item-1, #footer .grid-item-2, #footer .grid-item-3, #footer .grid-item-4 {
        grid-column: 1 / span 6;
        padding: 0;
        text-align: center;
    }

    #footer .grid-item-2 {grid-area: 4 / span 6 ;}

    #footer .grid-item-3 {grid-area: 2 / span 6 ;}

    #footer .grid-item-4 {
        border-top: solid 1px var(--site-white-color);
        padding-top: 10px;
    }

    .ie11-footer .grid-item-1,
    .ie11-footer .grid-item-2,
    .ie11-footer .grid-item-3,
    .ie11-footer .grid-item-4 {
        width: 100%;
        text-align: center;
        border: none;
    }

    main, nav, section, aside {min-width: 100%;}

    .campaign-landing-title-text h1 {
        font-size: 2.5em;
        margin-bottom: 10px;
    }

    .campaign-landing-title-text h2 {font-size: 1.5em;}

    #contact-an-expert {
        left: 50%;
        transform: translate(-50%);
        text-align: center;
        min-width: 70%;
    }

    .contact-sticky-button {padding: 5px 10px;}

    .contact-sticky-button h3 {font-size: 1em;}

    .profile-grid {
        grid-template-columns: auto;
        grid-template-areas:
            "avatar"
            "contact-info"
            "bio"
            "credentials";
        grid-gap: 1rem;
    }

    .profile-avatar {justify-self: center;}

    .profile-credentials {
        border-right: none;
        padding: 0;}

    .promo-cta {
        display: block;
        margin: 3em 0;
    }

    .promo-cta-heading {
        max-width: 100%;
        padding-right: 0;
        margin-bottom: 1em;
    }

    .promo-cta-image {max-width: 100%;}

    .full-width {min-width: 100%;}

    .search-box-margin {margin-top: -.5em;}

    .header-icons {margin-top: 1em;}

    .richmedia-info-container {
        flex-direction: column;
        gap: 2em;
    }

    .richmedia-share-container {justify-content: flex-start;}

    .richmediaAside {margin-top: 2em;}

    .richmedia-main-img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    .mid-margin-clear {margin: 0;}
    .mid-margin-top-clear {margin-top: 0;}
    .mid-margin-right-clear {margin-right: 0;}
    .mid-margin-bottom-clear {margin-bottom: 0;}
    .mid-margin-left-clear {margin-left: 0;}
    .mid-margin-right-left-clear {
        margin-right: 0;
        margin-left: 0;
    }

    .mid-padding-clear {padding: 0;}
    .mid-padding-top-clear {padding-top: 0;}
    .mid-padding-right-clear {padding-right: 0;}
    .mid-padding-bottom-clear {padding-bottom: 0;}
    .mid-padding-left-clear {padding-left: 0;}
    .mid-padding-right-left-clear {
        padding-right: 0;
        padding-left: 0;
    }

    .margin-10-top-mob-only {margin-top: 1em;}
    .margin-10-bottom-mob-only {margin-bottom: 1em;}
    .margin-20-bottom-mob-only {margin-bottom: 2em;}

    .pad-10-top-mob-only {padding-top: 1em;}

    .pad-20-right-mob-10 {padding-right: 1em;}
    .pad-20-left-mob-10 {padding-left: 1em;}
    .margin-30-left-mob-0 {margin-left: 0;}
    .margin-40-left-mob-0 {margin-left: 0;}

    .text-left-mob-center, .text-right-mob-center {text-align: center;}

    img.icons {max-width: 20%;}
    img.mob-seventy {max-width: 70%;}
    img.mob-sixty {max-width: 60%;}
    img.mob-fifty {max-width: 50%;}
    img.mob-forty {max-width: 40%;}

    .mid-screen-none {display: none;}

    .mid-screen-only {display: block}

    .mid-screen-block {display: block}

    .mid-screen-60 {width: 60%;}

    .mid-screen-80 {width: 80%;}

    .mid-screen-100 {width: 100%;}

    .mid-screen-center {
        margin-left: auto!important;
        margin-right: auto!important;
    }

    .mid-screen-clear {clear: both;}

    .mid-screen-clear-right {float: none;}

    .mid-screen-border-none {border: none;}

    .mid-screen-border-bottom {border-bottom: solid 1px #CCCCCC;}

    /**typography for mobiles**/
    .rwd-line {display: block;}

    /**search box styling**/
    .topsearch {width: 100%; /**see styling in non-media queries**/}

    .mid-screen-small {font-size: .8em;}

    .width-13-32 {width: 32%;}
    .width-23-45 {width: 45%;} /* used for 3 column to two column project outputs on project webpages */
    .width-30-45 {width: 45%;}
    .width-15-50 {width: 50%;}
    .width-20-50 {width: 50%;}
    .width-25-50 {width: 50%;}
    .width-30-50 {width: 50%;}
    .width-30-80 {width: 80%;}
    .width-40-90 {width: 90%;}
    .width-65-90 {width: 90%;}

    .width-25-100 {width: 100%;}
    .width-50-100 {width: 100%;}
    .width-10-100 {width: 100%;}
    .width-13-100 {width: 100%;}
    .width-15-100 {width: 100%;}
    .width-20-100 {width: 100%;}
    .width-23-100 {width: 100%;}
    .width-25-100 {width: 100%;}
    .width-30-100 {width: 100%;}
    .width-30-28-100 {width: 100%;} /* used for 3 column project outputs on project webpages */
    .width-32-100 {width: 100%;} /* used for 3 column project outputs on project webpages */
    .width-33-100 {width: 100%;}
    .width-35-100 {width: 100%;}
    .width-40-100 {width: 100%;}
    .width-45-100 {width: 100%;}
    .width-47-100 {width: 100%;}
    .width-49-100 {width: 100%;}
    .width-50-100 {width: 100%;}
    .width-55-100 {width: 100%;}
    .width-60-100 {width: 100%;}
    .width-65-100 {width: 100%;}
    .width-70-100 {width: 100%;}
    .width-75-100 {width: 100%;}
    .width-80-100 {width: 100%;}
    .width-85-100 {width: 100%;}
    .width-90-100 {width: 100%;}

    .cta-flex-height {flex-direction: column;}
    .cta-flex-height div {margin-bottom: 1em;}
    .cta-flex-height div:last-child {margin-bottom: 0;}

    .padding-25-bottom-mob-only {padding-bottom: 2.5em;}
    .margin-25-bottom-mob-only {margin-bottom: 2.5em;}

    .hero-container {background-color: var(--site-white-color);}

    .hero-image {
        min-height: 250px;
        padding-top: 1em;
        background-attachment: unset;
        background-color: var(--site-dark-grey-color);
    }

    .hero-text {padding: 1em;}

    .hero-text h1 {
        font-size: 1.9em;
        margin-top: 0;
        margin-bottom: 0.5em;
    }

    .hero-button {
        font-size: 1.6em;
        font-weight: bold;
        margin: 0.2em auto;
    }

    .masonry .masonry-col {padding: 0;}

    .masonry-col {
        flex: none;
        width: 100%;
    }

    .profile-contact > div {
        width: 100%;
        display: block;
        text-align: center;
    }

    .event-card {margin: 30px 0 0 0;}

    .event-card-seminar {margin: 20px 0 20px 0;}

    .event-card-seminar-info {padding: 10px;}

    .event-card-cta h3 {min-height: 1.3em}

    .event-banner {margin: 15px 0;}

    .event-banner-text {width: 100%;}

    .event-banner-button {
        width: inherit;
        margin: 40px auto 0 auto;
        display: block;
        position: relative;
        text-align: center;
    }

    .event-banner-button > .action-button-ghost {float: none;}

    .event-banner-button .action-button-ghost a {padding: 8px 30px!important;}

    .process-icon-container {flex-direction: column;}

    .process-icon-item-bar {display: none;}

    .height-auto {height: auto;}

    .training-course-details {width: 100%;}

    .training-events-table tr td:first-child {width: 40px;}

    .table {min-width: 100%;}

    .column-flex-mobile {
        display: flex;
        flex-direction: column;
    }

    .column-flex-reverse-mobile {
        display: flex;
        flex-direction: column-reverse;
    }

    .row-flex-reverse-mobile {
        display: flex;
        flex-direction: row-reverse;
    }

    .flex-row-mobile-column-reverse {flex-direction: column-reverse;}

    .flex-item-grow-2 {flex-grow: 1;}
    .flex-item-grow-3 {flex-grow: 1;}
    .flex-item-grow-4 {flex-grow: 1;}

    .flex-item-order-1-mobile {order: 0;}

    .form, .form.smallform {padding: 1rem;}

    .form-radio-likert-container {
        flex-direction: row;
        gap: 1rem;
    }
    .form-radio-likert-container {gap: 0.5em;}

    .cbri-tabs {
        padding: 12px 18px;
        font-size: 16px;
    }
}

/***** MID SIZED SCREENS AND MOBILE ENDS **********************************************************************************************************************/


/***** MOBILE ONLY STARTS *************************************************************************************************************************************/
@media only screen and (max-width: 420px)  {

    #header .grid-item-1 img {max-width: 50px;}

    #header .grid-item-2 {
        grid-area: 2 / span 2;
        max-width: 85%;
        margin-bottom: -60px;
        margin-left: 45px;
        z-index: 210;
    }

    #header .grid-item-2 div:first-child a {
        border-right: none;
        margin-right: 5px;
        margin-top: 3px;
    }

    #header .grid-item-2 div:last-child {
        min-width: 100px;
        max-width: 100%!important;
        height: 35px;
        margin-top: 5px;
        background-color: var(--site-white-color);
        float: left;
    }

    #header .grid-item-2 div:last-child form a {display: none;}

    #header.ie11-header .grid-item-2 {
        display: none;
    }

    #header.ie11-header .grid-item-3 {
        margin-top: -50px;
    }

    #header.ie11-header .topsearch {
        display: inline-block;
        margin-right: 20px;
    }

    .topsearch {
        grid-template-columns: auto 1fr 1fr;
        margin-top: 3px;
    }

    .topsearch a i {color: var(--primary-purple-color);}

    .topsearch-query {
        min-width: 100%;
        box-shadow: none;
        margin-top: 5px;
    }

    .topsearch input::placeholder {
        font-size: 0.8em;
        padding-left: 10px;
    }

    .topsearch button {padding-top: 5px;}

    .height-auto {height: auto;}

    .mob-none {display: none;}

    .mob-small {font-size: .7em;}

    .mob-100 {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding: 0;}

    .width-30-50 {width: 50%;}

    .mob-only {display: block;}

    .inline-block-mob-block {display: block;!important;}

    .mob-clear-float {float: none;}

    .hero-text h1 {font-size: 1.4em;}

    .hero-button {
        font-size: 1.5em;
        padding: 0.5em;
    }

    .data-filter-item-image-box img {
        min-height: 100px;
        object-fit: cover;
    }

    .event-card {
        width: 100%;
        padding: 10px;
    }

    .vcard-container {
        border: none;
    }

    #meetings .event-card-button > div {width: 100%;}

    span .discount-icon {padding: 8px 0 0 0.5px;}

    .training-course-details {width: 100%;}

    input[type='text'],
    input[type='email'],
    input[type='number'],
    textarea {font-size: 16px;
    }

}
/***** MOBILE ONLY ENDS ***************************************************************************************************************************************/

/***************************************************************************************************************************************************************
****************************************************************************************************************************************************************
***** RESPONSIVE ENDS *****************************************************************************************************************************************/