/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
     Base styles: opinionated defaults
     ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
     Browser Upgrade Prompt
     ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
     Author's custom styles
     ========================================================================== */

:root {
  --main-accent-color: 12, 113, 185;
}

/* html,body {height:100%;} */
html {box-sizing: border-box;}
*, *::before, *::after {box-sizing: inherit;}
.wrapper {width: 75rem;margin: 0 auto;}
.wrapper::after {clear: both; display: table; content: "";}
.mobile-menu {display: none;}
/* body {
    width: 100%;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 1em;
    color: #444;
    overflow-x: hidden;
}
*/
.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}
body.modal-open {
    overflow: hidden;
    padding-right: 15px;
}
.preloader {
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #FFF;
}
#placer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1000%;
    background: url("../img/des.jpg") no-repeat;
    background-size: contain;
    z-index: -1;
    opacity: 0.4;
    display: none;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-weight: 400;
    color: #444;
}
p {
    line-height: 1.4;
}

#gmap {
    width: 100%;
    height: 25vw;
}

.scrolltotop {
    display: none;
    position: fixed;
    bottom: 40px;
    right: 40px;
    padding: 15px;
    border-radius: 10px;
    color: white;
    margin: 0px;
    background: #000;
    transition: all .2s ease-out;
    text-decoration: none;
    opacity: 0.7;
}
.scrolltotop:hover {
    opacity: 1;
}
.scrolltotop i{
    margin: 0px;
    padding: 0px;
}

.global-overlay {
    display: none;
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.6;
    cursor: auto;
}
.modal {
    display: none;
}
body.blurred {
    overflow: hidden;
}
body.blurred header > *:not(nav), body.blurred main, body.blurred footer {
    filter: url('#blur');
}
.overlay-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
}
.overlay-close::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 20px;
    content: "X";
    color: #95197D;
    font-weight: 500;
    font-size: 20px;
    cursor: pointer;
}
.parallax-scroll {
    position: relative;
    background-color: #000;
}
.parallax-scroll::after {
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    opacity: 0.3;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
}
.parallax-scroll::before {
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    opacity: 0.1;
}
.parallax-scroll .wrapper {
    position: relative;
    z-index: 2;
}
.text-field::after {
    content: " ";
    display: table;
    clear: both;
}
.generic-container::after {
    content: " ";
    clear: both;
    display: table;
}

form.standard {
    text-align: left;
    margin: 20px 0;
}
form.standard input,
form.standard textarea {
    width: 100%;
    margin: 0 0 25px 0;
    border: 1px solid #DDD;
    background: #FFF;
    padding: 20px;
    font-size: 18px;
    height: 70px;
}
form.standard textarea {
    height: 260px;
}
form.standard input[type=text] {
    width: 100%;
    float: left;
}
form.standard input[type=checkbox] {
    width: 25px;
    height: 25px;
    float: left;
    clear: left;
    margin: 0 25px 0 0;
}
form.standard .checkbox {
    margin: 0 0 25px 0;
}
form.standard .checkbox::after {
    content: "";
    display: table;
    clear: both;
}
form.standard .checkbox label {
    float: left;
}
form.standard input[type="submit"] {
    float: right;
    clear: both;
    width: 200px;
    background: #0054A6;
    color: #FFF;
    cursor: pointer;
    border: 0;
}
form.standard input[type=submit]:hover {
    background: #041a2f;
}
form.standard select {
    width: 100%;
    margin: 0 0 25px 0;
    border: 1px solid #DDD;
    background: #FFF;
    padding: 0 20px;
    font-size: 16px;
    height: 70px;
    line-height: 70px;
}
form.standard input.error,
form.standard textarea.error,
form.standard select.error {
    background: #912B45;
    color: #FFF;
}
form.standard label, form.standard p {
    text-align: left;
    font-size: 20px;
    display: block;
    padding: 0 0 5px;
}
form.standard label.error {
    display: none !important;
}
form.standard label.error + span.label {
    color: #912B45;
}

form.contact-form div {
    margin: 10px 0;
}
form.contact-form label.error {
    display: none !important;
}
form.contact-form .button {
    margin: 20px 0 0;
}


header.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 35px 50px;
    /* transition-duration: 300ms; */
}
header::after {
    display: table;
    clear: both;
    content: " ";
}
.header-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 35px 50px;
    background: rgba(121, 138, 181, 1);
    border-bottom: 1px solid #FFF;
}
.site-logo {
    float: left;
    width: 200px;
    transition-duration: 300ms;
}
.site-logo a {
    position: relative;
    display: block;
    height: 0;
    padding: 33.33333% 0 0 0;
}
.site-logo img {
    width: 100%;
}
.site-logo a::before, .site-logo a::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../img/logo.png') top left / contain no-repeat;
    transition-duration: 300ms;
}
.site-logo a::before {
}
.site-logo a::after {
    background-image: url('../img/logo-glyph-only.png');
}
header.site-header.smaller {
    padding: 20px 50px;
}
header.site-header.smaller .site-logo {
    margin: -10px 0 0 0;
    width: 150px;
}
header.site-header.smaller .site-logo a::before {
    opacity: 0;
}

nav#site-nav ul {
    float: right;
    list-style: none;
    padding: 0;
    margin: 0;
}
nav#site-nav ul li {
    display: inline-block;
}
nav#site-nav ul li a {
    display: inline-block;
    font-size: 0.9375rem;
    text-decoration: none;
    text-align: center;
    margin: 0 10px;
    padding: 5px 5px 3px;
    color: #FFF;
    font-weight: 600;
    transition-duration: 300ms;
}
nav#site-nav ul li:last-child {
}
nav#site-nav ul li:last-child a {
    padding-right: 0px;
}
nav#site-nav ul li a:hover {
    border-bottom: 1px solid #FFF;
}

.basket a {
    position: relative;
    float: right;
    color: #FFF;
    height: 29px;
    margin: 3px 0 0 5px;
    padding: 0 10px 0 35px;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    line-height: 29px;
    cursor: pointer;
    text-decoration: none;
}
.basket a::before {
    content: '\f07a';
    font-family: 'Font Awesome 5 Free', sans-serif;
    position: absolute;
    left: 10px;
    bottom: 0;
    color: #FFF;
    font-size: 17px;
    font-weight: 900;
    z-index: 1;
}
.basket a:hover {
    background: rgba(255, 255, 255, 0.4);
}

.search {
    position: relative;
    float: right;
    color: #FFF;
}
.search input[type=text] {
    height: 29px;
    margin: 3px 0 0 25px;
    padding: 0 30px 0 10px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 14px;
    line-height: 26px;
    color: #FFF;
    width: 60px;
    transition-duration: 300ms;
}
.search input[type=text]:focus, .search input[type=text]:hover {
    width: 150px;
    background: rgba(255, 255, 255, 0.7);
    color: #444;
}
.search input[type=submit] {
    position: relative;
    top: 0;
    right: 25px;
    background: none;
    border: none;
    padding: 0;
    line-height: 29px;
    color: #FFF;
}
.site-header .account {
    position: relative;
    float: right;
    color: #FFF;
    height: 29px;
    margin: 3px 0 0 25px;
    padding: 0 25px 0 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 29px;
    cursor: pointer;
}
.site-header .account::before {
    content: '\f2f6';
    font-family: 'Font Awesome 5 Free', sans-serif;
    position: absolute;
    right: 0;
    bottom: 0;
    color: #FFF;
    font-size: 17px;
    font-weight: 900;
    z-index: 1;
    transition-duration: 300ms;
}
.site-header .account:hover::before {
    right: -5px;
}
.site-header .account.triggered::before {
    transform: rotate(90deg);
}
.site-header .account a {
    color: #FFF;
    text-decoration: none;
}
.strapline {
    float: right;
    color: #FFF;
    display: none;
}
.strapline a {
    color: #FFF;
}

