body {
    display: block;
    margin: 0px;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #0a0a0a;
    font-family: "Avenir Next", sans-serif;
}

a { 
    font-weight: 500;
    color: #333333;
    text-decoration: underline;
}

a:hover { 
    text-decoration: none;
    color: #4D4D4D;
}

h1 {
    font-family: "Avenir Next", sans-serif;
    font-weight: bold; 
    font-size:  2.5rem;
    line-height: 1.2;
    color: #0a0a0a;
}

.h1-large {
    font-family: "Avenir Next", sans-serif;
    font-weight: bold; 
    font-size:  48px;
    line-height: 1.2;
    color: #0a0a0a;
}

.h1-small {
    font-family: "Avenir Next", sans-serif;
    font-weight: bold; 
    font-size:  32px;
    line-height: 1.2;
    color: #0a0a0a;
}

h2 {
    font-family: "Avenir Next", sans-serif;
    font-weight: bold; 
    font-size:  28px;
    line-height: 1.2;
    color: #0a0a0a;
}

.h2-large {
    font-family: "Avenir Next", sans-serif;
    font-weight: bold; 
    font-size:  32px;
    line-height: 1.2;
    color: #0a0a0a;
}

.h2-small {
    font-family: "Avenir Next", sans-serif;
    font-weight: bold; 
    font-size:  24px;
    line-height: 1.2;
    color: #0a0a0a;
}

h3 {
    font-family: "Avenir Next", sans-serif;
    font-weight: bold; 
    font-size:  1.25rem;
    line-height: 1.15;
    color: #0a0a0a;
}

h4 {
    font-family: "Avenir Next", sans-serif;
    font-weight: bold; 
    font-size:  1.125rem;
    line-height: 1.15;
    color: #0a0a0a;
}

h5 {
    font-family: "Avenir Next", sans-serif;
    font-weight: bold; 
    font-size:  1rem;
    line-height: 1.15;
    color: #0a0a0a;
}

h6 {
    font-family: "Avenir Next", sans-serif;
    font-weight: bold; 
    font-size:  0.75rem;
    line-height: 1.15;
    color: #0a0a0a;
}

.short-title {
    text-transform: uppercase;
}

.intro {
    font-family: "Avenir Next", sans-serif;
    font-size: 22px;
    line-height: 35.2px;
    color: #4d4d4d;
    font-weight: 600;
}

ul {
    list-style-type: disc;
    padding-left: 0.25rem;
    margin-bottom: 0.5rem;
}

ol {
    list-style-type: decimal;
    padding-left: 0.25rem;
    margin-bottom: 0.5rem;
}

.colour-green {
    color: #a9c47f;
}

.colour-blue {
    color: #8bd3e6;
}

.colour-teal {
    color: #6bcaba;
}

.colour-purple {
    color: #b288b9;
}

.colour-orange {
    color: #e6a65d;
}

.colour-warm-grey {
    color: #d0c7c4;
}

.colour-cool-grey {
    color: #cccccc;
}

.colour-red {
    color: #e30613;
}

.colour-yay {
    color: #82BF58;
}

.colour-boo {
    color: #DF6451;
}

.colour-wait {
    color: #F1CE6C;
}

.colour-okay {
    color: #629EDA;
}

.swatch-green {
    background-color: #dde7cc;
}

.swatch-blue {
    background-color: #d1edf5;
}

.swatch-teal {
    background-color: #c4eae3;
}

.swatch-purple {
    background-color: #e0cfe3;
}

.swatch-orange {
    background-color: #f5dbbe;
}

.swatch-cool-grey {
    background-color: whitesmoke;
}

.tint-green {
    background-color: #879d66;
}

.tint-blue {
    background-color: #6fa9b8;
}

.tint-teal {
    background-color: #56a295;
}

.tint-purple {
    background-color: #8e6d94;
}

.tint-orange {
    background-color: #b8854a;
}

.tint-white {
    background-color: white;
}

.shadow-1 {
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.16);
}

.shadow-2 {
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.16);
}

.shadow-3 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.16);
}

.shadow-4 {
    box-shadow: 0 12px 24px 0 rgba(0,0,0,0.16);
}

.callout {
    margin: 2rem 0 2rem 0;
    border-radius: 0.125rem;
    background-color: white;
    color: #4d4d4d;
    border: none;
    padding: 1.5rem 1rem;
    border-left: 0.5rem solid #8bd3e6;
}

