/*
Theme Name: Parker Meggitt VM Academy
Author: TFWX
Description: Theme for the Parker Meggitt VM Academy
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content:none;
}

a {
    margin:0;
    padding:0;
    color: unset;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
a:hover { color: var(--COLOUR-YELLOW);}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/* clears the 'X' from Internet Explorer */
input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }

/* clears the 'X' from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

/******************************************************************************
* Variables *
******************************************************************************/
:root {



    --BORDER_WIDTH_NORMAL: 2px;
    --BORDER_WIDTH_THICK: 4px;
    --BORDER_WIDTH_THIN: 1px;
    --COLOUR-YELLOW: #FDB913;
    --COLOUR-CHARCOAL: #1C2B39;
    --COLOUR-INVALID: #ed3232;
    --COLOUR-BLUE: #0082C4;
    --COLOUR-GREEN: #7BBA3E;
    --COLOUR-ORANGE: #F7922B;
    --COLOUR-TEAL: #00A7B5;
    --COLOUR-DEEP-BLUE: #003468;
    --COLOUR-GREY-DARK: #222222;
    --COLOUR-GREY-MEDIUM: #313131;
    --COLOUR-WHITE: #ffffff;
    --COLOUR-PURPOSE-BLUE: #007EBB;
    --DARK-ROW: #3a434a;
    --LIGHT-ROW: #585f65;
    --COLOUR-GREY-MEDIUM-ALT: #6e6e6e;
    --COLOUR-GREY-LIGHT: #3f3f40;
    --COLOUR-GREY-LIGHT-ALT: #a3a3a3;
    --CONTAINER_BOXES_MAXIMUM: 100%;
    --CONTAINER_CONTENT_MAXIMUM: 100%;
    --CONTAINER_PARAGRAPHS_MAXIMUM: 100%;




    --FONT_FAMILY_HEADING1: PragmaticaBold, Arial;
    --FONT_FAMILY_HEADING2: PragmaticaMedium, Arial;
    --FONT_FAMILY_HEADING3: PragmaticaBook, Arial;
    --FONT_FAMILY_NORMAL: PragmaticaBook,Arial;
    --FONT_FAMILY_BOLD: PragmaticaBlack, Arial;
    --FONT_FAMILY_LIGHT: PragmaticaLight;
    --FONT_FAMILY_INPUT: PragmaticaMedium, Arial;
    --FONT_FAMILY_BUTTON: PragmaticaMedium, Arial;


    /* Small FONT SET */

    --FONT_SIZE_H1_SM: 48px;
    --FONT_SIZE_H2_SM: 36px;
    --FONT_SIZE_H3_SM: 30px;
    --FONT_SIZE_H4_SM: 24px;
    --FONT_SIZE_H5_SM: 20px;
    --FONT_SIZE_H6_SM: 16px;
    --FONT_SIZE_P_SM: 16px;

    --LINE_HEIGHT_H1_SM: 48px;
    --LINE_HEIGHT_H2_SM: 44px;
    --LINE_HEIGHT_H3_SM: 34px;
    --LINE_HEIGHT_H4_SM: 32px;
    --LINE_HEIGHT_H5_SM: 24px;
    --LINE_HEIGHT_H6_SM: 18px;
    --LINE_HEIGHT_P_SM: 24px;

    /* Medium FONT SET */

    --FONT_SIZE_H1_MD: 54px;
    --FONT_SIZE_H2_MD: 42px;
    --FONT_SIZE_H3_MD: 36px;
    --FONT_SIZE_H4_MD: 30px;
    --FONT_SIZE_H5_MD: 24px;
    --FONT_SIZE_H6_MD: 18px;
    --FONT_SIZE_P_MD: 18px;

    --LINE_HEIGHT_H1_MD: 54px;
    --LINE_HEIGHT_H2_MD: 42px;
    --LINE_HEIGHT_H3_MD: 36px;
    --LINE_HEIGHT_H4_MD: 38px;
    --LINE_HEIGHT_H5_MD: 28px;
    --LINE_HEIGHT_H6_MD: 20px;
    --LINE_HEIGHT_P_MD: 26px;

    /* Large FONT SET */

    --FONT_SIZE_H1_LG: 72px;
    --FONT_SIZE_H2_LG: 60px;
    --FONT_SIZE_H3_LG: 48px;
    --FONT_SIZE_H4_LG: 36px; 
    --FONT_SIZE_H5_LG: 24px; 
    --FONT_SIZE_H6_LG: 18px; 
    --FONT_SIZE_P_LG: 20px; 

    --LINE_HEIGHT_H1_LG: 72px;
    --LINE_HEIGHT_H2_LG: 60px;
    --LINE_HEIGHT_H3_LG: 48px;
    --LINE_HEIGHT_H4_LG: 44px;
    --LINE_HEIGHT_H5_LG: 30px;
    --LINE_HEIGHT_H6_LG: 20px;
    --LINE_HEIGHT_P_LG: 28px;


    --UNIT_01: 4px;
    --UNIT_02: 8px;
    --UNIT_03: 12px;
    --UNIT_04: 16px;
    --UNIT_05: 20px;
    --UNIT_06: 24px;
    --UNIT_07: 28px;
    --UNIT_08: 32px;
    --UNIT_09: 36px;
    --UNIT_10: 40px;
    --UNIT_11: 44px;
    --UNIT_12: 48px;
    --UNIT_13: 52px;
    --UNIT_14: 56px;
    --UNIT_15: 60px;
    --UNIT_16: 64px;
    --UNIT_17: 68px;
    --UNIT_18: 72px;
    --UNIT_19: 76px;
    --UNIT_20: 80px;
}

/*#region SWIPER JS CUSTOM */

.autoplay-progress {
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--COLOUR-YELLOW);
}

.autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 4px;
    stroke: var(--COLOUR-YELLOW);
    fill: none;
    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
}

/*#endregion SWIPER JS CUSTOM */

html, body { font-family: var(--FONT_FAMILY_NORMAL) !important; }

body { overflow-x: hidden;}
main { position: relative;}