@keyframes Gradient {
    0%   {background: #ED145B;}
    33%  {background: #5C2E91;}
    66%  {background: #0C71B9;}
    100% {background: #50A674;}
}
footer.site-footer {
}
footer.site-footer .container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
}
footer.site-footer .primary {
    position: relative;
    color: #FFF;
    font-size: 0.875rem;
    line-height: 1.6;
    overflow: hidden;
}
footer.site-footer .primary::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    /* background-image: linear-gradient(245deg,#ED145B,#5C2E91,#0C71B9,#50A674); */
    /* background-size: 100%; */
    animation: Gradient 60s linear infinite;
    animation-direction: alternate;
    z-index: 0;
}
footer.site-footer .primary .title, footer.site-footer .primary ul li:first-child {
    margin: 0 0 20px;
    font-weight: 600;
}
footer.site-footer .primary a {
    display: block;
    opacity: 0.8;
}
footer.site-footer .primary a:hover {
    opacity: 1;
}
footer.site-footer .primary ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
footer.site-footer .primary ul li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
footer.site-footer .primary a , footer.site-footer .primary ul li a {
    color: #FFF;
    text-decoration: none;
}

footer.site-footer .primary ul.social-links {
    margin: 20px 0 0;
}
footer.site-footer .primary ul.social-links li {
    margin: 0;
    list-style: none;
    display: inline-block;
}
footer.site-footer .primary ul.social-links li a {
    display: inline-block;
    width: 20px;
    height: 20px;
    text-indent: 999px;
    overflow: hidden;
}
footer.site-footer .primary ul.social-links li a.googleplus {
    background-image: url('../img/google.png');
}
footer.site-footer .primary ul.social-links li a.linkedin {
    background-image: url('../img/linkedin.png');
}
footer.site-footer .primary ul.social-links li a.pinterest {
    background-image: url('../img/pinterest.jpg');
}
footer.site-footer .primary ul.social-links li a.twitter {
    background-image: url('../img/twitter.png');
}
footer.site-footer .primary ul.social-links li a.youtube {
    background-image: url('../img/youtube.png');
}
footer.site-footer .primary ul.social-links li a.facebook {
    background-image: url('../img/facebook.png');
}

footer.site-footer .secondary {
    padding: 20px;
    border-top: 1px solid #CCC;
    background: #FFF;
    color: #999;
    font-size: 0.6875rem;
}
footer.site-footer .secondary .container {
    max-width: 100%;
    padding: 0;
    align-items: center;
}
footer.site-footer .secondary .footer-block {
}
footer.site-footer .secondary .footer-block:nth-of-type(2) {
    text-align: center;
}
footer.site-footer .secondary .footer-block:nth-of-type(3) {
    text-align: right;
}
footer.site-footer .secondary .container div, footer.site-footer .secondary ul {
    display: inline-block;
}
footer.site-footer .secondary ul {
    margin: 0 0 0 10px;
    padding: 0;
    list-style: none;
}
footer.site-footer .secondary ul li {
    margin: 0 5px;
    padding: 0;
    list-style: none;
    display: inline-block;
}
footer.site-footer .secondary ul li a {
    color: #999;
    text-decoration: none;
}
footer.site-footer .secondary ul li a:hover {
    color: #666;
}

.correl8-logo {
    width: 200px;
}


section.banners {
    position: relative;
    min-height: 43.5vw;
    z-index: 2;
}
section.banners img {
    width: 100%;
}
section.banners .banner-carousel {
    margin: 0;
    padding:  0;
    list-style: none;
}
section.banners .banner-carousel li {
    position: relative;
}
section.banners .banner-carousel li img {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    height: auto;
}
section.banners .banner-carousel li .banner-content {
    position: relative;
    padding: 180px 0 0;
    z-index: 1;
}
section.banners .banner-carousel li .banner-content h1 {
    margin: 0;
    font-weight: 600;
    font-size: 5.125rem;
    line-height: 1;
    color: #FFF;
}
section.banners .banner-carousel li .banner-content div {
    margin: 40px 0 45px;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1;
    color: #FFF;
}
section.banners .banner-carousel .slick-prev, section.banners .banner-carousel .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 70px;
    height: 70px;
    opacity: 0.7;
    border: 2px solid #FFF;
    background-image: url(../images/arrow-right.svg);
    background-size: 30%;
    background-position: center center;
    background-repeat: no-repeat;
    transition-duration: 600ms;
}
section.banners .banner-carousel .slick-prev:hover, section.banners .banner-carousel .slick-next:hover {
    background-color: #0054A6;
    opacity: 1;
    border-color: #0054A6;
}
section.banners .banner-carousel .slick-prev::before, section.banners .banner-carousel .slick-next::before {
    content: "";
}
section.banners .banner-carousel .slick-prev {
    left: 20px;
    transform: translateY(-50%) rotate(180deg);
}
section.banners .banner-carousel .slick-next {
    right: 20px;
}
section.banners p {
    line-height: inherit;
    margin: 0;
    padding: 0;
}




form.course-filter {
    position: relative;
    margin: 30px auto 0;
    padding: 35px 50px;
    z-index: 1;
    background: #50A674;
    color: #FFF;
    user-select: none;
    box-shadow: 20px 20px 0 0 rgba(0,0,0,0.1);
}
form.course-filter.overlay {
    margin: 20px auto;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    box-shadow: none;
}
form.course-filter label {
    float: left;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 40px;
}
form.course-filter input[type=submit] {
    float: right;
    height: 40px;
    border:  none;
    background: rgba(12, 113, 185, 0.8);
    color: #FFF;
    box-shadow: 0px 1em 2em -1.5em rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    line-height: 40px;
    padding: 0 40px;
    cursor: pointer;
}
form.course-filter input[type=submit]:hover {
    background: rgba(12, 113, 185, 1);
}


.select, select {
    position: relative;
    float: left;
    display: none;
    margin: 0 0 0 40px;
    width: 330px;
    height: 40px;
    border-bottom: 0px;
    box-shadow: 0px 1em 2em -1.5em rgba(0, 0, 0, 0.5);
    z-index: 1;
}
select.visible {
    display: block;
    margin: 5px 0 0 0;
    padding: 7px 15px;
    width: 100%;
    border:  1px solid #CCC;
    border-radius: 4px;
    float: none;
}
.select > i.toggle {
    position: absolute;
    z-index: 4;
    right: 20px;
    top: 0;
    line-height: 40px;
    color: #444;
    pointer-events: none;
}
.select .title,
.select .placeholder {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 1);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    line-height: 20px;
    font-size: 1rem;
    font-weight: 400;
}
.select > input {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    cursor: pointer;
}
.select > input:checked ~ i.toggle.icon-arrow-down {
    display: none;
}
.select > input:checked ~ i.toggle.icon-arrow-up {
    display: block;
}
.select > input:checked ~ i.toggle.icon-arrow-down {
    display: none;
}
.select > input:checked ~ span.placeholder {
    border-radius: 3px 3px 0 0;
}
.select > input:checked ~ div.options label.option > span.title {
    display: block;
}
.select > input:not(:checked) {
    z-index: 4;
}
.select > input:not(:checked) ~ div.options label.option > span.title {
    display: none;
}
.select > input:not(:checked) ~ i.toggle.icon-arrow-up {
    display: none;
}
.select > input:not(:checked) ~ i.toggle.icon-arrow-down {
    display: block;
}
.select > input:disabled {
    cursor: no-drop;
}
.select > span.placeholder {
    position: relative;
    z-index: 0;
    display: inline-block;
    width: 100%;
    color: #999;
    border-top: 0px;
    border-radius: 3px;
}
.select .options {
    /* position: relative; */
    max-height: 300px;
    overflow-y: auto;
    /* z-index: 5; */
}
.select div.options label.option {
    display: block;
    overflow: hidden;
    padding: 0;
    z-index: 1;
    width: 100%;
    color: #444;
    transition: all 1s ease-out;
}
.select div.options label.option span.title {
    position: relative;
    z-index: 5;
    /* transition: background .3s ease-out; */
}
.select div.options label.option span.title i.icon {
    padding-right: 8px;
    color: #92a8d1;
}
.select div.options label.option span.title:hover, .select div.options label.option.selected span.title {
    background: rgba(12, 113, 185, 1);
    color: #FFF;
    /* box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1); */
}
.select div.options label.option input {
    display: none;
}
.select div.options label.option input:checked ~ span.title {
    position: absolute;
    display: block;
    z-index: 3;
    top: 0px;
    background: #fff;
    border-top: 0px;
    box-shadow: none;
    color: inherit;
    width: 100%;
    border-radius: 3px;
}
.select div.options label.option:last-child input:not(:checked) ~ span.title {
    border-radius: 0 0 3px 3px;
}
.select div.options label.option input:disabled ~ span.title {
    background: #f9f9f9 !important;
    color: #aaa;
}
.select div.options label.option input:disabled ~ span.title:hover {
    color: #aaa;
    background: none;
    cursor: no-drop;
}

.container {
    max-width: 75rem;
    width: 100%;
    margin: 0 auto;
    padding: 70px 0;
}
.container::after {
    content: " ";
    display: table;
    clear: both;
}
main.site-content {
    /* overflow: hidden; */
}
main.site-content section {
    position: relative;
}
.primary-categories::before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 0;
    background: url('../img/colour-triangles.png') bottom right no-repeat;
    opacity: 0.4;
}
.primary-categories::after {
    content: " ";
    display: table;
    clear: both;
}
.course-category {
    position: relative;
    float: left;
    width: 49%;
    margin: 0 2% 2% 0;
    background: #000;
    text-decoration: none;
    transition-duration: 300ms;
}
.course-category:nth-child(2n) {
    margin-right: 0;
}
.course-category .course-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 15px;
    z-index: 1;
    color: #FFF;
    opacity: 0.9;
}
.course-category h2 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: #FFF;
}
.course-category img {
    position: relative;
    width: 100%;
    z-index: 0;
}
.course-category .category-view {
    position: relative;
    margin: 0;
    padding: 0 30px 0 0;
    font-size: 1.6rem;
    font-weight: 600;
    text-align: right;
    overflow: hidden;
    height: 0;
    transition-duration: 300ms;
}
.course-category .category-view::before {
    content: '\f054';
    font-family: 'Font Awesome 5 Free', sans-serif;
    position: absolute;
    right: 0;
    color: #FFF;
    font-size: 2rem;
    line-height: 36px;
    font-weight: 900;
}
.course-category.management .course-info, a.news-item.management-training {
    background: #5C2E91;
}
.course-category.sales .course-info, a.news-item.sales-training {
    background: #ED145B;
}
.course-category.customers .course-info, a.news-item.customer-care-training {
    background: #50A674;
}
.course-category.personal .course-info, a.news-item.personal-development-training {
    background: #0C71B9;
}
.course-category:hover {
    box-shadow: 0 0 15px -7px rgba(0,0,0,0.7);
}
.course-category:hover .course-info {
    opacity: 1;
}
.course-category:hover .category-view {
    height: 36px;
}