.callout-discount {
    margin: 2rem 0 2rem 0;
    border-radius: 0.125rem;
    background-color: #DFEBF7;
    color: #4d4d4d;
    border: none;
    padding: 1.5rem 1rem;
    border-left: 0.5rem solid #8bd3e6;
}

.callout-error {
    margin: 2rem 0 2rem 0;
    border-radius: 0.125rem;
    background-color: white;
    color: #4d4d4d;
    border: none;
    padding: 1.5rem 1rem;
    border-left: 0.5rem solid #df6451;
}

button,
.button-primary-alpha {
    background: #e30513;
    border: 1px solid #e30513;
    color: white;
    font-family: "Avenir Next", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    padding: 0.66rem 2rem;
    border-radius: 2px;
    display: inline-block;
    margin-bottom: 1rem;
    text-decoration: none;
    transition: all 0.25s;
    text-align: center;
    cursor: pointer;
}

button:hover,
.button-primary-alpha:hover {
    background: #fb535d;
    border: 1px solid #e30513;
    color: white;
    opacity: 1;
    text-decoration: none;
}

button:active,
button:focus,
.button-primary-alpha:active,
.button-primary-alphafocus {
    border: 1px solid #e30513;
    background: white;
    color: black;
    text-decoration: none;
}

/* form error message */
/*form .error {
    padding: 1rem;
    border-left: 0.5rem solid #df6451;
    width: 100%;
    background: #f9e0dc;
} */

/* form validation error when nothing has been input */
/*form input {
    border-color: #df6451;
}*/

/* form validation error when input is incorrect */
/*form input .error {
    border-color: #df6451;
    background-color: #f9e0dc;
    display: block;
    padding: 0.5rem 1rem;
    margin: calc(-1rem - 1px) 0 1rem;
    border: 1px solid #cccccc;
    border-top: 0;
    border-radius: 0.125rem;
    font-family: "Avenir Next", sans-serif;
    font-size: 0.75rem;
    color: #4d4d4d;
    line-height: 1.35;
}
*/

.button-primary-beta {
    border: 1px solid #e30513;
    background: white;
    color: black;
    font-family: "Avenir Next", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    padding: 0.66rem 2rem;
    border-radius: 2px;
    display: inline-block;
    margin-bottom: 1rem;
    text-decoration: none;
    transition: all 0.25s;
    text-align: center;
    cursor: pointer;
}

.button-primary-beta:hover {
    background: #fb535d;
    border: 1px solid #e30513;
    color: white;
    opacity: 1;
    text-decoration: none;
}

.button-primary-beta:active,
.button-primary-beta:focus {
    border: 1px solid #e30513;
    background: white;
    color: black;
    text-decoration: none;
}

.button-secondary-alpha {
    background: black;
    border: 1px solid black;
    color: white;
    font-family: "Avenir Next", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    padding: 0.66rem 2rem;
    border-radius: 2px;
    display: inline-block;
    margin-bottom: 1rem;
    text-decoration: none;
    transition: all 0.25s;
    text-align: center;
    cursor: pointer;
}

.button-secondary-alpha:hover {
    background: #333333;
    border: 1px solid black;
    color: white;
    opacity: 1;
    text-decoration: none;
}

.button-secondary-alpha:active,
.button-secondary-alpha:focus {
    border: 1px solid black;
    background: white;
    color: black;
    text-decoration: none;
}

.button-secondary-beta {
    border: 1px solid black;
    background: white;
    color: black;
    font-family: "Avenir Next", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    padding: 0.66rem 2rem;
    border-radius: 2px;
    display: inline-block;
    margin-bottom: 1rem;
    text-decoration: none;
    transition: all 0.25s;
    text-align: center;
    cursor: pointer;
}

.button-secondary-beta:hover {
    background: #333333;
    border: 1px solid black;
    color: white;
    opacity: 1;
    text-decoration: none;
}

.button-secondary-beta:active,
.button-secondary-beta:focus {
    border: 1px solid black;
    background: white;
    color: black;
    text-decoration: none;
}

.button-utility {
    background: white;
    border: 1px solid #cccccc;
    color: #666666;
    font-family: "Avenir Next", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    padding: 0.66rem 2rem;
    border-radius: 2px;
    display: inline-block;
    margin-bottom: 1rem;
    text-decoration: none;
    transition: all 0.25s;
    text-align: center;
    cursor: pointer;
}

.button-utility:hover {
    background: #d1edf5;
    border: 1px solid #8bd3e6;
    color: #666666;
}