* {
    font-weight: normal;
    font-family: var(--FONT_FAMILY_NORMAL);
    box-sizing: border-box; padding: 0; margin: 0;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

a { text-decoration: none!important;}
a:hover, a:focus { color: var(--COLOUR-YELLOW); cursor: pointer;}


/*#region SWITCH COMPONENT */
.switchWrapper { display: flex; flex-direction: row; align-items: center; }
.lblName { margin-left: var(--UNIT_02);}
.switch { position: relative; display: inline-flex; width: 40px; height: 20px;}
.switch input { opacity: 0; width: 0; height: 0;}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e5e5;
    -webkit-transition: .4s;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    box-shadow: 1px 1px 2px -1px rgba(51, 51, 51, 0.3);
}
input:checked + .slider { background-color: #007aff; }
input:focus + .slider { box-shadow: 0 0 1px #007aff; }
input:checked + .slider:before { -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); }
.slider.round { border-radius: 20px; }
.slider.round:before { border-radius: 50%; }

/*#endregion SWITCH COMPONENT */


/* Generic Input Fields */

input:not([type="checkbox"]):not([type="radio"]), select { background-color: #e5e5e5; padding: var(--UNIT_04); width: 100%; max-width: 450px; outline: none;}
input[type="submit"] { background-color: #007aff; color: white; font-family: var(--FONT_FAMILY_HEADING2); border-radius: 6px;}
input[type="submit"]:disabled { background-color: #9abbe0; }

label:has(input[type="radio"]) { padding: 1vh 2vw; }
label:has(input[type="radio"]:checked) { background-color: #e5e5e5; border-bottom: 2px solid var(--COLOUR-YELLOW); }

.filters { height: 5vh; display: flex; align-items: center; }

.sticky-header {
    background-color: rgba(0,0,0,1);
    color: white;
    text-align: center;
    padding: var(--UNIT_06) var(--UNIT_08);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    height: 78px;

}
.nav-wrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0 auto;}

.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    visibility: hidden; 
    opacity: 0; 
    transform: translateY(-20px); 
    transition: opacity 0.5s, transform 0.5s, visibility 0s 0.5s;
    position: absolute;
    top: 78px;
    left: 0;
    width: 100%;
    background-color: rgba(0,0,0,1);
}

.nav-menu.active { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity 0.5s, transform 0.5s; }
.nav-menu li { text-align: right; width: 100%; padding: var(--UNIT_05) var(--UNIT_08); }
.nav-menu li a { color: white; text-decoration: none; font-size: 16px; }
.nav-menu li:hover { color: var(--COLOUR-YELLOW);}
.menu-icon { display: none; font-size: 30px; cursor: pointer; }
.nav-menu .learnButton { margin-top: 0; margin-left: auto; font-size: 16px; padding: var(--UNIT_02) 0; border: 2px solid var(--COLOUR-YELLOW); background: none; color: var(--COLOUR-YELLOW); justify-content: flex-end;}
.signedInWrapper { display: flex; align-items: center; gap: var(--UNIT_06); width: 32px; }
.signedInWrapper img { width: 100%;  }
.signedInWrapper img.notification-icon { width: 24px; }
.profileImg { border-radius: 50%;}

@media (max-width: 1023px) {
    .menu-icon { display: block; }
    .option-search, .option-profile { display: none; min-width: 150px; }
}
body.home section > div > *:not(.swiper-wrapper) { opacity: 0;}

section.home { background-size: cover; width: 100%; color: white; position: relative; }
section.home::after { content:""; z-index: 0; position: absolute; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.35); width: 100%; height: 100%; }
section.home h4 { margin: var(--UNIT_06) 0;}
section { padding: var(--UNIT_10) var(--UNIT_08); position: relative; display: flex; flex-direction: column; }

h1 { font-size: var(--FONT_SIZE_H1_SM); line-height: var(--LINE_HEIGHT_H1_SM); font-family: var(--FONT_FAMILY_HEADING1);}
h2 { font-size: var(--FONT_SIZE_H2_SM); line-height: var(--LINE_HEIGHT_H2_SM); font-family: var(--FONT_FAMILY_HEADING1);}
h3 { font-size: var(--FONT_SIZE_H3_SM); line-height: var(--LINE_HEIGHT_H3_SM); font-family: var(--FONT_FAMILY_HEADING1); }
h4 { font-size: var(--FONT_SIZE_H4_SM); line-height: var(--LINE_HEIGHT_H4_SM); font-family: var(--FONT_FAMILY_HEADING1);}
h5 { font-size: var(--FONT_SIZE_H5_SM); line-height: var(--LINE_HEIGHT_H5_SM); font-family: var(--FONT_FAMILY_HEADING1); }
h6 { font-size: var(--FONT_SIZE_H6_SM); line-height: var(--LINE_HEIGHT_H6_SM); font-family: var(--FONT_FAMILY_HEADING1);}
p { font-size: var(--FONT_SIZE_P_SM); line-height: var(--LINE_HEIGHT_P_SM); font-family: var(--FONT_FAMILY_NORMAL); }
h6.subtitle { color: #8F8F8F; font-family: var(--FONT_FAMILY_HEADING2); } 
.book { font-family: var(--FONT_FAMILY_NORMAL)!important; }
.light { font-family: var(--FONT_FAMILY_LIGHT)!important; }

.home-content { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; z-index: 1;}
.logo { width: 150px; display: flex; }
.logoMedium { width: 240px; }

.nav-icon { margin-left: var(--UNIT_01); width: 16px;}
.home h1 { margin-top: var(--UNIT_12); }
.home h3 { margin:var(--UNIT_06) 0;}

.learnButton { transition: all 0.25s linear; border:none!important; font-family: var(--FONT_FAMILY_HEADING1); padding: var(--UNIT_04); display: flex; align-items: center; background-color: var(--COLOUR-YELLOW); color: black; max-width: 200px; }
.learnButton.blue { background-color: #007ebb; color: white;}
.learnButton.blue:hover { color: white!important; background-color: #006192;}

.home .learnButton:hover { transition: all 0.25s linear; background-color: white; color: black;}

.nav-list .learnButton { margin-left: auto; padding: var(--UNIT_02) var(--UNIT_04); justify-content: center; border: 2px solid var(--COLOUR-YELLOW); background: none; color: var(--COLOUR-YELLOW); }

.special { color: var(--COLOUR-YELLOW);}
a.special:hover { color: black;}
.inline-arrow { margin-left: var(--UNIT_01);}

.home .title h2 { margin-top:var(--UNIT_06); }
.home .title h4 { margin: var(--UNIT_06) 0 ; }
h5.special { margin: 0; text-transform: uppercase; }

.searchWrapper { display: flex; flex-direction: column; width: auto; }
.searchWrapper input { padding: var(--UNIT_02); background-color: #f1f1f1; margin: var(--UNIT_04) 0; }
.searchWrapper input:focus { outline: none; }
.searchWrapper a { height: 40px; display: flex; align-items: center; width:fit-content; transition: all 0.25s linear;  padding: var(--UNIT_02) var(--UNIT_03); border: 2px solid var(--COLOUR-YELLOW); text-decoration: underline; font-family: var(--FONT_FAMILY_HEADING2); color: black; }
.searchWrapper a:hover { background-color: var(--COLOUR-YELLOW); transition: all 0.25s linear; }

.certificateIcon { width: 20px; margin-right: var(--UNIT_01);}

.categoryGrid { display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: var(--UNIT_08); margin:var(--UNIT_06) 0 0 0; width: 100%;}

.categoryGrid .special span, .about-content .special span { font-size: 18px; font-family: var(--FONT_FAMILY_HEADING2); display: flex; align-items: center;}
.categoryGrid .special img { width: 20px; }
.categoryTitle { display: flex; align-items: center; position: relative; }
.categoryTitle h2 { padding: var(--UNIT_02);}
.categoryTitle h4 { width: 86%; }

.categoryIcon { width: 40px; position: absolute; right: 0; top: 0; background-color: var(--COLOUR-YELLOW); padding: var(--UNIT_02);}

.categoryCell p { margin: var(--UNIT_04) 0; }

.swiper { display: flex; width: 100%; overflow: unset; }

.swiper-slide { display: flex; width: 100%; overflow: hidden; position: relative; flex-direction: column;max-width: 550px; margin: 0 auto; border-radius: var(--UNIT_03); }
.swiper-slide .slide-img { object-fit: cover; width: 100%; }
.slide-content { position: relative; padding: var(--UNIT_05); background-color: white; color: black; display: flex; flex-direction: column; min-height: 250px; width: 100%; }
.slide-content::after { position: absolute; content: ""; right: 0; bottom: 0; width: 18px; height: 18px; background-image:url(./images/icons/chamfer.svg);}
.slide-content h2 { margin: 0;}


.highlighted-courses { background-color: #F1F1F1; display: flex; flex-direction: column; overflow: hidden; }
.highlighted-courses .slide-content { background-color: var(--COLOUR-CHARCOAL); color: white;}
.highlighted-courses .slide-content p { margin: var(--UNIT_04) 0;}
.certificateLabel { position: relative; background-color: var(--COLOUR-YELLOW); padding: var(--UNIT_02); display: flex; align-items: center; max-width: 200px; font-size: 10px; color: black; font-family: var(--FONT_FAMILY_HEADING2); margin-bottom: var(--UNIT_04); }
.certificateCut { position: absolute; bottom: 0; right: 0; width: 0px; height:0px; border-bottom: 14px solid var(--COLOUR-CHARCOAL); border-left: 14px solid transparent; }
.slide-content-extra { display: flex; justify-content: space-between; margin-top: auto; border-top: 1px solid var(--COLOUR-YELLOW); padding-top: var(--UNIT_04);}
.slide-content-extra h6 { font-size: 14px; line-height: 14px;}

.aboutWrapper { background-color: var(--COLOUR-YELLOW); position: relative; width: 100%;}
.about { display: grid; width: 100%; grid-template-columns: repeat(1, 1fr); grid-gap: var(--UNIT_12); }

.about-content { margin-top: var(--UNIT_12); display: flex; flex-direction: column; justify-content: space-between; position: relative;}
.about-content > *:not(:last-child) { margin-bottom: var(--UNIT_04);}
.about-content span { display: flex; align-items: flex-start; flex-wrap: wrap; }
.about-content-title img { margin-bottom: var(--UNIT_04); }
.about-content a { color: white; }
.about-logos { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: var(--UNIT_06); width: 100%; grid-gap: var(--UNIT_06);}
.about-logos div { display: flex; align-items: center; justify-content: center; max-height: 72px; }
.about-logos img { width: 75%; max-width: 100px; opacity: 0.8; }


.img-product { width: 100%; max-width: 450px; margin: auto; }
.img-product img { transform: rotate(-18deg); width: 100%; }
.shadow { display: block; height: 10px; width: 90%; margin: 0 auto; max-width: 450px; background: linear-gradient(90deg, rgba(28, 30, 32, 0.8) 29.25%, rgba(28, 30, 32, 0.192) 100%); filter: blur(13.1px);}

.partners-section ul { list-style: none; display: flex; }
.partners-section ul li { padding: var(--UNIT_04); margin-top: var(--UNIT_04);}


/* #region FAQ */

.faqs { background-color: #202124; }
.faqs h1 { margin-bottom: var(--UNIT_08);}
.faq-container { max-width: 960px; color: white; margin: 0 auto; }
.faq-list { list-style: none; padding: 0; }

.faq-question {
    width: 100%;
    padding: var(--UNIT_04) 0;
    text-align: left;
    font-size: var(--FONT_SIZE_P_SM);
    font-family: var(--FONT_FAMILY_HEADING2);
    line-height: var(--LINE_HEIGHT_P_SM);
    border: none;
    outline: none;
    background: none;
    display: flex;
    color: white;
    cursor: pointer;
    border-bottom: 1px solid rgba(212, 212, 212);
}


.faq-question:hover { background: none; } 
.faq-question:focus { background-color: unset;}
.faq-answer { padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
.faq-answer p { font-family: var(--FONT_FAMILY_LIGHT)!important; margin: var(--UNIT_04) 0; }
.faq-question .toggle-icon { margin-left: auto; margin-right: var(--UNIT_03); }
.dark-faq .faq-question { color: black; }

.faq-question-dropdown.active { color: var(--COLOUR-YELLOW);}

.resources-faq-list { display: flex; flex-direction: column; align-items: center; list-style: none; }
.resources-faq-list li, .resources-faq-list a { width: 100%; }

/* #endregion FAQ */


/* #region Footer */

footer { padding: var(--UNIT_08); position: relative; background-color: #202124; color: white;}
footer .social { border-bottom: 1px solid rgba(255, 255, 255, .2); padding-bottom: var(--UNIT_04); display: flex; width: 100%; }
footer .social .brand { max-width: 50%; margin-right: auto;}
footer .social :not(.brand) { margin-left: var(--UNIT_03); }
footer .copyright ul { list-style: none; padding-top: var(--UNIT_04); display: flex; flex-direction: column; font-size: 16px; color: #b8b8b8;}
footer .copyright ul li { padding: var(--UNIT_04) 0; display: flex; }
footer .copyright ul li:not(:last-child) { padding-right: var(--UNIT_04);}
footer .copyright ul li:first-child { margin-right: auto;}
footer .copyright ul li a { color: #b8b8b8; text-decoration: none;}

/* #endregion Footer */

.swiper-recommended { display: flex; width: 100%;}
.swiper-recommended .swiper-slide { margin: 0;}
.swiper-recommended > * { user-select: none;}


/* THIS SECTION IS FOR INDIVIDUAL COMPONENTS */

/* Aside Menu for pages */
.aside { position: fixed; left: 0; top: 78px; width: 100%; z-index: 10; padding: var(--UNIT_06) var(--UNIT_08) var(--UNIT_06) var(--UNIT_08); background-color: #f5f5f5;}
.sidemenu li, .sidemenu a { font-family: var(--FONT_FAMILY_HEADING2); color: #8f8f8f;}
.sidemenu .sub-menu .aside-active { color: var(--COLOUR-YELLOW); position: relative; }
.sidemenu .sub-menu .aside-active::before { content: ""; position: absolute; bottom: -8px; left:0; height: 2px; width: 100%; background-color: var(--COLOUR-YELLOW);}

/* CATEGORY CARDS */

.categories { background-color: #F5F5F5; }
.categories-content { display: flex; width: 100%; flex-wrap: wrap; position: relative;}

.categories-grid { display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: repeat(1, minmax(0, 1fr)); width: 100%; overflow: hidden; grid-gap: var(--UNIT_06); margin-top: var(--UNIT_06);}
.categories-grid-cell { background-color: white; width: 100%; display: flex; flex-direction: column; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.1);}
.categories-grid-cell a { color: unset;}
.categories-grid-cell-image { display: flex; position: relative; aspect-ratio: 16/9;}
.categories-grid-cell-image img { object-fit: cover; width: 100%; }
.categories-grid-cell-image img.featured-image { background-color: white; }

.categories-grid-cell-image .categoryIconWrapper { display: none; position: absolute; bottom: var(--UNIT_03); left: var(--UNIT_03); margin-right: var(--UNIT_02);}
.categories-grid-cell-image .categoryIconWrapper .categoryIcon { width: 20px;}
.categories-grid-cell-text { min-width: 100px; display: flex; flex-direction: column; height: 100%; width: 100%; background-color: white; padding:var(--UNIT_03); }
.categories-grid-cell-text h6 { margin-top: 0; text-align: left; margin-bottom: var(--UNIT_03); }
.categories-grid-cell-text h6.subtitle { margin-top: 0; color: #8F8F8F; margin-bottom: var(--UNIT_02);}
.categories-grid-cell-text .categories-grid-cell-text-desc { color: #8F8F8F; margin-bottom: var(--UNIT_04); width: 100%; display: -webkit-box; -webkit-line-clamp: 4; overflow: hidden; -webkit-box-orient: vertical; }

.categories-grid-cell .learnButton { margin-top: auto; max-width: unset; justify-content: center;}

.categories-wrapper { margin-top: 360px; }
.categories-wrapper h2 { color: var(--COLOUR-YELLOW); text-align: left!important;  }

/* TUTORIAL CARDS */
.tutorials, .sales-materials, .resources, .privacy-policy  { background-color: #F5F5F5; }
.tutorials-content, .sales-content, .webinar-content { display: flex; flex-direction: column; width: 100%; position: relative; max-width: 1800px; }
.tutorials-wrapper, .sales-wrapper, .webinar-wrapper, .resources-wrapper { width: 100%;  margin-top: 162px;}
.tutorials-wrapper h2, .sales-wrapper h2, .webinar-wrapper h2, .resources-wrapper h2 { text-align: left!important; color: var(--COLOUR-YELLOW);}

.tutorials-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); width: 100%; overflow: hidden; grid-gap: var(--UNIT_06); margin-top: var(--UNIT_04); }
.tutorials-grid-cell { width: 100%; display: flex; flex-direction: column; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.tutorials-grid-cell-image { display: flex; width: 100%; height: 180px; position: relative;}
.tutorials-grid-cell-image img { object-fit: cover; width: 100%;}
.tutorials-grid-cell-image .categoryIconWrapper { position: absolute; bottom: var(--UNIT_03); left: var(--UNIT_03);}
.tutorials-grid-cell-image .categoryIconWrapper .categoryIcon { width: 20px;}
.tutorials-grid-cell-text { display: flex; flex-direction: column; width: 100%; justify-content: space-between;}
.tutorials-grid-cell-text h3 { text-align: left; }
.tutorials-grid-cell-text p { color: #8F8F8F; margin:var(--UNIT_06) 0; }
.tutorials-grid-cell-text a { text-decoration: underline; color: black;}
.tutorials-grid-cell-text-extra { display: flex; gap: var(--UNIT_10); margin-bottom: var(--UNIT_04);}
.tutorials-grid-cell-text-extra .learnButton { max-width: fit-content; }

/* WEBINAR CARDS */

.webinar-grid { display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: var(--UNIT_06);}
.webinar-grid-cell { width: 100%; display: flex; flex-direction: column; background-color: white; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); }
.webinar-grid-cell-image { display: flex; width: 100%; position: relative; max-height: 250px;}
.webinar-grid-cell-image img { object-fit: cover; width: 100%;}
.webinar-grid-cell-image .categoryIconWrapper { position: absolute; bottom: var(--UNIT_03); left: var(--UNIT_03);}
.webinar-grid-cell-image .categoryIconWrapper .categoryIcon { width: 20px;}
.webinar-grid-cell-text {  display: flex; flex-direction: column; width: 100%; height: 100%; justify-content: space-between; padding: var(--UNIT_06); }
.webinar-grid-cell-text > *:not(:last-child) { margin-bottom: var(--UNIT_03);}
.webinar-grid-cell-text h3 { text-align: left; }
.webinar-grid-cell-text p { font-size: 16px; color: #8F8F8F; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;}
.webinar-grid-cell-text .learnButton { margin-top: auto; max-width: unset; width: fit-content; }
.webinar-grid-cell-text-extra { display: flex; gap: var(--UNIT_10); }


/* LOGIN */

.loginWrapper {  height: 100vh; display: flex; padding: var(--UNIT_10) var(--UNIT_08); flex-direction: column; }

.login-content .logoMedium { margin: 0 auto; }

.login-content { background: white; display: flex; height: 100%; width: 100%; max-width: 450px; margin: 0 auto; flex-direction: column; justify-content: center;}
.login-content h2 { font-size: 20px; line-height: 28px; text-align: center;}
.login-details { display: flex; flex-direction: column; margin: auto 0; }
.login-details > *:not(:last-child):not(p) { margin-bottom: var(--UNIT_04); }
.login-details label { text-align: center; font-size: 14px; }
.login-details label a { color: #007aff; font-size: 14px; margin-left: var(--UNIT_02); }
.login-bottom { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
.login-bottom p { width: 100%; font-size: 8px; line-height: 16px; }
.login-bottom label { font-size: 12px; line-height: 16px; color: #8f8f8f; }

.login-details .extra-options { display: flex; flex-direction: row; justify-content: space-between; margin-bottom: var(--UNIT_08);}
.login-details .extra-options a { color: #007aff; font-size: 14px; }

.login-details input[type=submit] { cursor: pointer; transition: all 0.25s linear;}
.login-details input[type=submit]:hover { background-color:#0055b0; transition: all 0.25s linear;}

.dashboard-courses { background-color: #f1f1f1;}
.dashboard-courses-content { max-width: 1366px; margin: 0 auto; width: 100%;}
.dashboard-courses-content .subtitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--UNIT_02); margin-bottom: var(--UNIT_06);}
.dashboard-courses-content a { display: flex; color: black; }
.dashboard-courses-content a:hover { color: var(--COLOUR-BLUE); font-weight: bold; }
.dashboard-courses-content .subtitle img { width: 12px; margin-left: var(--UNIT_01);}
.dashboard-explore { position: relative;}


.dashboard-explore-content { margin: 0 auto;}
.dashboard-courses .recommended-course-title { height: 3em;  display: -webkit-box; -webkit-box-orient: vertical; }

.my-courses { display: flex; flex-direction: column; overflow: hidden; margin: var(--UNIT_06) 0;}
.my-courses .slide-content { background-color: white; color: black;}
.my-courses .slide-content p { display: -webkit-box; -webkit-line-clamp: 5; overflow: hidden; -webkit-box-orient: vertical; }
.my-courses .slide-content .certificateCut { border-bottom: 14px solid white;}
.my-courses .swiper-slide { overflow: visible;}
.my-courses .swiper-pagination { position: relative; background-color: #f1f1f1; padding: var(--UNIT_04);}

.my-courses .swiper-pagination-bullet {
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    border-radius: 4px;
    color: #000;
    opacity: 1;
    background: rgba(0, 0, 0, 0.2);
}

.my-courses .swiper-pagination-bullet-active {
    color: #fff;
    background: #007aff;
}



.highlighted-courses .swiper { margin: var(--UNIT_06) auto 0 auto; max-width: 550px; }

.dashboard-explore-content .categoryGrid { grid-template-columns:repeat(1, minmax(0, 1fr)); }

.recommended-courses { display: flex;  flex-direction: column;  overflow: hidden;}
.recommended-courses .swiper-slide { max-width: 200px; border-radius: 0; flex-direction: column; }
.recommended-courses .swiper-slide .slide-img { width: 100%;}
.recommended-courses .swiper-slide .slide-content { padding: var(--UNIT_03); min-height: 175px;}
.recommended-courses .swiper-slide .slide-content p { font-size: 12px; line-height: 15px;}
.recommended-courses .swiper-slide h2 { font-size: 14px; line-height: 20px; }
.recommended-courses .swiper-scrollbar { margin: var(--UNIT_04) 0; background-color: rgba(0, 0, 0, 0.15); position: relative; height: 10px; left: unset; top: unset; bottom: unset; width: 100%;}
.recommended-courses .swiper-scrollbar-drag { background-color: #007aff;}

.dashboard-account { background-color: #f1f1f1;}
.dashboard-account-reset  { display: flex; flex-direction: column; gap: var(--UNIT_06); margin-top: var(--UNIT_06);}


/* 404 */
.PageFailError { background: #f5f5f5;}
.PageFailError::before { content: ""; display: block; position: absolute; background-image: url(./images/icons/logoshort.svg); background-size: 240px; width: 100%; top: 0; left: 0; height: 100%; z-index: 0; }
.PageFailError::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(0deg, #f5f5f5 0%, rgba(241, 241, 241, 0) 100%); height: 200px; z-index: 1;}

.PageFailError h1 { font-size: clamp(160px, 25vw, 270px); line-height: clamp(160px, 25vw, 270px); font-family: var(--FONT_FAMILY_BOLD);}
.PageFailError h2 { font-size: clamp(24px, 5vw, 64px); line-height: clamp(24px, 6vw, 78px); }
.PageFailError p { font-size: clamp(16px, 3vw, 28px); line-height: clamp(20px, 3.5vw, 30px);}

.PageFailError .PageFailErrorContent { margin: 0 auto; max-width: 1366px; display: flex; justify-content: center; flex-direction: column; align-items: center; width: 100%;  z-index: 2;}
.PageFailError .PageFailErrorContent > *:not(:last-child) { margin-bottom: var(--UNIT_10);}

.PageFailErrorContentText{ z-index: 5; text-align: center;}
.PageFailErrorContentText .learnButton { max-width: 240px; justify-content: center; margin: 0 auto; margin-top: var(--UNIT_10);}
.PageFailErrorContentText .learnButton img.flip { transform: rotateY(180deg); margin-left: 0; margin-right: var(--UNIT_01);}

.courses .recommended-courses { width: 100%; z-index: 5; max-width: 1366px; margin: 0 auto;}
.courses .subtitle { margin-bottom: var(--UNIT_12); }
.courses .subtitle h3 { font-family: var(--FONT_FAMILY_LIGHT); text-align: center; }
.courses .subtitle h3 strong { font-family: var(--FONT_FAMILY_HEADING2); }


/* ABOUT US  */
.aboutUs { background: #f5f5f5; height: calc(100vh - 100px)}
.aboutUs::before { content: ""; display: block; position: absolute; background-image: url(./images/icons/logoshort.svg); background-size: 240px; width: 100%; top: 0; left: 0; height: 100%; z-index: 0; }
.aboutUs::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(0deg, #f5f5f5 0%, rgba(241, 241, 241, 0) 100%); height: 200px; z-index: 1;}
.aboutUsContent { height: 100%; margin: 0 auto; max-width: 1366px; display: flex; background-color: white; justify-content: center; flex-direction: column; align-items: center; width: 100%;  z-index: 1;}
.aboutUsContentText { z-index: 5; text-align: center;}
.aboutUsContentText > *:not(:last-child) { margin-bottom: var(--UNIT_04);}
.aboutUsContentText > p { text-align: left;}


/* Privacy - Terms/Conditions */
.privacy-policy-content { display: flex; width: 100%; flex-wrap: wrap; position: relative; margin: 0 auto; }
.privacy-policy-content .aside { background-color: white;}

.privacy-policy-wrapper { margin-top: 330px; }
.privacy-policy-wrapper h1 { text-align: left; color: var(--COLOUR-YELLOW); font-family: var(--FONT_FAMILY_HEADING1); }
.privacy-policy-wrapper h2, .privacy-policy-wrapper h3 { color: var(--COLOUR-YELLOW); text-align: left; }
.privacy-policy-content h4 { text-align: left; }
.privacy-policy-wrapper > *  { margin-bottom: var(--UNIT_04);}
.privacy-policy-wrapper p { color: #8f8f8f;}

.privacy-policy-content strong { font-weight: bold; }




input[type="checkbox"] { appearance: auto; -moz-appearance: auto; }

.checkbox-wrapper { display: flex; align-items: center; gap: 3%; flex-direction: row; width: 100%; }

.searchWrapper { position: relative; }
.searchWrapper .search-results { position: absolute; background-color: white; height: 30vh; width: 30vw; left: -170%; top: 100%; overflow: scroll; border-radius: var(--UNIT_02); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1); padding: 12% 2% 2%; }
.searchWrapper .search-results a { color: black; max-width: none; padding: 0% 10% 0% 10%; color: black; display: block; text-align: left; }

.dashboard-title { font-family: var(--FONT_FAMILY_HEADING2); }


.validation-error { color: red; font-size: 14px; margin-bottom: 0; }


/* Contact us */
.contact-us .container {
    display: flex;
    width: 90%;
    max-width: 1200px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.contact-us .image-section {
    flex: 1;
    background-size: cover;
}
.form-section {
    flex: 1;
    padding: 40px;
    background: white;
}
.form-section h2 {
    margin-top: 0;
}
.form-section form {
    display: flex;
    flex-direction: column;
}
.form-section input, .form-section textarea {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.form-section button {
    padding: 10px;
    border: none;
    background-color: #f0ad4e;
    color: white;
    cursor: pointer;
    border-radius: 4px;
}
.form-section button:hover {
    background-color: #ec971f;
}
.social-media {
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
}
.social-media a {
    margin-right: 10px;
    color: inherit;
    text-decoration: none;
}

.resources-dropdown { display: flex; flex-direction: column;}
.resources-dropdown a { padding-top: var(--UNIT_04); color: #d5d5d5;}


/* Categories aside menu - mobile bits */

.dropbtn { display: flex; color: black; padding: 16px; width: 100%; font-size: 18px; border: none; cursor: pointer; background-color: var(--COLOUR-YELLOW); }
.dropbtn button { pointer-events: none; background: transparent;}
.dropbtn img { margin-left: 12px; width: 12px; pointer-events: none; }

.dropbtn:hover, .dropbtn:focus { background-color: var(--COLOUR-YELLOW); }

.dropdown-content {
    display: none;
    width: 100%;
    top:100%;
    height: auto;
    max-height: calc(100vh - 180px);
    flex-wrap: nowrap;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow-y:scroll!important;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a { color: black; padding: 10px 16px; text-decoration: none; display: block; }
.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

.resources h1 { color: var(--COLOUR-YELLOW); }


/* Sales materials */
.sales-materials-grid-cell { width: 100%; display: flex; flex-direction: column; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.1);}
.sales-materials-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); width: 100%; overflow: hidden; grid-gap: var(--UNIT_06); margin-top: var(--UNIT_04);}
.sales-materials-grid-cell-image { display: flex; width: 100%; max-height: 250px; position: relative;}
.sales-materials-grid-cell-image img { object-fit: cover; width: 100%; }
.sales-materials-grid-cell-image img.featured-image { background-color: white; }
.sales-materials-grid-cell-image .categoryIconWrapper { position: absolute; bottom: var(--UNIT_03); left: var(--UNIT_03);}
.sales-materials-grid-cell-image .categoryIconWrapper .categoryIcon { width: 20px; }
.sales-materials-grid-cell-text { min-width: 100px; display: flex; flex-direction: column; height: 100%; width: 100%; background-color: white; padding:var(--UNIT_06); justify-content: space-between; }
.sales-materials-grid-cell-text > *:not(:last-child) { margin-bottom: var(--UNIT_03); }
.sales-materials-grid-cell-text p { font-size: 16px; color: #8F8F8F; margin-bottom: var(--UNIT_04); width: 100%; display: -webkit-box; -webkit-line-clamp: 4; overflow: hidden; -webkit-box-orient: vertical; }
.sales-materials-grid-cell-text .learnButton { margin-top: auto; max-width: unset; justify-content: center; }


/* WORDPRESS MENU STYLING */
.sidemenu { position: fixed; left: 0; top: 78px; width: 100%; z-index: 10; padding: var(--UNIT_08); background-color: #F5F5F5; }
.sidemenu ul li { list-style: none; width: fit-content; }
.sidemenu ul li a { font-family: var(--FONT_FAMILY_HEADING2); color: black; display: block; width: auto; }
.sidemenu ul li a:first-of-type.aside-active { color: var(--COLOUR-YELLOW); }
.sidemenu ul li a:hover { color: var(--COLOUR-BLUE); }
.sidemenu .menu-item-has-children { padding-top: var(--UNIT_04); margin-right: 12px; }
.sidemenu a.active-link { color: var(--COLOUR-YELLOW); }
.sidemenu .menu-item-has-children > a { font-size: 18px; margin-bottom: var(--UNIT_04); text-transform: uppercase; font-family: var(--FONT_FAMILY_HEADING2); }
.sidemenu .menu-item-has-children > a:hover { color: var(--COLOUR-YELLOW); }
.sidemenu .sub-menu { display: flex; flex-direction: column; gap: var(--UNIT_04); }
.sidemenu .sub-menu li a { color: #8f8f8f;}
.aside-subtitle { font-size: 18px; text-transform: uppercase; font-family: var(--FONT_FAMILY_HEADING2); color: #000!important; }



div.swiper-slide div.slide-content h2 a { color: white; }
div.swiper-slide div.slide-content h2 a:visited { color: white; }
div.swiper-slide div.slide-content h2 a:active { color: white; }
div.swiper-slide div.slide-content h2 a:hover { color: var(--COLOUR-YELLOW); }


.introduction p { margin-bottom: var(--UNIT_06); margin-top: var(--UNIT_06);}


@media all and (min-width:660px){
    footer .copyright ul { flex-direction: row;}
    .sales-materials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media all and (min-width:768px){
    
    section { padding: 48px;}
    .sticky-header { padding: var(--UNIT_06) var(--UNIT_12);  }
    .aside { padding: 36px 48px; }
    .nav-menu li { padding: var(--UNIT_05) var(--UNIT_12);}

    .sidemenu { padding: var(--UNIT_08) var(--UNIT_12);}
    .sidemenu ul { display:flex; flex-direction: row; flex-wrap: wrap; }
    .sidemenu .menu-item-has-children { margin-right: var(--UNIT_12); }
    .sidemenu ul li:first-child { width: 100%; }

    .swiper-slide {  max-width: unset; flex-direction: row; border-radius: 0; }
    .swiper-slide .slide-img { width: 55%; }
    .about { display: grid; grid-template-columns: minmax(250px, 300px) auto; grid-gap: var(--UNIT_12); overflow: unset;}
    .partners-section { grid-column: span 2; margin: 0 auto; width: 100%;}
    .partners-section ul { justify-content: space-between; }
    .about-content { margin: 0;}
    .about-logos { margin: var(--UNIT_08) auto 0 auto; }


    .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .categories-wrapper { margin-top: 240px; }


    .dashboard-explore-content .categoryGrid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .my-courses { margin: var(--UNIT_08) 0;}
    .my-courses .swiper-slide .slide-img { width: 40%;}
    .highlighted-courses .swiper { max-width: 1366px; margin-top: var(--UNIT_12);}
    
}


@media all and (min-width:800px) {

    .categoryGrid { grid-template-columns: repeat(2, minmax(0, 1fr));}
}


@media all and (min-width:1024px){

    
    h1 { font-size: var(--FONT_SIZE_H1_MD); line-height: var(--LINE_HEIGHT_H1_MD); text-align: center;}
    h2 { font-size: var(--FONT_SIZE_H2_MD); line-height: var(--LINE_HEIGHT_H2_MD); }
    h3 { font-size: var(--FONT_SIZE_H3_MD); line-height: var(--LINE_HEIGHT_H3_MD);  }
    h4 { font-size: var(--FONT_SIZE_H4_MD); line-height: var(--LINE_HEIGHT_H4_MD); }
    h5 { font-size: var(--FONT_SIZE_H5_MD); line-height: var(--LINE_HEIGHT_H5_MD); }
    h6 { font-size: var(--FONT_SIZE_H6_MD); line-height: var(--LINE_HEIGHT_H6_MD); }
    p { font-size: var(--FONT_SIZE_P_MD); line-height: var(--LINE_HEIGHT_P_MD); }
    
    
    .title h2, .title h4, h5.special { text-align: center;}
    section.home h4 { max-width: 550px; text-align: center; }

    .sticky-header { padding: 0 72px; height: 100px; background-color: rgba(0,0,0,1);  backdrop-filter: blur(5px); display: flex; align-items: center; }
    .menu-toggle-button { display: none;}
    .nav-menu { visibility: unset; width: unset; opacity: 1; position: unset; display: flex; flex-direction: row; transform: unset; align-items: center; background-color: transparent }
    .nav-menu li { padding: 0; text-align: center; max-width: 150px; width: 100%; min-width: 110px;}
    .nav-menu li:not(:last-child) { padding-right: var(--UNIT_05); max-width: 150px; }
    .nav-menu li a { text-align: center; transition: all 0.25s ease-in-out; }
    .nav-menu li a:hover { color: var(--COLOUR-YELLOW); transition: all 0.25s ease-in-out;}
    .option-search { min-width: 175px!important; }
    .option-profile { min-width: unset!important;}
    .home-content { padding: 120px; align-items: center;}
    section {  padding: 72px;  }

    .aside { top: 90px; padding: 48px 72px; }
    .sidemenu { top: 90px; margin-bottom: var(--UNIT_04); padding: var(--UNIT_12) 72px; }

    .about { display: flex; flex-direction: row; gap: var(--UNIT_12); }
    .about .about-content { max-width:50%; }
    .about-logos { margin: var(--UNIT_10) auto 0 auto; }



    .highlighted-courses { padding: 120px; }
    footer { padding: var(--UNIT_10) 120px; }
    .swiper-slide { max-height: 450px; max-width: unset; flex-direction: row; }
    .slide-content{ padding-right: var(--UNIT_16);}

    .searchWrapper { margin: var(--UNIT_06) auto; max-width: 550px; }
    .searchWrapper a { text-align: center; margin: 0 auto; }
    section.home h1 { margin-top: unset; }
    /*.signIn { display: none;}*/

    .nav-wrapper { height: 36px;}
    .nav-wrapper .searchWrapper { margin: 0;}
    .nav-wrapper .searchWrapper input { margin: 0; background-color: #303030; color: white;}

    .all-courses::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 45px;
        bottom: -45px;
        left: 0;
        background-position: 50%;
        background-image: url(./images/custompaths/polygon2.svg);
        background-repeat: no-repeat;
        z-index: 1;
    }

    .all-courses .title { display: flex; flex-direction: column;}
    .all-courses .title h3 { margin: var(--UNIT_05) 0;}

    .aboutWrapper::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 45px;
        left: 0;
        top: -45px;
        background-position: 50%;
        background-image: url(./images/custompaths/polygon1.svg);
        background-repeat: no-repeat;
        z-index: 1;
    }

    .aboutWrapper::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 31px;
        bottom: -31px;
        left: 0;
        background-position: 50%;
        background-image: url(./images/custompaths/polygon3.svg);
        background-repeat: no-repeat;
        z-index: 1;
    }

    .categories { padding: 72px;}

    .webinar-grid { grid-template-columns: repeat(2, 1fr);}
    .webinar-grid-cell-image { aspect-ratio: 16/9; max-height: unset;}
    .loginWrapper { background-repeat: no-repeat; padding: 0; background-size: cover; background-blend-mode: multiply; }
    .login-content { max-width: 475px; margin: 0 0 0 auto; padding: var(--UNIT_12); top: 0; position: relative;}
    .login-content .logoMedium { margin: unset; }
    .login-content h2 { text-align: left;}
    
    .dashboard-explore::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 31px;
        top: -0;
        left: 0;
        background-position: 50%;
        background-image: url(./images/custompaths/polygon4.svg); background-repeat: no-repeat;
        z-index: 1;
    }

    .dashboard-account::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 45px;
        left: 0;
        top: -45px;
        background-position: 50%;
        background-image: url(./images/custompaths/polygon1grey.svg);
        background-repeat: no-repeat;
        z-index: 1;
    }

    .dashboard-explore-content { padding: 41px var(--UNIT_10);}
    .dashboard-explore-content .categoryGrid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .dashboard-account-reset { align-items: center; margin: var(--UNIT_06) auto;}
    .dashboard-account-reset .learnButton { max-width: unset; text-align: center;}

    .profile-dropdown { display: flex; flex-direction: column; position: absolute; background-color: rgba(0, 0, 0, 1); backdrop-filter: blur(5px); right: 0; color: white; top: 100%; padding: 50px var(--UNIT_03) 0 ; white-space: nowrap; }
    .profile-dropdown a { color: white; margin-bottom: var(--UNIT_04); }
    
    .resources-dropdown { min-width: auto; position: absolute; text-align: left; background-color: rgba(0, 0, 0, 1); backdrop-filter: blur(5px); top: 100%; padding: 50px var(--UNIT_03) 0 ; white-space: nowrap; }
    .resources-dropdown::before { position: absolute; top: 0; left: 0; width: 100px; background-color: var(--COLOUR-YELLOW); height: 3px; display: block;}
    
    .option-resources .resources-dropdown a { display: block; color: white; margin-bottom: var(--UNIT_04); padding-top: 0; text-align: left;}
    .option-resources .resources-dropdown a:hover { color: var(--COLOUR-YELLOW)!important;}
    .option-resources img { display: none;}
    .profile-dropdown a:hover { color: var(--COLOUR-YELLOW)!important; } 

    .PageFailError::before { background-size: 480px; height: 700px;  }
    .PageFailError::after { top: 490px; height: 210px;}

    .lg-hide { display: none; }


}


@media all and (min-width:1250px) {



    section { padding: 120px; max-width: 1920px; margin: 0 auto; }
    .sticky-header { padding: 0 120px;}
    h1 { font-size: var(--FONT_SIZE_H1_LG); line-height: var(--LINE_HEIGHT_H1_LG);}
    h2 { font-size: var(--FONT_SIZE_H2_LG); line-height: var(--LINE_HEIGHT_H2_LG); }
    h3 { font-size: var(--FONT_SIZE_H3_LG); line-height: var(--LINE_HEIGHT_H3_LG);  }
    h4 { font-size: var(--FONT_SIZE_H4_LG); line-height: var(--LINE_HEIGHT_H4_LG); }
    h5 { font-size: var(--FONT_SIZE_H5_LG); line-height: var(--LINE_HEIGHT_H5_LG); }
    h6 { font-size: var(--FONT_SIZE_H6_LG); line-height: var(--LINE_HEIGHT_H6_LG); }
    p { font-size: var(--FONT_SIZE_P_LG); line-height: var(--LINE_HEIGHT_P_LG); }

    .aside { width: 300px; padding: 0 0 var(--UNIT_06) 120px; background-color: unset; top: 220px;}
    
    .sidemenu .sub-menu .aside-active::before { left: -8px; top:0; height: 100%; width: 2px;}
    .sidemenu { position: relative; width: 300px; padding: 0; padding-right: var(--UNIT_06); left: unset; top: unset; grid-row: span 2; grid-column: 1;}
    .sidemenu .menu, .sidemenu .sub-menu { margin: 0; position: sticky; top: 220px; }
    .sidemenu li a { text-decoration: none; padding: 0px ; }

    .nav-wrapper { max-width: 1680px; margin: 0 auto; }

    section.home h4 { max-width: 700px;}
    .about, .swiper { max-width: 1366px; margin: 0 auto;}
    .about-logos { max-width: 1366px; margin: var(--UNIT_12) auto 0 auto; }
    .categoryGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: var(--UNIT_20); }

    .resources-faq-list li, .resources-faq-list a { padding-right: 300px; }

    .dropdown-content { display: flex; top: unset; max-height: calc(100vh - 110px); width: calc(100% - 24px);  flex-direction: column; box-shadow: none; background-color: #f5f5f5; }
    .dropbtn { display: none; }
    .dropbtn img { display: none; }
    .dropdown-content a { padding: 12px 12px 12px 0;}
    .resources {display: flex;}

    .sales-materials { display: flex; }
    .sales-materials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
    .sales-materials-grid-cell-image { aspect-ratio: 16/9; }


    .categories-content, .tutorials-content, .sales-content, .webinar-content, .privacy-policy-content { 
        display: grid; 
        grid-template-columns: 300px calc(100% - 300px);
    }

    .privacy-policy-content .aside { order: 1; }
    .privacy-policy-content .privacy-policy-bullets { margin-left: 300px; order: 3;}

    .categories-wrapper, 
    .tutorials-wrapper, 
    .sales-wrapper, 
    .webinar-wrapper, 
    .resources-wrapper, 
    .privacy-policy-wrapper { margin-top: 0; grid-row: 2; grid-column: 2;}


    .tutorials { display:flex; }

    .categories-wrapper h2 { max-width: 95%; }

    .tutorials, .sales-materials, .categories { padding: 120px; min-height: calc(100vh - 84px); }

    .categories-content .title { width: 100%; }

    .tutorials-grid-cell { flex-direction: row;}
    .tutorials-grid-cell-image { max-width: 420px; height: unset; }

    .webinar-grid { grid-gap:var(--UNIT_09)}



}

@media all and (min-width:1500px) { 

    .categories-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .categories-wrapper h2 { max-width: 80%;}
    .dashboard-explore-content .categoryGrid { grid-template-columns:repeat(3, minmax(0, 1fr)); }

}

@media all and (min-width:1600px) {
    .webinar-grid { grid-template-columns: repeat(3, 1fr); }
}


@media all and (min-width:1920px) {
    
    .aside { left: unset; padding-left: 0;}
    .categories-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

}



/* EFFECTS */

.fadeIn { animation: fadeIn 1s linear forwards;}
.fadeIn:nth-child(2) { animation-delay: .3s; }
.fadeIn:nth-child(3) { animation-delay: .6s; }
.fadeIn:nth-child(4) { animation-delay: .9s; }
.fadeIn:nth-child(5) { animation-delay: 1.2s; }

@keyframes fadeIn { 

    from { opacity: 0; }
    to { opacity: 1; }

}
/* 

.fadeOut { animation: fadeOut 1s linear forwards;}
.fadeOut:nth-child(2) { animation-delay: .3s; }
.fadeOut:nth-child(3) { animation-delay: .6s; }
.fadeOut:nth-child(4) { animation-delay: .9s; }
.fadeOut:nth-child(5) { animation-delay: 1.2s; }

@keyframes fadeOut { 

    from { opacity: 1; }
    to { opacity: 0; }

} */

#wpadminbar { display: none; }