.sales-block {
    /* background: url('../img/placeholders/page-bg.jpg') top left / cover no-repeat; */
    background: rgba(121, 138, 181, 0.1);
}
.sales-block h2 {
    font-size: 2rem;
    font-weight: 600;
}
.sales-block .sales-messages {
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.sales-block .sales-message {
    margin: 40px 0 0;
    flex-basis: 31%;
}
.sales-block .sales-message p {
    margin: 0;
    padding: 0;
}
.sales-block .sales-message span {
    display: block;
    margin: 0 0 10px;
    font-size: 1.6rem;
    font-weight: 600;
}


.perks .container {
    display: flex;
    justify-content: space-between;
}
a.perk {
    position: relative;
    display: block;
    padding: 50px 25px 150px;
    flex-basis: 23%;
    background: #8e9dc3;
    color: #fff;
    text-decoration: none;
}
a.perk::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../img/placeholders/exit01-bg.jpg') bottom right no-repeat;
}
a.perk::after {
    content: '\f054';
    font-family: 'Font Awesome 5 Free', sans-serif;
    position: absolute;
    left: 25px;
    bottom: 25px;
    color: #FFF;
    font-size: 2rem;
    line-height: 36px;
    font-weight: 900;
    transition-duration: 300ms;
}
a.perk:nth-of-type(2)::before {
    background-image: url('../img/placeholders/exit02-bg.jpg');
}
a.perk:nth-of-type(3)::before {
    background-image: url('../img/placeholders/exit03-bg.jpg');
}
a.perk:nth-of-type(4)::before {
    background-image: url('../img/placeholders/exit04-bg.jpg');
}
a.perk h3 {
    margin: 0 0 20px;
    font-size: 1.4rem;
    font-weight: 600;
    color: #FFF;
}
a.perk:hover {
    box-shadow: 0 0 15px -7px rgba(0,0,0,0.7);
}
a.perk:hover::after {
    left: 35px;
}


.news {
    position: relative;
}
.news::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../img/colour-triangle.png') top left / 450px no-repeat;
    opacity: 0.2;
}
.news .container .posts {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.news h2 {
    flex-basis: 31.5555%;
    margin: 0 0 2.6666%;
    padding: 0;
    font-size: 2.5rem;
    text-align: right;
    font-weight: 700;
    line-height: 1;
    word-spacing: 9999px;
}
a.news-item {
    position: relative;
    display: block;
    margin: 0 0 2.6666%;
    padding: 25px 25px 125px;
    flex-basis: 31.5555%;
    background: #596ea2;
    color: #fff;
    text-decoration: none;
}
a.news-item:first-of-type {
    flex-basis: 65.7777%;
}
a.news-item::after {
    content: '\f054';
    font-family: 'Font Awesome 5 Free', sans-serif;
    position: absolute;
    left: 25px;
    bottom: 25px;
    color: #FFF;
    font-size: 2rem;
    line-height: 36px;
    font-weight: 900;
    transition-duration: 300ms;
}
a.news-item:hover {
    box-shadow: 0 0 15px -7px rgba(0,0,0,0.7);
}
a.news-item:hover::after {
    left: 35px;
}
a.news-item .category, a.news-item .date {
    float: left;
    margin: 0 5px 20px 0;
    padding: 0 7px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #FFF;
    text-transform: uppercase;
    line-height: 16px;
    background: rgba(255,255,255,0.4);
    border-radius: 7px;
}
a.news-item .category {
    float: right;
}
a.news-item h3 {
    clear: both;
    margin: 0 0 20px 0;
    color: #FFF;
    font-weight: 700;
}
.post-date {
    font-size: 0.875rem;
    text-align: right;
    margin: 20px 0 0 0;
}

main.site-content .container table th,main.site-content .container table td {
    border: 0;
}


.modal {
    position: fixed;
    display: none;
    height: auto;
    padding: 30px;
    background: #FFFFFF;
    border-radius: 3px;
    box-shadow: 0px 51px 151px -56px rgba(0, 0, 0, 0.5);
    z-index: 11;
}
.modal .close-modal {
    width: 25px;
    height: 25px;
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    background: url("../img/close-nav.svg") center center no-repeat #FFF;
    cursor: pointer;
    z-index: 8;
}
.modal.login {
    top: 80px;
    right: 50px;
    width: 90%;
    max-width: 350px;
}
.modal.venue, .modal.course-type, .modal.error, .modal.generic {
    top:  50%;
    left:  50%;
    transform:  translate(-50%, -50%);
    min-width: 70%;
    max-height: 75%;
}


.login-form .title {
    font-weight: 600;
    margin: 0 0 10px 0;
}
.login-form .text-field {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 10px;
}

.text-field input[type="text"],
.text-field input[type="password"],
.text-field input[type="number"] {
    width: 100%;
    height: 50px;
    background: #FFFFFF;
    border: 1px solid #DEE6FA;
    border-radius: 2px;
    font-size: 0.875rem;
    line-height: 50px;
    outline: none;
    -webkit-appearance: none;
    transition: all 0.15s ease-in-out;
    font-family: 'Roboto', sans-serif;
}
.text-field input[type="text"].error,
.text-field input[type="password"].error,
.text-field input[type="number"].error {
    background: #B20000;
    border-color: #B20000;
}
.text-field input[type="text"].error::placeholder,
.text-field input[type="password"].error::placeholder,
.text-field input[type="number"].error::placeholder {
    color: #FFF;
}
.login-form .text-field input[type="text"],
.login-form .text-field input[type="password"] {
    text-indent: 50px;
}
.login-form .text-field::after {
    content: '';
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0px;
    left: 15px;
    display: block;
    font-family: 'Font Awesome 5 Free', sans-serif;
    font-size: 1rem;
    line-height: 50px;
    font-weight: 900;
}
.login-form .text-field.username::after {
    content: '\f502';
}
.login-form .text-field.password::after {
    content: '\f084';
}
.login-form input[type=submit] {
    width: 100%;
    height: 40px;
    margin: 7px 0;
    border:  none;
    background: rgba(0, 143, 76, 0.8);
    color: #FFF;
    box-shadow: 0px 1em 2em -1.5em rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    line-height: 40px;
    padding: 0 40px;
    cursor: pointer;
}
.login-form input[type=submit]:hover {
    background: rgba(0, 143, 76, 1);
}
.login-form a {
    margin: 0 0 10px 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #444;
    text-decoration: none;
}
.login-form hr {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;
    height: 0;
}

main#webpage::before, main#course::before {
    content: " ";
    position: fixed;
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 0;
    background: url('../img/colour-triangles.png') bottom right / 40% fixed no-repeat #BBE9FF;
    opacity: 0.3;
    z-index: -1;
}
main#webpage::after, main#course::after {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    background: url('../img/colour-triangle.png') center left / 30% fixed no-repeat;
    opacity: 0.3;
    z-index: -1;
}