.button-utility:active,
.button-utility:focus {
    border: 1px solid #cccccc;
    background: white;
    color: #666666;
}

.button-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: black;
    text-decoration: none;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.button-ghost:hover {
    text-decoration: underline;
    color: #333333;
}

.button-ghost:focus,
.button-ghost:active {
    text-decoration: underline;
    color: #333333;
}

.callout {
    border: none;
    border-left: 0.5rem solid #8bd3e6;
    padding: 1.5rem 1rem;
    margin-bottom: 2rem;
}

.callout-warning {
    border: none;
    border-left: 0.5rem solid #f1ce6c;
    padding: 1.5rem 1rem;
    margin-bottom: 2rem;
}

.site-hero {
    padding: 20px;
}

.site-middle {
    padding: 20px;
    background-color: #F5F5F5;
    min-height: calc(100vh - 21rem);
    width: 100%;
    box-sizing: border-box;
}

.site-hero .hero-inner,
.site-middle .middle-inner {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    position: static;
    width: 100%;
    display: flex;
    justify-content: center;
}

.site-hero .hero-inner .hero-content {
    display: flex;
    gap: 2rem;
    max-width: 1220px;
    width: 100%;
    padding: 1.34em 0;
}

.site-hero .hero-inner .hero-content .hero-information {
    width: 60%
}

.site-hero .hero-inner .hero-content .hero-search {
    width: 40%;
    background: white;
    border-radius: 2px;
}

.site-hero .hero-inner .hero-content .hero-search-content {
    padding: 2rem;
}

.site-middle .middle-inner .middle-content {
    max-width: 1220px;
    width: 100%;
    display: grid;
    margin-bottom: 4rem;
}

.middle-content-heading-container {
    text-align: center;
    max-width: 40rem;
    justify-self: center;
}

.middle-content-heading {
    display: inline-block;
    position: relative;
}

.middle-content-heading:before,
.middle-content-heading:after {
    content: "";
    position: absolute;
    height: 5px;
    border-bottom: 1px solid black;
    top: 35%;
    width: 5rem;
}

.middle-content-heading:before {
    right: 100%;
    margin-right: 1rem;
}

.middle-content-heading:after {
    left: 100%;
    margin-left: 1rem;
}

.middle-content-paragraph {
    margin: 0px;
    color: #4D4D4D;
}

.category-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 2rem -2rem 2rem 0;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 2rem;
}

.call-to-action-container {
    display: flex;
    gap: 2rem 2rem;
    flex-wrap: wrap;
    -webkit-box-pack: unset;
    -ms-flex-pack: unset;
    justify-content: unset;
    margin: unset;
}

.call-to-action-tile-wide {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.call-to-action-hr {
    width: 5rem;
    text-align: left;
    margin-left: 0;
    border: none;
    border-bottom: 1px solid #0a0a0a;
}

.call-to-action-hr-center {
    width: 5rem;
    border: none;
    border-bottom: 1px solid #0a0a0a;
}

.call-to-action-tile {
    width: calc(50% - 1rem);
    position: relative;
    overflow: hidden;
}

.call-to-action-card {
    background: white;
    margin: 2rem 0;
    width: 50%;
    max-width: 50%;
    padding: 2rem 1rem 1.5rem;
    position: relative;
    border-radius: 2px;
}

.call-to-action-card-wide {
    background: white;
    margin: 2rem 0;
    width: 46.2%;
    max-width: 46.2%;
    padding: 2rem 1rem 1.5rem;
    position: relative;
    border-radius: 2px;
}

.call-to-action-img {
    object-fit: cover;
    position: absolute;
    top: 0px;
    right: 0px;
    max-width: 66%;
    width: 66%;
    height: 100%;
    object-position: 50% 50%;
}

.call-to-action-img-wide {
    object-fit: cover;
    position: absolute;
    top: 0px;
    right: 0px;
    max-width: 624px;
    width: 66%;
    height: 100%;
    object-position: 50% 50%;
}

.product-content-type {
    display: inline-block;
    margin-right: 0.5rem;
    padding-left: 1rem;
    position: relative;
    font-family: "Avenir Next", sans-serif;
    font-size: 0.75rem;
    line-height: 1.3;
    font-weight: normal;
}

.product-content-type:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 1px;
    height: 0.8rem;
    width: 0.8rem;
    line-height: 1.3;
    background: no-repeat;
    background-size: contain;
    background-image: url(../images/icaew-layout.svg);
}