.breadcrumbs {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
.breadcrumbs::after {
    content: " ";
    display: table;
    clear: both;
}

.breadcrumbs li {
    position: relative;
    float: left;
    padding: 0 10px 0 30px;
    background: #FFF;
    box-shadow: 20px 20px 0 0 rgba(0,0,0,0.1);
}
.breadcrumbs li, .breadcrumbs li::after {
    /* transition: all 0.5s; */
}
.breadcrumbs li:hover,
.breadcrumbs li.active,
.breadcrumbs li:hover::after,
.breadcrumbs li.active::after{
    background: rgb(121, 138, 181);
}
.breadcrumbs li:last-child {
    padding-right: 20px;
}
.breadcrumbs li a {
    text-decoration: none;
    outline: none;
    display: block;
    font-size: 12px;
    line-height: 36px;
    color: #444;
}
.breadcrumbs li:hover a,
.breadcrumbs li.active a,
.breadcrumbs li:hover::after,
.breadcrumbs li.active::after {
    color: #FFF;
}

.breadcrumbs li::after {
    content: '';
    position: absolute;
    top: 0;
    right: -18px;
    width: 36px;
    height: 36px;
    /*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:
    length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
    if diagonal required = 1; length = 1/1.414 = 0.707*/
    transform: scale(0.707) rotate(45deg);
    z-index: 1;
    background: #FFF;
    box-shadow: 2px -2px 0 1px rgba(121, 138, 181, 0.2);
    border-radius: 0 0 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumbs li:last-child::after {
    content: none;
}


.supplemented {
    width: 60%;
    float: left;
}
.webpage-title {
    display: inline-block;
    margin: 30px 0 0;
    padding: 20px 40px;
    background: rgba(121, 138, 181, 0.8);
    font-size: 3rem;
    line-height: 1.2;
    color: #FFF;
    box-shadow: 20px 20px 0 0 rgba(0,0,0,0.1);
}
.webpage-content {
    background: rgba(255,255,255,0.8);
    margin: 30px 0 0;
    padding: 40px 40px;
    box-shadow: 20px 20px 0 0 rgba(0,0,0,0.1);
    clear: both;
}
.category-content {
    width: 100%;
    float: left;
}
.webpage-content ul {
    margin: 0;
    padding: 0;
}

.webpage-content h2, .webpage-content h3 {
    margin: 0 0 20px;
    padding: 0 0 10px;
    font-size: 1.4rem;
    border-bottom: 1px dashed #444;
    font-weight: 600;
    line-height: 1.2;
    color: #444;
}
.news-post.webpage-content h2 {
    margin-top:  20px;
    border:  0px;
}
.webpage-content img {
    max-width: 100%;
}
.webpage-content .anchor-text-landing {
    position: relative;
    display: block;
    background: rgba(var(--main-accent-color), 0.8);
    color: #FFF;
    text-decoration: none;
    padding: 5px 10px;
}
.webpage-content .anchor-text-landing::before {
    content: '\f054';
    font-family: 'Font Awesome 5 Free', sans-serif;
    position: absolute;
    right: 10px;
    color: #FFF;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 900;
}

.webpage-content .anchor-text-landing:hover {
    background: rgba(var(--main-accent-color), 1);
}
.webpage-content input[type=text],
.webpage-content input[type=email],
.webpage-content input[type=password],
.webpage-content textarea {
    margin: 5px 0 0 0;
    padding: 7px 15px;
    width: 100%;
    border:  1px solid #CCC;
    border-radius: 4px;
}


.webpage-content .register-form input[type=text],
.webpage-content .register-form input[type=email],
.webpage-content .register-form input[type=password],
.webpage-content textarea {
    margin: 0;
}

.button {
    display: block;
    background: rgba(var(--main-accent-color), 0.8);
    color: #FFF;
    border:  0px;
    border-radius: 4px;
    padding: 10px 20px;
    text-align: center;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}
.button:not(.disabled):hover {
    background: rgba(var(--main-accent-color), 1);
}
.button.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
aside {
    width: 35%;
    margin: 30px 0 0 5%;
    float: right;
}
.sidebar {
    background: rgba(255,255,255,0.8);
    margin: 0 0 40px;
    padding: 20px 30px;
    box-shadow: 20px 20px 0 0 rgba(0,0,0,0.1);
}
.sidebar::after {
    content: " ";
    display: table;
    clear: both;
}
.newsletter-c2a {
    display: block;
    background: url('../img/mail.png') bottom 20px right 20px / 100px no-repeat rgba(246, 138, 88, 0.9);
    color: #FFF;
    text-decoration: none;
}
.newsletter-c2a h3 {
    color: #FFF;
    font-weight: 700;
    font-size: 1.5em;
    margin: 0 0 10px;
}
.newsletter-c2a p {
    margin: 0;
    padding: 0 60px 0 0;
}
.newsletter-c2a button {
    margin: 10px 0 0;
}
.newsletter-c2a:hover {
    background-color: #98fb98;
}
.newsletter-c2a:hover button {
    background-color: rgba(var(--main-accent-color), 1);
}
.course-summary-c2a {
    display: block;
    background: url('../img/padnote.png') center left 20px / 90px no-repeat rgba(92, 46, 145, 0.9);
    color: #FFF;
    text-decoration: none;
    text-align: right;
}
.course-summary-c2a h3 {
    color: #FFF;
    font-weight: 700;
    font-size: 1.3em;
    margin: 0 0 10px;
}
.course-summary-c2a button {
    float: right;
    margin: 10px 0 0;
}
.course-summary-c2a:hover {
    background-color: rgba(92, 46, 145, 1);
}
.course-summary-c2a:hover button {
    background-color: rgba(var(--main-accent-color), 1);
}
.course-list {
    display: block;
    background: rgba(80, 166, 116, 0.9);
    color: #FFF;
    text-decoration: none;
    text-align: left;
}
.course-list h3 {
    color: #FFF;
    font-weight: 700;
    font-size: 1.3em;
    margin: 0 0 10px;
}
.course-list button {
    float: left;
    margin: 10px 0 0;
}
.course-list:hover {
    background-color: rgba(80, 166, 116, 1);
}
.course-list:hover button {
    background-color: rgba(var(--main-accent-color), 1);
}
.how-to-book {
    background: rgb(var(--main-accent-color));
    color: #FFF;
}
.how-to-book h3 {
    color: #FFF;
    font-weight: 700;
    font-size: 1.5em;
    margin: 0 0 10px;
}
.how-to-book a {
    display: block;
    color: #FFF;
    text-decoration: none;
}
.how-to-book .way-to-pay {
    float: left;
    width: 50%;
    text-align: center;
    padding: 10px;
    border-bottom: 1px dashed #FFF;
}
.how-to-book .way-to-pay::before {
    font-family: 'Font Awesome 5 Free', sans-serif;
    color: #FFF;
    font-size: 2rem;
    font-weight: 900;
    display: block;
    margin: 0 0 10px;
}
.how-to-book .way-to-pay:nth-child(2n) {
    width: calc(50% - 1px);
    border-right:  1px dashed #FFF;
}
.how-to-book .way-to-pay:nth-last-child(-n+2) {
    border-bottom: 0px;
}
.how-to-book .way-to-pay.online::before {
    content: '\f09d';
}
.how-to-book .way-to-pay.invoice::before {
    content: '\f15c';
}
.how-to-book .way-to-pay.telephone::before {
    content: '\f879';
}
.how-to-book .way-to-pay.email::before {
    content: '\f658';
}
.downloads {
    background: rgb(var(--main-accent-color));
    color: #FFF;
}
.downloads h3 {
    color: #FFF;
    font-weight: 700;
    font-size: 1.5em;
    margin: 0 0 10px;
}
.downloads a {
    display: block;
    color: #FFF;
    text-decoration: none;
}
.downloads a img {
    width: 30px;
}

.course-title {
    display: block;
}
.course-summary {
    display: block;
    padding: 20px 40px;
    background: rgba(121, 138, 181, 1);
    color: #FFF;
    box-shadow: 20px 20px 0 0 rgba(0,0,0,0.1);
}
.course-summary::after {
    content: " ";
    display: table;
    clear: both;
}
.course-summary .course-info {
    float: left;
}
.course-summary .summary-row {
    font-weight: 700;
    line-height: 2;
}
.course-summary .summary-row label {
    font-weight: 300;
    cursor: pointer;
}
.course-summary .summary-row.cpd {
    position: relative;
    float: left;
    margin: 10px 0 0;
    padding: 0px 20px 0 10px;
    line-height: 1;
    border-left: 4px solid #FFF;
    text-decoration: none;
    color: #FFF;
}
.course-summary .summary-row.cpd::after {
    content: '\f054';
    font-family: 'Font Awesome 5 Free', sans-serif;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #FFF;
    font-size: 0.9rem;
    font-weight: 900;
    transition-duration: 300ms;
}
.course-summary .summary-row.cpd:hover {
    text-decoration: underline;
}
.course-summary .summary-row.cpd:hover::after {
    right: -5px;
}
.course-summary .summary-row.cpd label {
    font-weight: 700;
}
.course-summary .book-now {
    float: left;
    clear: left;
    margin: 20px 0 0 0;
    text-decoration: none;
    border-radius: 50px;
}
.course-summary .course-types {
    float: right;
}
.course-summary .course-type {
    position: relative;
    margin: 0 0 10px;
    padding-left: 50px;
    padding-right: 40px;
    text-decoration: none;
}
.course-summary .course-type::before {
    content: '\f966';
    font-family: 'Font Awesome 5 Free', sans-serif;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #FFF;
    font-size: 1rem;
    line-height: 36px;
    font-weight: 900;
}
.course-summary .course-type.in-person::before {
    content: '\f0c0';
}
.course-summary .course-type::after {
    content: '\f054';
    font-family: 'Font Awesome 5 Free', sans-serif;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #FFF;
    font-size: 1rem;
    line-height: 36px;
    font-weight: 900;
    transition-duration: 300ms;
}
.course-summary .course-type:hover::after {
    right: 15px;
}
.course-summary .course-type .course-price {
}

#course .supplemented {
    margin-bottom: 30px;
}
#course .webpage-content {
    padding: 0;
}
#course .webpage-content h2 {
    margin: 0;
    padding: 20px 40px;
    font-size: 1.5rem;
    border:  none;
    font-weight: 700;
    line-height: 1.2;
    color: #FFF;
    background: rgba(121, 138, 181, 0.8);
    cursor: pointer;
}
#course .webpage-content h2::after {
    content: '\f067';
    float: right;
    font-family: 'Font Awesome 5 Free', sans-serif;
    color: #FFF;
    font-weight: 900;
}
#course .webpage-content h2:hover {
    background: rgba(121, 138, 181, 1);
}
#course .webpage-content.open h2::after {
    transform: rotate(45deg);
}
#course .webpage-content .section-content {
    display: none;
    padding: 40px;
}
.venue-course-container .section-content {
    display: none;
}
#course .webpage-content.open .section-content,
.venue-course-container.open .section-content {
    display: block;
}