.product-date {
    display: inline-block;
    padding-left: 1rem;
    position: relative;
    font-family: "Avenir Next", sans-serif;
    font-size: 0.75rem;
    line-height: 1.3;
    font-weight: normal;
}

.product-date:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 1px;
    height: 0.75rem;
    width: 0.75rem;
    line-height: 1.3;
    background: no-repeat;
    background-size: contain;
    background-image: url(../images/icaew-calendar.svg);
}

.product-location {
    display: inline-block;
    margin-right: 0.5rem;
    padding-left: 1rem;
    position: relative;
    font-family: "Avenir Next", sans-serif;
    font-size: 0.75rem;
    line-height: 1.3;
    font-weight: normal;
}

.product-location:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 2px;
    height: 0.75rem;
    width: 0.75rem;
    background-size: contain;
    background-image: url(../images/icaew-pin.svg);
}

.bottom-call-to-action-container {
    text-align: center;
    display: grid;
    border-radius: 2px;
}

.bottom-call-to-action {
    text-align: center;
    max-width: 51rem;
    justify-self: center;
    padding: 2rem 1rem 1.5rem;
}

.home-class .product-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -2rem 0 0;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 2rem;
}

.category-tile .category-img,
.product-tile .product-image {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 16/9;
    border-radius: 2px 2px 0 0;
}

.category-tile .category-card,
.product-tile .product-card {
    background-color: white;
    padding: 0rem 1rem;
}

.product-tile .product-card .short-title {
    margin-bottom: 0px;
}

.category-tile .category-card .category-title,
.product-tile .product-card .product-title {
    margin: 0.75rem 0;
}

.product-tile .product-card ul {
    margin: 0px;
}

.category-tile .category-card .category-description,
.product-tile .product-card .product-description {
    font-family: "Avenir Next", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #4d4d4d;
    margin: 0.5rem 0 1rem 0;
}

.category-tile,
.product-tile {
    max-width: calc(25% - 2rem);
    min-width: calc(25% - 2rem);
    background-color: white;
    -webkit-transition: all all 0.25s;
    transition: all 0.25s;
    border-radius: 2px;
}

.category-tile:hover,
.product-tile:hover {
    -webkit-transition: all all 0.25s;
    transition: all 0.25s;
    -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16);
}

.site-middle .middle-inner .middle-content h1 {
    margin: 4rem 0px 0px 0px;
    width: 100%;
}

.middle-content .intro {
    margin: 1rem 0 0;
}

.call-to-action-card .button-primary-beta,
.call-to-action-card-wide .button-primary-beta {
    width: 100%;
    box-sizing: border-box;
}

.category-container .category-tile {
    display: block;
}

.category-container .only-1-cat {
    display: none;
}

#product-list-add-multiple-form {
    margin-top: 2rem;
    width: 100%;
    overflow-x: scroll;
}

.middle-content .page-block {
    margin-top: 2rem;
    width: 100%;
}

.categories-class .category-container {
    margin-top: 2rem;
}

.all-courses-class .breadcrumb {
    visibility: hidden;
}

.bottom-home-banner-container {
    margin-top: 2rem;
    border-radius: 2px;
}

.bottom-home-banner-container #hero-image {
    height: auto;
    width: auto;
}

.bottom-home-banner-container #hero-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 2px;
}

@media screen and (max-width: 960px) {
    .site-hero .hero-inner .hero-content {
        flex-direction: column;
    }

    .site-hero .hero-inner .hero-content .hero-information,
    .site-hero .hero-inner .hero-content .hero-search {
        width: 100%;
    }

    .call-to-action-tile {
        width: 100%;
    }

    .call-to-action-card-wide {
        width: 50%;
        max-width: 50%;
    }

    .category-tile,
    .product-tile {
        max-width: calc(50% - 2rem);
        min-width: calc(50% - 2rem);
    }

    .accelerator-table-wrapper table {
        font-size: 90%;
    }
}

@media screen and (max-width: 660px) {
    .category-tile,
    .product-tile {
        max-width: calc(100% - 2rem);
        min-width: calc(100% - 2rem);
    }

    #product-list-add-multiple-form .page-products-list input[type="submit"] {
        width: 100%;
        float: none;
    }
}

@media screen and (max-width: 480px) {
    .site-middle {
        padding: 20px;
        background-color: #F5F5F5;
        min-height: calc(100vh - 21rem);
        width: 100%;
        box-sizing: none;
    }
}

/* requires table layouts */