.site-content article .cpd {
    background: rgba(var(--main-accent-color),1);
    padding: 20px 40px;
    box-shadow: 20px 20px 0 0 rgba(0,0,0,0.1);
    color: #FFF;
}
.site-content article .cpd a {
    display: block;
    color: #FFF;
}

.site-content article .cpd::before {
    content: '\f05a';
    float: left;
    margin: 0 10px 0 0;
    font-family: 'Font Awesome 5 Free', sans-serif;
    color: #FFF;
    font-size: 2rem;
    font-weight: 900;
}
.course-bookable {
    clear: both;
    margin: 30px 0 0;
}
.course-bookable::after {
    content: " ";
    display: table;
    clear: both;
}

.course-bookable .tab {
    margin: 0;
    padding: 20px 40px;
    font-size: 1.5rem;
    border: none;
    font-weight: 700;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(204, 204, 204, 0.7);
    cursor: pointer;
    width: 50%;
    float: left;
    text-align: center;
}
.course-bookable .tab.active {
    color: rgba(255, 255, 255, 1);
    background: #98fb98;
}
.course-bookable .tab:not(.active):hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(246, 138, 88, 0.7);
}
.course-bookable .tab-content {
    display: none;
    clear: both;
    padding: 0 20px 20px;
    background: #98fb98;
}
.course-bookable .tab-content.active {
    display: block;
    border-radius: 5px;
}
.course-bookable .tab-content > .title {
    background: #98fb98;
    padding: 20px 0;
    color: #FFF;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}
.course-bookable .tab::before {
    content: '\f966';
    font-family: 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
    margin: 0 20px 0 0;
}
.course-bookable .tab.in-person::before {
    content: '\f0c0';
}
.course-bookable .tab-content .course-selector-container {
    display: none;
    position: relative;
    background: #FFF;
    border:  20px solid #FFF;
    padding: 30px 0 0 0;
}
.container .calendar.hello-week {
    display: none;
}
.course-bookable .tab-content .course-selector-container .close {
    width: 25px;
    height: 25px;
    display: block;
    position: absolute;
    top: 5px;
    right: 5px;
    background: url("../img/close-nav.svg") center center no-repeat #FFF;
    cursor: pointer;
    z-index: 8;
}
.course-bookable .tab-content .course-selector-container .selector-element {
    display: none;
    border-top:  10px solid #FFF;
    background: #FFF;
    padding: 10px;
}
.course-bookable .tab-content .course-selector-container .selector-element:last-child {
    padding: 10px 0 0 0;
    background: rgba(80, 166, 116, 0.8);
    border:  0;
}
.course-bookable .tab-content .course-selector-container .selector-element .button {
    float: right;
}
.course-bookable .tab-content .course-selector-container .selector-element::after {
    content: " ";
    display: table;
    clear: both;
}
.course-bookable .tab-content .course-selector-container .selector-element label.label {
    float: left;
    width: 80px;
    line-height: 40px;
    margin: 0 10px;
}
.course-bookable .tab-content .course-selector-container .selector-element .select {
    border:  1px solid #CCC;
}

.scheduled-course-options {
    position: relative;
    z-index: 1;
}
.scheduled-course-options .no-schedule {
    text-align: center;
    background: rgba(255, 255, 255, 0.6);
    padding: 40px;
}

.scheduled-course-options .view-future {
    background: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
    font-size: 0.875rem;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}
.scheduled-course-options .view-future::before {
    content: '\f0dd';
    font-family: 'Font Awesome 5 Free', sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    display: inline-block;
    margin: 0 20px 0 0;
}
.scheduled-course-options .view-future::after {
    content: '\f0dd';
    font-family: 'Font Awesome 5 Free', sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    display: inline-block;
    margin: 0 0 0 20px;
}
.scheduled-course-options .future-dates {
    display: none;
}
.scheduled-course-options > .option,
.scheduled-course-options .future-dates > .option {
    position: relative;
    background: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
}
.scheduled-course-options > .option.discounted,
.scheduled-course-options .future-dates > .option.discounted {
    background: rgba(174, 242, 179, 0.8);
}
.scheduled-course-options .option:nth-child(2n) {
    background: rgba(238, 238, 238, 0.8);
}
.scheduled-course-options .option.discounted:nth-child(2n) {
    background: rgba(148, 227, 154, 0.8);
}

.scheduled-course-options .option .course-date {
    position: relative;
    flex-basis: 70%;
    padding: 0 0 0 35px;
}
.scheduled-course-options .option .course-date::before {
    content: '\f518';
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    transform: translateY(-50%);
    font-family: 'Font Awesome 5 Free', sans-serif;
    color: rgba(var(--main-accent-color),1);
    font-size: 1.2rem;
    font-weight: 900;
}
.scheduled-course-options .option .course-location {
    position: relative;
    flex-basis: 30%;
    padding: 0 0 0 35px;
}
.scheduled-course-options .option .course-location span,
.scheduled-course-options .option .course-duration[data-popup]:not([data-popup=""]) span {
    display: inline-block;
    cursor: pointer;
    border-bottom: 1px dotted rgba(var(--main-accent-color),1);
}
.scheduled-course-options .option .course-location span:hover,
.scheduled-course-options .option .course-duration[data-popup]:not([data-popup=""]) span:hover {
    color: rgba(var(--main-accent-color),1);
    border-bottom: 1px solid rgba(var(--main-accent-color),1);
}
.scheduled-course-options .option .course-location::before {
    content: '\f277';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-family: 'Font Awesome 5 Free', sans-serif;
    color: rgba(var(--main-accent-color),1);
    font-size: 1.2rem;
    font-weight: 900;
}
.scheduled-course-options .option .course-duration {
    position: relative;
    flex-basis: 20%;
    padding: 0 0 0 35px;
}
.scheduled-course-options .option .course-duration::before {
    content: '\f017';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-family: 'Font Awesome 5 Free', sans-serif;
    color: rgba(var(--main-accent-color),1);
    font-size: 1.2rem;
    font-weight: 900;
}
.scheduled-course-options .option .course-price {
    position: relative;
    flex-basis: 12%;
}
.scheduled-course-options .option.discounted .course-price {
    padding: 0 0 0 20px;
}
.scheduled-course-options .option.discounted .course-price::before {
    content: '\f06a';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-family: 'Font Awesome 5 Free', sans-serif;
    color: rgba(0, 135, 10 ,1);
    font-size: 1rem;
    font-weight: 900;
    opacity: 0.6;
}
.scheduled-course-options .option .course-delegates {
    flex-basis: 20%;
    padding: 0 10px 0 0;
}
.scheduled-course-options .option .course-delegates .select {
    width: 100%;
    margin: 0;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}
.scheduled-course-options .option .course-add {
    flex-basis: 20%;
    padding: 0 0 0 10px;
}
.scheduled-course-options .option .course-add .button {
    width: 100%;
}


.additional-course-options {
    display: flex;
    align-content: center;
    justify-content: center;
    background: #FFF;
}
.additional-course-options .option {
    flex-basis: 33.333333%;
    display: block;
    position: relative;
    transition: 50ms;
    height: 220px;
    background: bottom center / contain no-repeat;
}
.additional-course-options .option .title {
    float: left;
    margin: 10px 0 0 10px;
    padding: 5px 10px 5px 5px;
    font-size: 0.825rem;
    line-height: 20px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 10px 10px 0 0 rgba(0,0,0,0.1);
    cursor: pointer;
    color: rgb(var(--main-accent-color));
}
.additional-course-options .option .title::before {
    content: '\f05a';
    float: left;
    margin-right: 10px;
    font-family: 'Font Awesome 5 Free', sans-serif;
    color: rgba(var(--main-accent-color),0.6);
    font-weight: 900;
    font-size: 1.2rem;
    line-height: 20px;
}
.additional-course-options .option .title:hover::before {
    color: rgba(var(--main-accent-color),1);
}
.additional-course-options .option .button {
    position: absolute;
    left: 10px;
    top: 60px;
    background-color: rgba(var(--main-accent-color),1);
    cursor: pointer;
}
.additional-course-options .option .button:hover {
    transform: scale(1.05);
}
.additional-course-options .option .prices {
    float: right;
    clear: both;
    width: 50%;
    padding: 40px 15px 0 5px;
    font-size: 13px;
    text-align: left;
}
.additional-course-options .option .prices .price span {
    float: right;
}

.additional-course-options .option.inhouse {
    background-image: url('../img/training-inhouse.png');
    background-color: rgba(80, 166, 116, 0.8);
}
.additional-course-options .option.inhouse:hover {
    /* background-color: rgba(80, 166, 116, 1); */
}


.additional-course-options .option.one-to-one {
    background-image: url('../img/training-one-to-one.png');
    background-color: rgba(92, 46, 145, 0.8);
}
.additional-course-options .option.one-to-one:hover {
    /* background-color: rgba(92, 46, 145, 1); */
}


.additional-course-options .option.uchoose {
    background-image: url('../img/training-uchoose.png');
    background-color: rgba(0, 128, 198, 0.8);
}
.additional-course-options .option.uchoose:hover {
    /* background-color: rgba(0, 128, 198, 1); */
}


.venue-information {
    display: flex;
    flex-wrap: wrap;
}
.venue-information #gmap {
    flex-basis: 100%;
    height: 200px;
    border-radius: 4px;
    margin: 0 0 10px 0;
}
.venue-information .venue-address {
    flex-basis: 35%;
    padding: 0 5px 0 0;
}
.venue-information .venue-directions {
    flex-basis: 65%;
}
.venue-information .venue-directions .directions {
    overflow-y:  scroll;
    max-height: 350px;
    padding: 0 10px 0 0;
}
.venue-information .title {
    font-size: 2rem;
    margin: 0 0 10px;
    font-weight: 400;
}
.venue-information img {
    display: block;
    width: 100%;
}
.course-type-information .title,
.course-type-information .subtitle {
    font-size: 2rem;
    font-weight: 300;
}

.site-content ul.pagination {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}
.site-content ul.pagination li {
    display: inline-block;
    background: rgba(var(--main-accent-color), 0.7);
    margin: 0 5px 0 0;
}
.site-content ul.pagination li.current {
    background: #98fb98;
}
.site-content ul.pagination li.prev,
.site-content ul.pagination li.next {
    background: rgba(var(--main-accent-color), 1);
}
.site-content ul.pagination li a {
    display: block;
    color: #FFF;
    text-decoration: none;
    padding: 10px 20px;
}
#venue-search-box {
    width: 100%;
    margin: 20px 0;
    padding: 0 15px;
    height: 50px;
    background: #FFFFFF;
    border: 1px solid #DEE6FA;
    border-radius: 2px;
    font-size: 0.875rem;
    line-height: 50px;
    outline: none;
    -webkit-appearance: none;
    transition: all 0.15s ease-in-out;
    font-family: 'Roboto', sans-serif;
}
.venues-container,
.case-studies-container {
    clear: both;
}
.venues-container h2,
.case-studies-container h2,
.category-content h2 {
    border:  none;
}
.venues-container .venue {
    display: flex;
    justify-content: space-between;
    background: rgba(92, 46, 145, 1);
    margin: 2px 0;
    padding: 0 10px;
    color: #fff;
    font-size: 0.875rem;
}
.venues-container .venue.alt {
    background: #98fb98;
}
.venues-container .venue .venue-data {
    padding: 15px 5px;
}
.venues-container .venue .venue-data a {
    color: #fff;
    text-decoration: none;
}
.venues-container .venue .venue-name {
    flex-basis: 20%;
}
.venues-container .venue .venue-address {
    flex-basis: 60%;
}
.venues-container .venue .venue-phone {
    flex-basis: 13%;
}
.venues-container .venue .venue-link {
    flex-basis: 7%;
    text-align: right;
}

.venue-course-container {
    clear: both;
    margin: 40px 0 0;
    overflow:  hidden;
}
.venue-course-container h3 {
    border:  0px;
    margin:  0;
    padding: 0;
    opacity: 0.8;
    cursor: pointer;
}
.venue-course-container h3::after {
    content: '\f067';
    float: right;
    font-family: 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
}
.venue-course-container h3:hover {
    opacity: 1;
}
.venue-course-container.open h3::after {
    transform: rotate(45deg);
}
.venue-course-container a.search-result:first-of-type {
    margin:  40px 0 0;
}

.case-studies-container h2 {
    margin: 20px 0 0;
    font-weight: 600;
    font-size: 2.0rem;
}
.case-studies-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.case-studies-container ul li {
    list-style: none;
}

a.search-result {
    display: flex;
    justify-content: space-between;
    background: rgba(92, 46, 145, 1);
    margin: 2px 0;
    padding: 0 10px;
    color: #fff;
    font-size: 0.875rem;
    text-decoration: none;
}
a.search-result span {
    padding: 15px 5px;
}
a.search-result:first-of-type {
    margin: 20px 0 0;
}

input.error,
textarea.error {
    background: #B20000;
    border-color:  #B20000;
    color: #FFF;
}
input.error::placeholder {
    color: #CCC;
}
label.error {
    /* display: none !important; */
}
.testimonial:not(:last-child) {
    padding: 0 0 20px;
    margin: 0 0 20px 0;
    border-bottom: 1px solid #DDD;
}
.testimonial p {
    margin: 0;
}
.testimonial .testimonial-author {
    font-style: italic;
    text-align: right;
}

.slideout.basket {
    position: fixed;
    bottom: -100px;
    right: 40px;
    background: rgb(92, 46, 145);
    color: #FFF;
    border-radius: 4px;
    padding: 15px 20px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.3);
    transition-duration: 300ms;
    z-index: 1;
}
.slideout.basket.open {
    bottom:  40px;
}

.orders-table th {
    text-align: left;
}
.trainer-table {
    width: 100%;
    font-size: 0.8rem;
    text-align: left;
}
.trainer-table td,
.trainer-table th {
    padding: 5px;
}
.trainer-table .select {
    width: 100%;
    margin: 0;
}
.trainer-table .select .placeholder {
    padding-right: 50px;
    background: #F9D5D5;
    font-size: inherit;
}
.trainer-table tr.odd td {
    background: #EEE;
}

#lhnContainerDone {
    position:absolute;
    right:0;
    top:40px;
}
.category-list-item {
    margin: 0 0 20px;
}
.category-list-item > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(121, 138, 181, 1);
    color: #FFF;
    text-decoration: none;
}
.category-list-item .name {
    flex-basis: 60%;
    padding: 20px;
}
.category-list-item .toggle {
    flex-basis: 20%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
}
.category-list-item .toggle::after {
    content: '\f055';
    font-family: 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
    margin: 0 0 0 10px;
}
.category-list-item .toggle:hover {
    background: rgba(255, 255, 255, 0.3);
}
.category-list-item .count {
    flex-basis: 20%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.2);
}
.category-list-item .content {
    display: none
}

.customer-account-container {
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.customer-account {
    flex-basis: 30%;
}
.customer-account a {
    display: block;
    margin: 0 0 10px;
    background: #596ea2;
    border-radius: 4px;
    padding: 20px;
    color: #FFF;
    text-decoration: none;
    opacity: 0.9;
}

.customer-account a::after {
    content: '\f054';
    font-family: 'Font Awesome 5 Free', sans-serif;
    color: #FFF;
    font-weight: 900;
    transition-duration: 300ms;
    margin: 0 0 0 10px;
}
.customer-account a:hover {
    opacity: 1;
}
.customer-account a:hover::after {
    margin: 0 0 0 20px;
}

.order-details {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 20px 0;
}
.order-details label {
    flex-basis: 20%;
    font-weight: bold;
}
.order-details div {
    flex-basis: 80%;
}
.order-details-table {
    width: 100%;
    margin: 20px 0;
}
.order-details-table th {
    background: #DDD;
    padding: 5px;
}
.order-details-table td {
    background: #EEE;
    padding: 5px;
}
.news-post-item {
    padding: 0 0 40px;
    margin: 0 0 40px;
    border-bottom: 1px dashed rgb(121, 138, 181);
}
.news-post-item a.news-post-link {
    display: flex;
    background: rgba(121, 138, 181, 0.8);
    padding: 20px;
    margin: 20px 0;
    text-decoration: none;
    color: #FFF;
    justify-content: space-between;
    align-items: center;
}
.news-post-item h2.title {
    padding: 0;
    margin: 0;
    color: #FFF;
}
.news-post-item .date {
    text-align: right;
}


/* ==========================================================================
     Helper classes
     ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    /* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: inherit;
    width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
    visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix::before,
.clearfix::after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}

.clearfix::after {
    clear: both;
}

/* ==========================================================================
     EXAMPLE Media Queries for Responsive Design.
     These examples override the primary ('mobile first') styles.
     Modify as content requires.
     ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-resolution: 1.25dppx),
    (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
     Print styles.
     Inlined to avoid the additional HTTP request:
     https://www.phpied.com/delay-loading-your-print-css/
     ========================================================================== */

@media print {
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        /* Black prints faster */
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a,
    a:visited {
        text-decoration: underline;
    }
    a[href]::after {
        content: " (" attr(href) ")";
    }
    abbr[title]::after {
        content: " (" attr(title) ")";
    }
    /*
         * Don't show links that are fragment identifiers,
         * or use the `javascript:` pseudo protocol
         */
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }
    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    /*
         * Printing Tables:
         * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
         */
    thead {
        display: table-header-group;
    }
    tr,
    img {
        page-break-inside: avoid;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    h2,
    h3 {
        page-break-after: avoid;
    }
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px dashed #444;
    font-size: 0.875rem;
    flex-wrap: wrap;
}
.cart-item:first-of-type {
    padding-top: 0;
}
.cart-item:last-of-type {
    border-bottom: 0;
}
.cart-item-title {
    flex-basis: 66%;
}
.cart-item-title a {
    text-decoration: none;
    color: #444;
}
.cart-item-price {
    flex-basis: 12%;
    text-align: right;
}
.cart-item-quantity {
    flex-basis: 10%;
    text-align: center;
}
.cart-item-quantity input[type="text"] {
    margin: 3px 0 0;
    padding: 3px 5px;
    width: 40px;
}
.cart-item-total {
    flex-basis: 12%;
    text-align: right;
}
.cart-item .original {
    position: relative;
    color: #AAA;
}
.cart-item .original::after {
    content:  "";
    position: absolute;
    top:  49%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #AAA;
}
.cart-delete {
    position: relative;
    flex-basis: 100%;
    margin: 10px 0 0;
}
.cart-delete i.far {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.delete-basket-item {
    display: block;
    background: none;
    border: none;
    padding: 0 0 0 20px;
    color: #222;
    cursor: pointer;
    opacity: 0.8;
}
.delete-basket-item:hover {
    text-decoration: underline;
    opacity: 1;
}
.cart h2 {
    margin: 30px 0 20px;
    border:  0px;
}
.cart-summary h3 {
    margin: 0 0 20px;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.2;
}
.cart-summary .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 10px 0 0;
    font-size: 0.875rem;
}
.cart-summary .summary-label {
    flex-basis: 70%;
}
.cart-summary .summary-value {
    flex-basis: 30%;
    text-align: right;
}
.cart-summary .summary-row.order-total {
    font-size: 1.2rem;
    font-weight: 600;
    padding-bottom: 20px;
    border-bottom: 1px dashed #444;
    margin: 0 0 20px;
}
.cart-summary input[type=text] {
    padding: 7px 15px;
    width: 100%;
    border:  1px solid #CCC;
    border-radius: 4px;
}
.cart-summary .button.voucher {
    margin: 10px 0 0;
    background-color: rgba(92, 46, 145, 0.8);
}
.cart-summary .button.voucher:hover {
    background-color: rgba(92, 46, 145, 1);
}
.cart-summary .button.delegates {
    margin: 40px 0 0;
}
.delegate-course-title {
    background: rgba(var(--main-accent-color),1);
    margin: 60px 0 0;
    padding: 20px 40px;
    box-shadow: 20px 20px 0 0 rgba(0,0,0,0.1);
    color: #FFF;
}
.webpage-content.delegates {
    margin: 40px 0 0;
}
.delegates .delegate-information {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-wrap: wrap;
}
.delegates .delegate-information span {
    display: none !important;
}
.delegates .delegate-information label {
    margin: 5px 0;
    padding: 7px 0 0 0;
    flex-basis: 13%;
}
.delegates .delegate-information label:nth-of-type(2n) {
    padding-left: 7px;
}
.delegates .delegate-information input[type=text],
.delegates .delegate-information .dietary-reqs,
.delegates .delegate-information textarea {
    margin: 5px 0;
    flex-basis: 37%;
}
.delegates .delegate-information textarea {
    padding: 7px 15px;
    border: 1px solid #CCC;
    border-radius: 4px;
    height: 120px;
}
.delegates .delegate-information .dietary-reqs {
    display: flex;
}
.delegates .delegate-information .dietary-reqs label {
    flex-basis: auto;
}
.delegates .delegate-information .dietary-reqs input {
    flex-basis: auto;
    width: 15px;
    margin: 9px 20px 0 5px;
}
.delegates .delegate-information .dietary-reqs input.error {
    box-shadow: 0 0 0 3px #F00;
}
.delegates .delegate-information textarea.notes {
    flex-grow: 1;
}
.add-delegates {
    margin: 40px 0 0;
    float: right;
}
.cart.login-forms {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.cart.login-forms form {
    flex-basis: 45%;
}
.cart.login-forms input[type=text],
.cart.login-forms input[type="password"] {
    margin: 0;
}
.customer-details-block::after {
    content: " ";
    display: table;
    clear: both;
}
.customer-details .text-field {
    float: left;
    width: 50%;
    padding: 0 5px;
}
.customer-details h2 {
    clear: both;
}
.customer-details .select {
    width: 100%;
    margin: 5px 0 0;
    border:  1px solid #CCC;
    border-radius: 4px;
    height: 50px;
    padding: 0;
}
.customer-details .select > i.toggle {
    line-height: 50px;
}
.customer-details .select .title,
.customer-details .select .placeholder {
    line-height: 30px;
    font-size: 0.875rem;
    padding: 10px 15px;
    font-family: 'Roboto', sans-serif;
}
.customer-details .select > span.placeholder {
    color: #777;
}
.button.customer-details {
    margin: 40px 0 0;
    float: right;
}
.button.payment {
    margin: 40px 0 0;
    float: right;
}

.payment-methods {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
}
.payment-methods p {
    flex-basis: 100%;
}
.payment-method {
    flex-basis: 250px;
    border: 1px solid #DDD;
    background: #FFF;
    border-radius: 4px;
    margin: 0 40px 0 0;
    padding: 20px;
    text-align: center;
    cursor: pointer;
}
.payment-method:hover {
    border-color: #000;
}

.payment-method::before {
    font-family: 'Font Awesome 5 Free', sans-serif;
    color: #666;
    font-size: 2rem;
    font-weight: 900;
    display: block;
    margin: 0 0 10px;
}
.payment-method.online::before {
    content: '\f09d';
}
.payment-method.invoice::before {
    content: '\f15c';
}
.payment-method input {
    margin: 20px 0 0;
}

.related-course {
    display: block;
    margin: 0 0 5px;
    padding: 5px 10px;
    border-radius: 4px;
    background: rgba(121, 138, 181, 0.8);
    color: #FFF;
    text-decoration: none;
    transition-duration: 300ms;
}
.related-course:hover {
    background: rgba(121, 138, 181, 1);
    padding-left:  20px;
}
.cart-messages {
    margin-bottom: 10px;
    flex-basis: 100%;
}
.cart-messages .errors {
    color: #F00;
}
.cart .text-field {
    position: relative;
}
.cart label.error {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: -23px;
    background: #FFF;
    border:  1px solid #B20000;
    padding: 3px 10px;
    font-size: 0.875rem;
    border-radius: 0 0 4px 4px;
    z-index: 4;
}

@media (min-width: 1920px) and (min-aspect-ratio: 64/27) {
.news h2 {
    font-size: 4rem;
}
.news::before {
    top: -250px;
    background-size: 750px;
}

}
@media (min-width: 1750px) and (max-aspect-ratio: 16/8) {
.news h2 {
    font-size: 4rem;
}

}
@media (max-width: 1600px) {

}
@media (max-width: 1440px) {

}
@media (max-width: 1366px) {

}
@media (max-width: 1280px) {
.container {
    max-width: 60rem;
}
header.site-header,
header.site-header.smaller {
    padding: 20px 70px;
}
section.banners {
    height: 100vh;
}
section.banners .banner-carousel li .banner-content {
    padding-top: 150px;
}
section.banners .banner-carousel li .banner-content h1 {
    /* font-size: 3.125rem; */
}
section.banners .banner-carousel li img {
    height: 100vh;
    width: auto;
}
form.course-filter {
    padding: 25px 30px;
}
.select, select {
    width: 250px;
    margin-left: 20px;
}
/* form.course-filter input[type="submit"] {
    padding: 0 20px;
} */
.select .title, .select .placeholder {
    font-size: 0.875rem;
}
footer.site-footer .primary::after {
    filter: none;
}

.mobile-menu {
    display: block;
}
.mobile-menu:after {
    content: " ";
    display: table;
    clear: both;
}
.mobile-menu-toggle {
    position: absolute;
    top: 17px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: url(../img/icon-menu.svg) no-repeat center center;
    background-size: 70%;
    font-size: 3rem;
    cursor: pointer;
    opacity: 1;
    transition-duration: 600ms;
}
.mobile-menu.open .mobile-menu-toggle {
    opacity: 0;
}
#site-nav {
    position: fixed;
    float: none;
    width: 100%;
    height: 100%;
    top: -100%;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.75);
    transition-duration: 300ms;
    opacity: 0;
    z-index: 2;
}
#site-nav.open {
    top: 0;
    opacity: 1;
}
nav#site-nav ul {
    float: none;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
nav#site-nav ul li {
    display: block;
    text-align: center;
}
nav#site-nav ul li a {
    padding: 10px;
    font-size: 2rem;
    font-weight: 300;
}
nav#site-nav ul li:last-child a {
    padding: 10px;
}
nav#site-nav ul li a:hover {
    border-bottom: 0;
    color: #BBB;
}
nav#site-nav .close {
    width: 40px;
    height: 40px;
    display: block;
    position: absolute;
    top: 17px;
    right: 20px;
    cursor: pointer;
    z-index: 8;
}
nav#site-nav .close::after {
    display: block;
    content: "X";
    color: #FFF;
    font-size: 3rem;
    font-weight: 300;
    line-height: 40px;
    height: 40px;
    text-align: center;
}

.additional-course-options .option .prices {
    padding-top: 60px;
    font-size: 11px;
}
.course-bookable .tab,
.course-bookable .tab-content > .title {
    font-size: 1rem;
}

}
@media (max-width: 1024px) {

}
@media (max-width: 800px) {
.container {
    width: 94%;
    padding: 70px 0 20px;
}
header.site-header {
    padding: 5px;
}
header.site-header .header-content {
    display: block;
}

header.site-header {
    padding: 20px 70px 20px 20px;
}
header.site-header.smaller {
    padding: 20px 70px 20px 20px;
}
header.site-header .site-logo {
    margin: -10px 0 0 0;
    width: 150px;
}

/* .site-logo {
    float: none;
    width: 200px;
    margin: 20px auto;
} *//*
.smaller .site-logo {
    width: 50px;
    margin: 0 auto;
}
.smaller nav#site-nav ul li a {
    line-height: 25px;
    padding: 10px;
} */

.site-header .login, .site-header .search {
    display: none;
}
.site-header .basket a {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(121, 138, 181, 1);
    width: 65px;
    height: 65px;
    padding: 0;
    line-height: 61px;
    border-radius: 50%;
    text-align: center;
    color: #444;
    font-weight: bold;
    box-shadow: 0px 0px 1px 3px rgba(0,0,0,0.3);
}
.site-header .basket a::before {
    font-size: 36px;
    color: #FFF;
    z-index: -1;
}
/*
nav#site-nav ul li {
    display: block;
    border-right: 0;
}
nav#site-nav ul li a {
    display: block;
    font-size: 16px;
    text-align: left;
    line-height: 1;
    padding: 15px 10px;
} */
main.site-content {
    padding: 0;
}
section.banners {
    height: 100vh;
    /* overflow: hidden; */
}
section.banners .banner-carousel li img {
    left: -150%;
    width: auto;
    height: 100vh;
}/*
section.banners .banner-content {
}
section.banners .banner-text {
    width: 70%;
    margin: auto;
    transform: translate(-50%,calc(-50% + 40px));
}
section.banners .banner-text .banner-title {
    font-size: 2rem;
}
section.banners .banner-text .banner-subtitle {
    font-size: 1.2rem;
}
section.banners .banner-text .banner-button {
    margin: 20px auto;
    width: 200px;
    font-size: 16px;
}
section.banners .banner-text {
    padding: 0;
}

section.banners .banner-carousel .slick-prev, section.banners .banner-carousel .slick-next, section#testimonials .slick-prev, section#testimonials .slick-next {
    width: 30px;
    height: 30px;
    background-size: 40%;
} */


section.banners .banner-carousel li .banner-content h1 {
    font-size: 2.8rem;
    line-height: 1.2;
}
section.banners .banner-carousel li .banner-content div {
    font-size: 1rem;
    line-height: 1.6;
}
form.course-filter {
    padding: 15px 25px;
    box-shadow: none;
}
#webpage form.course-filter {
    width: 100%;
}
form.course-filter label {
    display: block;
    float: none;
    text-align: center;
}
.select, select {
    width: 100%;
    margin: 0 0 20px;
}
form.course-filter input[type="submit"] {
    float: none;
    width: 100%;
}
.course-category {
    display: block;
    float: none;
    width: 100%;
    margin: 0 0 20px 0;
}
.course-category .course-info {
    font-size: 0.875rem;
}
.course-category .category-view {
    height: auto;
    font-size: 1rem;
}
.course-category .category-view::before {
    font-size: 1rem;
    line-height: initial;
}
.sales-block .sales-messages {
    flex-wrap: wrap;
}
.sales-block .sales-message {
    flex-basis: 100%;
}
.perks .container {
    flex-wrap: wrap;
}
a.perk {
    flex-basis: 100%;
    padding-bottom: 110px;
    margin: 0 0 40px 0;
}
.news h2 {
    flex-basis: 100%;
    text-align: left;
    word-spacing: 0;
    margin: 0 0 20px;
}
a.news-item, a.news-item:first-of-type {
    flex-basis: 100%;
    margin: 0 0 20px 0;
    padding: 25px 15px 100px;
}
footer.site-footer .container {
    flex-wrap: wrap;
}
footer.site-footer .primary .footer-block {
    width: 50%;
    margin: 0 0 20px 0;
}
footer.site-footer .secondary .container {
    width: 100%;
    flex-wrap: wrap;
}
footer.site-footer .secondary .container div, footer.site-footer .secondary ul {
    flex-basis: 100%;
    text-align: center;
    margin: 0 0 20px 0;
}
footer.site-footer .secondary ul {
    margin: 0;
}
footer.site-footer .secondary .footer-block:nth-of-type(3) {
    text-align: center;
}
.webpage-content {
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}
.webpage-content ul {
    padding: 0 0 0 20px;
}
.sidebar {
    box-shadow: none;
}
.webpage-title {
    width: 100%;
    padding: 20px;
    font-size: 2rem;
    box-shadow: none;
}
#course .webpage-content h2 {
    padding: 20px;
}
#course .webpage-content .section-content {
    padding: 20px;
}
a.search-result {
    flex-wrap: wrap;
}
a.search-result span {
    width: 100%;
}
.course-summary .course-types {
    margin: 20px 0 0 0;
}
#course .supplemented,
.supplemented {
    width: 100%;
}
aside {
    width: 100%;
    margin: 30px 0 0 0;
}
.course-bookable {
    box-shadow: none;
}
.course-bookable .tabs::after {
    content: " ";
    display: table;
    clear: both;
}
.course-bookable .tab {
    width: 100%;
    font-size: 1rem;
    padding: 10px;
}
.course-bookable .tab-content {
    margin: 20px 0 0;
}
.course-bookable .tab-content > .title {
    font-size: 1rem;
}
.scheduled-course-options > .option,
.scheduled-course-options .future-dates > .option,
.additional-course-options {
    flex-wrap: wrap;
}
.scheduled-course-options .option .course-date,
.scheduled-course-options .option .course-duration,
.scheduled-course-options .option .course-location,
.scheduled-course-options .option .course-price,
.scheduled-course-options .option .course-delegates,
.scheduled-course-options .option .course-add {
    flex-basis: 100%;
    margin: 5px 0;
}
.scheduled-course-options .option .course-delegates,
.scheduled-course-options .option .course-add {
    padding: 0;
}
.additional-course-options .option {
    flex-basis: 100%;
}
.venue-course-container {
    padding: 20px;
}
.venues-container .venue {
    flex-wrap: wrap;
    padding: 5px;
}
.venues-container .venue .venue-data {
    flex-basis: 100%;
    padding: 5px;
}

.site-content ul.pagination li {
    margin-bottom: 5px;
}
.course-summary {
    box-shadow: none;
    padding: 20px;
}
.site-content article .cpd {
    box-shadow: none;
}
.course-summary-c2a {
    background-position: center left 10px;
    background-size: 70px;
}
.course-summary-c2a h3 {
    font-size: 1.2em;
}

.how-to-book .way-to-pay {
    min-height: 150px;
}
.additional-course-options .option .prices {
    padding-top:  55px;
    font-size: 11px;
}
.delegates .delegate-information label,
.delegates .delegate-information input[type="text"],
.delegates .delegate-information .dietary-reqs,
.delegates .delegate-information textarea {
    flex-basis: 100%;
}
.delegates .delegate-information .dietary-reqs {
    align-items: center;
}
.cart.login-forms form {
    flex-basis: 100%;
}
.cart.login-forms form:not(:first-child) {
    margin-top: 40px;
}
.customer-details .text-field {
    width: 100%;
}
.payment-method {
    flex-basis: 100%;
    margin: 0;
}
.payment-method:not(:first-of-type) {
    margin-top: 40px;
}

.category-content {
    /* padding: 0; */
}
.category-list-item > a {
    flex-wrap: wrap;
}
.category-list-item .name {
    flex-basis: 100%;
}
.category-list-item .toggle {
    flex-basis: 100%;
}
.category-list-item .count {
    flex-basis: 100%;
}
footer.site-footer .primary::after {
    filter: none;
}
footer .container {
    padding: 20px 0;
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */

.additional-course-options .option .prices {
    width: 30%;
    margin: 0 120px 0 0;
    font-size: 14px;
    padding-top: 20px;
}
}

}
@media print {
@page { size: auto;  margin: 0mm; }
body {
    padding: 20px;

}
.wrapper {
    margin-left: 0;
    margin-right: 0;
}
.preloader,
.browserupgrade,
.mobile-menu,
.site-nav,
footer
{
    display: none;
}
.site-logo {
    display: block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
}