/* 300425 - focus visible on all buttons */

/* 110325 - bg-zoom-me, duplicates the background image in ::before then applies a transform on :hover. Note: any content within the div will need the class .z-1 to raise it */
.bg-zoom-me {
    position: relative;
    overflow: hidden;
}

.bg-zoom-me::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease-in-out;
    z-index: 0;
}

.bg-zoom-me:hover::before {
    transform: scale(1.05);
}


/* 050325 - for news panel v2 */
.gcs-news-datestamp {
    font-size: 90%;
    margin-top: -20px;
}

/* 280225 - fixed version control error */

/* 260225 */
/* Added a show more / show less inline button that uses pseudo elements to change content, before has gradient, after has the button text */
.btn-show-more-less {
    position: relative; /* Ensures positioning if needed */
    z-index: 1;
}
.btn-show-more-less::before {
    content: "";
    position: absolute;
    top: 0px;
    left: -1rem;
    height: 100%;
    width: 1rem;
    z-index: 0;
    background: linear-gradient(90deg, transparent, var(--overlay-gradient-colour));
    transition: background 0.3s ease-in-out;
}


/* .btn-show-more-less overlay gradient definitions - the parent must have a .bg-* class set  */

    /* if the parent is inside a white card, set the gradient to: */
    .card  .btn-show-more-less::before {
        --overlay-gradient-colour: var(--bs-card-bg);
    }

    /* if the parent has bg off white, set the gradient to: */
    .bg-off-white > .btn-show-more-less::before {
        --overlay-gradient-colour: #f9f8f5;
    }

    /* if the parent has bg-off-blue, set the gradient to: */
    .bg-off-blue > .btn-show-more-less::before {
        --overlay-gradient-colour: #e3e3ff;
    }

    /* if the parent has bg-off-pink, set the gradient to: */
    .bg-off-pink > .btn-show-more-less::before {
        --overlay-gradient-colour: #ffd4e4;
    }

    /* if the parent has bg-primary-light, set the gradient to: */
    .bg-primary-light > .btn-show-more-less::before {
        --overlay-gradient-colour: #1f3e8b;
    }

    /* if the parent has bg-primary-dark, set the gradient to: */
    .bg-primary-dark > .btn-show-more-less::before {
        --overlay-gradient-colour: #2e336b;
    }

    /* if the parent has bg-secondary-light, set the gradient to: */
    .bg-secondary-light > .btn-show-more-less::before {
        --overlay-gradient-colour: #dd3c8f;
    }

    /* if the parent has bg-secondary-dark, set the gradient to: */
    .bg-secondary-dark > .btn-show-more-less::before {
        --overlay-gradient-colour: #a1125c;
    }

    

    /* bs colours */
        /* if the parent has bg-secondary, set the gradient to: */
        .bg-secondary > .btn-show-more-less::before {
            --overlay-gradient-colour: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity));
        }

        /* if the parent has bg-primary, set the gradient to: */
        .bg-primary > .btn-show-more-less::before {
            --overlay-gradient-colour: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity));
        }

        /* if the parent has bg-light, set the gradient to: */
        .bg-light > .btn-show-more-less::before {
            --overlay-gradient-colour: rgba(var(--bs-light-rgb), var(--bs-bg-opacity));
        }

        /* if the parent has bg-dark, set the gradient to: */
        .bg-dark > .btn-show-more-less::before {
            --overlay-gradient-colour: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity));
        }

        /* if the parent has bg-black, set the gradient to: */
        .bg-black > .btn-show-more-less::before {
            --overlay-gradient-colour: rgba(var(--bs-black-rgb), var(--bs-bg-opacity));
        }

        /* if the parent has bg-white, set the gradient to: */
        .bg-white > .btn-show-more-less::before {
            --overlay-gradient-colour: rgba(var(--bs-white-rgb), var(--bs-bg-opacity));
        }

        /* if the parent has bg-success, set the gradient to: */
        .bg-success > .btn-show-more-less::before {
            --overlay-gradient-colour: rgba(var(--bs-success-rgb), var(--bs-bg-opacity));
        }

        /* if the parent has bg-info, set the gradient to: */
        .bg-info > .btn-show-more-less::before {
            --overlay-gradient-colour: rgba(var(--bs-info-rgb), var(--bs-bg-opacity));
        }

        /* if the parent has bg-warning, set the gradient to: */
        .bg-warning > .btn-show-more-less::before {
            --overlay-gradient-colour: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity));
        }

        /* if the parent has bg-danger, set the gradient to: */
        .bg-danger > .btn-show-more-less::before {
            --overlay-gradient-colour: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity));
        }


.btn-show-more-less[aria-expanded="true"]::before {
    background: none; /* Remove the gradient */
}

/* Pseudo-element for button text */
.btn-show-more-less::after{
   content: "Show more";
    display: inline;
    white-space: nowrap;
}

/* Change text when expanded */
.btn-show-more-less[aria-expanded="true"]::after{
    content: "Show less";
}

/* welsh translation for button content */
html[lang="cy"] .btn-show-more-less::after {
    content: "Dangos mwy";
}
html[lang="cy"] .btn-show-more-less[aria-expanded="true"]::after {
    content: "Dangos llai";
}

/* 250225 */

/* made changes to accordion-glass added accordion-glass-white */


/* 060225 */
/* 210125 */

/* appended to bottom */

.bg-opacity-95 {
    --bs-bg-opacity: 0.95;
}

.bg-opacity-0 {
    --bs-bg-opacity: 0;
}


/* takes the currentColor and adds a 75% opaque-white layer on top - applies only to the p and li inside of class - excludes a and button inside of p li */
.p-op-75 p:not(a):not(button), 
.p-op-75 li:not(a):not(button) {
    color: color-mix(in srgb, currentColor 50%, black); /* Default to black tint */
}

/* White tint for .p-op-75 if .text-white is present somewhere */
.text-white :is(.p-op-75 p, .p-op-75 li):not(a):not(button) {
    color: color-mix(in srgb, currentColor 50%, white) !important; /* Apply white tint */
}

/* Default (black tint) for .p-op-85 - applies to p and li inside of class */
.p-op-85 p:not(a):not(button), 
.p-op-85 li:not(a):not(button) {
    color: color-mix(in srgb, currentColor 70%, black); /* Default to black tint */
}

/* White tint for .p-op-85 if .text-white is present somewhere */
.text-white :is(.p-op-85 p, .p-op-85 li):not(a):not(button) {
    color: color-mix(in srgb, currentColor 70%, white) !important; /* Apply white tint */
}  

.sleek-box-shadow {
    box-shadow: 0px 1px 3px rgb(14 14 14 / 10%);
}

.backdrop-blur {
    backdrop-filter: blur(5px);
}

/* 081024 */

/* media print query */
@media print {  
	.gcs-crs-img {-webkit-print-color-adjust: exact;}
	.node--type-course-card footer, .node--type-course-card .gcs_mobile_header #search-block-form, .node--type-course-card .gcs-pre-header, .node--type-course-card .gcs-rel-crs, .node--type-course-card .featured-bottom {display:none!important;}
	.node--type-course-card .accordion-item {margin-bottom: 2rem!important;border:1px solid #dee2e6!important;}
	.node--type-course-card .accordion-header .accordion-button {-webkit-print-color-adjust: exact;background:transparent!important;color:#e20177!important;}
	.node--type-course-card .btn {display:none;}
	.container{width:100%!important;max-width:100%!important;}
	.container-fluid{width:100%!important;max-width:100%!important;}

	/* targets anything else after the footer */
	.node--type-course-card footer ~ * {display: none !important;}
}

/* 200924 */
/* small call to action slider for home */
.cta-slider-small .carousel-inner {
 margin-bottom: 1rem;
}

.cta-slider-small-item {
    height: 210px;
}

.gcs-logo-mask {
background-image: url('/sites/default/files/inline-images/gcs-logo-mask-d-5.png');
background-position: right center;
    background-repeat: no-repeat;
    background-size: 80%;
}


/* 180924 */
/* fix for btns on articles & basic pages */


/* 100924 */
/* fix for accordions, big margins  */


/*050924*/
/* addition of gcs-promo-gparent which latches onto a link that is a direct grand-child. targets zoom-me too. */
.gcs-promo-gparent .gcs-promo-parent a::after {
    position: absolute;
    inset: 0;
    content: '';
}
.gcs-promo-gparent a {
    display: block;
}
.gcs-promo-gparent .zoom-me {
    transition: transform 0.3s ease-in-out; 
}
.gcs-promo-gparent:hover .zoom-me {
    transform: scale(1.05); 
}
.btn-outline-light:hover {
color: black !important;
    mix-blend-mode: screen;
}

/*290824*/
/* margin and typography updates to basic pages & article */

/* targets only basic pages and articles*/
.block-system-main-block .node--type-page h6, .block-system-main-block .node--type-page .h6, .block-system-main-block .node--type-page h5, .block-system-main-block .node--type-page .h5, .block-system-main-block .node--type-page h4, 
.block-system-main-block .node--type-page .h4, .block-system-main-block .node--type-page h3, .block-system-main-block .node--type-page .h3, .block-system-main-block .node--type-page h2, .block-system-main-block .node--type-page .h2, .block-system-main-block .node--type-page h1, .block-system-main-block .node--type-page .h1, .block-system-main-block .node--type-article h1, .block-system-main-block .node--type-article h2, .block-system-main-block .node--type-article h3, .block-system-main-block .node--type-article h4, .block-system-main-block .node--type-article h5, .block-system-main-block .node--type-article h6  {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.1;
letter-spacing: -0.5px;
}

h2.accordion-header {
    margin: 0 !important;
}

.block-system-main-block .node--type-page a:not(.btn), .block-system-main-block .node--type-article a:not(.btn), .link-lines a:not(.btn) {
text-decoration: underline;
    text-decoration-thickness: 0.05em;
    text-underline-offset: 0.3em;
    font-weight: bolder;
}
.block-system-main-block .node--type-page a:hover:not(.btn), .block-system-main-block .node--type-article a:hover:not(.btn), .link-lines a:hover:not(.btn)  {
text-decoration: underline;
    text-decoration-thickness: 0.15em;
}

/* adding weight to title blocks */
.block-page-title-block h1 {
    font-weight: 600!important;
    letter-spacing: -0.5px;
}
/* big border blockquote for articles & basic pages */


.block-system-main-block :where(.node--type-article, .node--type-page) blockquote {
    background: rgb(0 0 0 / 2%);
    border-left: 0.5em solid rgb(0 0 0 / 20%);
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
    border-radius: 2px 10px 10px 2px;
    width: fit-content;
}




/*230824*/
/* home page animations & a level results */

.progress-circle-container {
    max-height: 250px;
    min-width: 100px;
    max-width: 250px;
}
.progress-circle-text {
    top: 0;
    width: 100%;
    height: 100%;
    container-type: inline-size;
}
.progress-circle-text span {
    font-size: max(28cqw, 28px);
}
.circular-progress {
    --size: 250px;
    --half-size: calc(var(--size) / 2);
    --stroke-width: 30px;
    --radius: calc((var(--size) - var(--stroke-width)) / 2);
    --circumference: calc(var(--radius) * pi * 2);
    --dash: calc((var(--progress) * var(--circumference)) / 100);
    animation: progress-animation 5s linear 0s 1 forwards;
    }
    /* seperate settings for each progress circle */
    .circular-progress.results-AA {
    animation: progress-animation-AA 0.5s ease-out 0.1s 1 forwards;
    }
    .circular-progress.results-AB {
    animation: progress-animation-AB 0.75s ease-out 0.3s 1 forwards;
    }
    .circular-progress.results-AC {
    animation: progress-animation-AC 1s ease-out 0.5s 1 forwards;
    }
    .circular-progress.results-pass {
    animation: progress-animation-pass 1s ease-out 0.7s 1 forwards;
    }
    
    
.circular-progress circle {
    cx: var(--half-size);
    cy: var(--half-size);
    r: var(--radius);
    stroke-width: var(--stroke-width);
    fill: none;
    stroke-linecap: butt;
}
.circular-progress circle.progress-circle-bg {
    stroke: rgb(255 255 255 / 25%);
}
/*specific colours by result type 
.circular-progress.results-AA circle.progress-circle-bg, .circular-progress.results-AB circle.progress-circle-bg, .circular-progress.results-AC circle.progress-circle-bg, .circular-progress.results-pass circle.progress-circle-bg  {
    
}*/
.circular-progress circle.progress-circle-fg {
    transform: rotate(-90deg);
    transform-origin: var(--half-size) var(--half-size);
    stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
    transition: stroke-dasharray 0.3s linear 0s;
}
.circular-progress circle.progress-circle-fg {
    stroke: #ddd;
}
/* pink strokes */
.circular-progress.pink circle.progress-circle-bg {
    stroke: #e4b2cc;
}
.circular-progress.pink circle.progress-circle-fg {
    stroke: #e20177;
}
    @property --progress {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}


/**
 *
 * animation slide-in-right
 * - used on the 6 course search buttons on homepage
 */

.slide-in-right {
	-webkit-animation: slide-in-right 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	        animation: slide-in-right 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

/**
 * 
 * animation text-shadow-pop-br
 *  - WIP - will be used in some campaigns
 */

.text-shadow-pop-br {
	-webkit-animation: text-shadow-pop-br 0.4s both;
	        animation: text-shadow-pop-br 0.4s both;
}
@-webkit-keyframes text-shadow-pop-br {
  0% {
    text-shadow: 0px 0px 4px black, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
  100% {
    text-shadow: 1px 1px #e20177, 2px 2px #e20177, 3px 3px #e20177, 4px 4px #e20177, 5px 5px #e20177, 6px 6px #e20177, 7px 7px #e20177, 8px 8px #e20177;
    -webkit-transform: translateX(-8px) translateY(-8px);
            transform: translateX(-8px) translateY(-8px);
  }
}
@keyframes text-shadow-pop-br {
  0% {
    text-shadow: 0px 0px 4px black, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
  100% {
    text-shadow: 1px 1px #e20177, 2px 2px #e20177, 3px 3px #e20177, 4px 4px #e20177, 5px 5px #e20177, 6px 6px #e20177, 7px 7px #e20177, 8px 8px #e20177;
    -webkit-transform: translateX(-8px) translateY(-8px);
            transform: translateX(-8px) translateY(-8px);
  }
}

/**
 * 
 * animation fade-in-bottom
 * - simple fade in bottom animation
 */
.fade-in-bottom {
	-webkit-animation: fade-in-bottom 0.6s ease-out both;
	        animation: fade-in-bottom 0.6s ease-out both;
}
@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}


/* addition to animations - strategic page
    210125 */
.fade-in {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.fade-in-bl {
	-webkit-animation: fade-in-bl 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bl 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.fade-in-br {
	-webkit-animation: fade-in-br 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-br 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.fade-in-top {
	-webkit-animation: fade-in-top 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-top 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation fade-in-bl
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-bl {
  0% {
    -webkit-transform: translateX(-25px) translateY(25px);
            transform: translateX(-25px) translateY(25px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-bl {
  0% {
    -webkit-transform: translateX(-25px) translateY(25px);
            transform: translateX(-25px) translateY(25px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation fade-in-br
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-br {
  0% {
    -webkit-transform: translateX(25px) translateY(25px);
            transform: translateX(25px) translateY(25px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-br {
  0% {
    -webkit-transform: translateX(25px) translateY(25px);
            transform: translateX(25px) translateY(25px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation fade-in-top
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-top {
  0% {
    -webkit-transform: translateY(-25px);
            transform: translateY(-25px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-top {
  0% {
    -webkit-transform: translateY(-25px);
            transform: translateY(-25px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}



/* 010824 */
/* added .pgram-flip, for use in landing page subheadings */



/* 020524-3 */

.fit-content {
    width: fit-content;
}

/* pt session node clean up */
/* main block of pt course session node, header "submitted by..." */    
.block-system-main-block .node--type-pt-course-session  header {
    margin: 0.5rem 0;
}

/* main block of pt course session node, field container spacing */ 
.block-system-main-block .node--type-pt-course-session .field--label-above {
    border-left: solid 5px #e8e9eb;
    padding: 0.2rem 1rem;
    margin: 0.4rem 0;
    background: #f5f5f5;
}

/* main block of pt course session node, field item info bolded to distinguish from field label */
.block-system-main-block .node--type-pt-course-session .field__item {
    font-weight: 700;
}


/* unpublished panel */
.node--unpublished {
        position: relative;
        overflow: hidden;
        padding: 20px 0; 

}
.node--unpublished .node--type-basic-panel{
    padding: 0; /* clears the default padding on basic panels */
}
    .node--unpublished::before {
        content: '';
        position: absolute;
        z-index: 100;
        pointer-events: none;
        height: 12px;
        top: 0;
        left: 0;
        right: 0;
        background-position: top center;
background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 241.0802 11.9554"><defs><style> .c { fill: %23ffcc02; } .d { opacity: .96; } .d, .e { fill: %23141111; } </style></defs><rect class="c" width="241.0802" height="10"/><g><polygon class="e" points=".1572 0 3.5233 10 8.799 10 5.4329 0 .1572 0"/><polygon class="e" points="10.7086 0 14.0747 10 19.3503 10 15.9842 0 10.7086 0"/><polygon class="e" points="21.2599 0 24.626 10 29.9016 10 26.5356 0 21.2599 0"/><polygon class="e" points="31.8112 0 35.1773 10 40.453 10 37.0869 0 31.8112 0"/><polygon class="e" points="42.3625 0 45.7286 10 51.0042 10 47.6382 0 42.3625 0"/><polygon class="e" points="52.9138 0 56.2799 10 61.5556 10 58.1895 0 52.9138 0"/><polygon class="e" points="63.4652 0 66.8313 10 72.1069 10 68.7409 0 63.4652 0"/><polygon class="e" points="74.0165 0 77.3826 10 82.6582 10 79.2921 0 74.0165 0"/><polygon class="e" points="158.4271 0 161.7931 10 167.0688 10 163.7027 0 158.4271 0"/><polygon class="e" points="168.9784 0 172.3444 10 177.6201 10 174.254 0 168.9784 0"/><polygon class="e" points="179.5297 0 182.8958 10 188.1714 10 184.8054 0 179.5297 0"/><polygon class="e" points="190.081 0 193.4471 10 198.7227 10 195.3567 0 190.081 0"/><polygon class="e" points="200.6323 0 203.9984 10 209.2741 10 205.908 0 200.6323 0"/><polygon class="e" points="211.1837 0 214.5498 10 219.8254 10 216.4594 0 211.1837 0"/><polygon class="e" points="221.735 0 225.101 10 230.3767 10 227.0106 0 221.735 0"/><polygon class="e" points="232.2863 0 235.6524 10 240.9281 10 237.562 0 232.2863 0"/></g><g><path class="d" d="m89.2494,1.9565h1.7656v3.4121c0,.3379-.0527.6567-.1582.9575s-.271.5635-.4961.7881c-.2251.2256-.4614.3838-.709.4746-.3438.1279-.7563.1914-1.2383.1914-.2788,0-.5825-.0195-.9121-.0586s-.605-.1162-.8262-.2324c-.2212-.1152-.4238-.2803-.6074-.4932-.1836-.2139-.3091-.4336-.377-.6602-.1094-.3638-.1641-.686-.1641-.9673V1.9565h1.7656v3.4932c0,.3125.0864.5552.2598.731s.4136.2637.7207.2637c.3047,0,.5435-.0869.7168-.2598s.2598-.4175.2598-.7349V1.9565Z"/><path class="d" d="m91.6546,1.9565h1.6523l2.1562,3.168V1.9565h1.668v5.7261h-1.668l-2.1445-3.144v3.144h-1.6641V1.9565Z"/><path class="d" d="m97.7552,1.9565h2.9414c.6406,0,1.1206.1523,1.4395.457s.4785.7383.4785,1.3008c0,.5781-.1738,1.0303-.5215,1.3555s-.8784.4883-1.5918.4883h-.9688v2.1245h-1.7773V1.9565Zm1.7773,2.4414h.4336c.3413,0,.5806-.0596.7188-.1777s.207-.2705.207-.4551c0-.1797-.0601-.332-.1797-.457s-.3452-.1875-.6758-.1875h-.5039v1.2773Z"/><path class="d" d="m106.723,1.9565h1.7656v3.4121c0,.3379-.0527.6567-.1582.9575s-.271.5635-.4961.7881c-.2251.2256-.4614.3838-.709.4746-.3438.1279-.7563.1914-1.2383.1914-.2788,0-.5825-.0195-.9121-.0586s-.605-.1162-.8262-.2324c-.2212-.1152-.4238-.2803-.6074-.4932-.1836-.2139-.3091-.4336-.377-.6602-.1094-.3638-.1641-.686-.1641-.9673V1.9565h1.7656v3.4932c0,.3125.0864.5552.2598.731s.4136.2637.7207.2637c.3047,0,.5435-.0869.7168-.2598s.2598-.4175.2598-.7349V1.9565Z"/><path class="d" d="m109.1205,1.9565h3.3125c.5522,0,.9761.1367,1.2715.4102s.4434.6123.4434,1.0156c0,.3389-.1055.6289-.3164.8711-.1406.1611-.3462.2891-.6172.3828.4116.0986.7144.2686.9082.5098s.291.5439.291.9077c0,.2969-.0688.5635-.207.8008s-.3267.4248-.5664.5625c-.1484.0859-.3726.1484-.6719.1875-.3984.0518-.6626.0781-.793.0781h-3.0547V1.9565Zm1.7852,2.2461h.7695c.2759,0,.4683-.0479.5762-.1426s.1621-.2324.1621-.4121c0-.167-.0542-.2969-.1621-.3906s-.2964-.1406-.5645-.1406h-.7812v1.0859Zm0,2.2495h.9023c.3047,0,.5195-.0537.6445-.1621s.1875-.2529.1875-.4351c0-.1689-.062-.3057-.1855-.4082s-.3403-.1543-.6504-.1543h-.8984v1.1597Z"/><path class="d" d="m114.7948,1.9565h1.7695v4.3159h2.7617v1.4102h-4.5312V1.9565Z"/><path class="d" d="m119.6571,1.9565h1.7734v5.7261h-1.7734V1.9565Z"/><path class="d" d="m121.8475,5.7886l1.6836-.1055c.0366.2734.1108.481.2227.6245.1821.2314.4429.3477.7812.3477.2524,0,.4473-.0596.584-.1777s.2051-.2559.2051-.4121c0-.1479-.0649-.2808-.1953-.3979s-.4321-.2275-.9062-.332c-.7759-.1748-1.3296-.4062-1.6602-.6953-.3335-.2891-.5-.6572-.5-1.1055,0-.2939.0854-.5723.2559-.834s.4272-.4678.7695-.6172.812-.2246,1.4082-.2246c.7319,0,1.29.1357,1.6738.4082.3848.2725.6133.7051.6855,1.2988l-1.668.0977c-.0444-.2578-.1372-.4453-.2793-.5625s-.3379-.1758-.5879-.1758c-.2056,0-.3608.0439-.4648.1309s-.1562.1934-.1562.3184c0,.0908.043.1729.1289.2461.0835.0752.2812.1455.5938.2109.7734.167,1.3281.335,1.6621.5059.335.1709.5781.3818.7305.6348s.2285.5352.2285.8477c0,.3667-.1016.7056-.3047,1.0151s-.4863.5449-.8516.7051c-.3647.1602-.8242.2402-1.3789.2402-.9741,0-1.6484-.1875-2.0234-.5625s-.5874-.8516-.6367-1.4292Z"/><path class="d" d="m127.3973,1.9565h1.7695v2.0039h1.9336V1.9565h1.7773v5.7261h-1.7773v-2.3159h-1.9336v2.3159h-1.7695V1.9565Z"/><path class="d" d="m133.5057,1.9565h4.7422v1.2227h-2.9688v.9102h2.7539v1.168h-2.7539v1.1284h3.0547v1.2969h-4.8281V1.9565Z"/><path class="d" d="m138.7665,1.9565h2.6289c.5186,0,.9365.0703,1.2559.2109s.583.3428.791.6055.3594.5693.4531.918.1406.7188.1406,1.1094c0,.6123-.0693,1.0869-.209,1.4233-.1396.3369-.333.6201-.5801.8477s-.5127.3799-.7969.4551c-.3877.1045-.7393.1562-1.0547.1562h-2.6289V1.9565Zm1.7695,1.2969v3.1284h.4336c.3701,0,.6328-.041.7891-.123s.2783-.2256.3672-.4292c.0889-.2041.1328-.5361.1328-.9941,0-.6064-.0986-1.0225-.2969-1.2461s-.5264-.3359-.9844-.3359h-.4414Z"/></g><g id="b" data-name="arrow_down"><path class="e" d="m153.0401,4.8427l-1.0225-1.0211-1.1379,1.1379V1.9554h-1.4464v3.0042l-1.1394-1.1394-1.0227,1.0225,2.8845,2.8816,2.8845-2.8816Z"/></g></svg>');
        background-repeat: repeat-x;
        background-size: 300px;
        filter: drop-shadow(0px 4px 6px rgb(0 0 0 / 25%));
    } 

    .node--unpublished::after {
        content: '';
        position: absolute;
        z-index: 100;
        pointer-events: none;
        bottom: 0;
        height: 12px;
        left: 0;
        right: 0;
        background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 241.0802 11.9554"><defs><style> .c { fill: %23ffcc02; } .d { opacity: .96; } .d, .e { fill: %23141111; } </style></defs><rect class="c" width="241.0802" height="10"/><g><polygon class="e" points=".1572 0 3.5233 10 8.799 10 5.4329 0 .1572 0"/><polygon class="e" points="10.7086 0 14.0747 10 19.3503 10 15.9842 0 10.7086 0"/><polygon class="e" points="21.2599 0 24.626 10 29.9016 10 26.5356 0 21.2599 0"/><polygon class="e" points="31.8112 0 35.1773 10 40.453 10 37.0869 0 31.8112 0"/><polygon class="e" points="42.3625 0 45.7286 10 51.0042 10 47.6382 0 42.3625 0"/><polygon class="e" points="52.9138 0 56.2799 10 61.5556 10 58.1895 0 52.9138 0"/><polygon class="e" points="63.4652 0 66.8313 10 72.1069 10 68.7409 0 63.4652 0"/><polygon class="e" points="74.0165 0 77.3826 10 82.6582 10 79.2921 0 74.0165 0"/><polygon class="e" points="158.4271 0 161.7931 10 167.0688 10 163.7027 0 158.4271 0"/><polygon class="e" points="168.9784 0 172.3444 10 177.6201 10 174.254 0 168.9784 0"/><polygon class="e" points="179.5297 0 182.8958 10 188.1714 10 184.8054 0 179.5297 0"/><polygon class="e" points="190.081 0 193.4471 10 198.7227 10 195.3567 0 190.081 0"/><polygon class="e" points="200.6323 0 203.9984 10 209.2741 10 205.908 0 200.6323 0"/><polygon class="e" points="211.1837 0 214.5498 10 219.8254 10 216.4594 0 211.1837 0"/><polygon class="e" points="221.735 0 225.101 10 230.3767 10 227.0106 0 221.735 0"/><polygon class="e" points="232.2863 0 235.6524 10 240.9281 10 237.562 0 232.2863 0"/></g><g><path class="d" d="m89.2494,1.9565h1.7656v3.4121c0,.3379-.0527.6567-.1582.9575s-.271.5635-.4961.7881c-.2251.2256-.4614.3838-.709.4746-.3438.1279-.7563.1914-1.2383.1914-.2788,0-.5825-.0195-.9121-.0586s-.605-.1162-.8262-.2324c-.2212-.1152-.4238-.2803-.6074-.4932-.1836-.2139-.3091-.4336-.377-.6602-.1094-.3638-.1641-.686-.1641-.9673V1.9565h1.7656v3.4932c0,.3125.0864.5552.2598.731s.4136.2637.7207.2637c.3047,0,.5435-.0869.7168-.2598s.2598-.4175.2598-.7349V1.9565Z"/><path class="d" d="m91.6546,1.9565h1.6523l2.1562,3.168V1.9565h1.668v5.7261h-1.668l-2.1445-3.144v3.144h-1.6641V1.9565Z"/><path class="d" d="m97.7552,1.9565h2.9414c.6406,0,1.1206.1523,1.4395.457s.4785.7383.4785,1.3008c0,.5781-.1738,1.0303-.5215,1.3555s-.8784.4883-1.5918.4883h-.9688v2.1245h-1.7773V1.9565Zm1.7773,2.4414h.4336c.3413,0,.5806-.0596.7188-.1777s.207-.2705.207-.4551c0-.1797-.0601-.332-.1797-.457s-.3452-.1875-.6758-.1875h-.5039v1.2773Z"/><path class="d" d="m106.723,1.9565h1.7656v3.4121c0,.3379-.0527.6567-.1582.9575s-.271.5635-.4961.7881c-.2251.2256-.4614.3838-.709.4746-.3438.1279-.7563.1914-1.2383.1914-.2788,0-.5825-.0195-.9121-.0586s-.605-.1162-.8262-.2324c-.2212-.1152-.4238-.2803-.6074-.4932-.1836-.2139-.3091-.4336-.377-.6602-.1094-.3638-.1641-.686-.1641-.9673V1.9565h1.7656v3.4932c0,.3125.0864.5552.2598.731s.4136.2637.7207.2637c.3047,0,.5435-.0869.7168-.2598s.2598-.4175.2598-.7349V1.9565Z"/><path class="d" d="m109.1205,1.9565h3.3125c.5522,0,.9761.1367,1.2715.4102s.4434.6123.4434,1.0156c0,.3389-.1055.6289-.3164.8711-.1406.1611-.3462.2891-.6172.3828.4116.0986.7144.2686.9082.5098s.291.5439.291.9077c0,.2969-.0688.5635-.207.8008s-.3267.4248-.5664.5625c-.1484.0859-.3726.1484-.6719.1875-.3984.0518-.6626.0781-.793.0781h-3.0547V1.9565Zm1.7852,2.2461h.7695c.2759,0,.4683-.0479.5762-.1426s.1621-.2324.1621-.4121c0-.167-.0542-.2969-.1621-.3906s-.2964-.1406-.5645-.1406h-.7812v1.0859Zm0,2.2495h.9023c.3047,0,.5195-.0537.6445-.1621s.1875-.2529.1875-.4351c0-.1689-.062-.3057-.1855-.4082s-.3403-.1543-.6504-.1543h-.8984v1.1597Z"/><path class="d" d="m114.7948,1.9565h1.7695v4.3159h2.7617v1.4102h-4.5312V1.9565Z"/><path class="d" d="m119.6571,1.9565h1.7734v5.7261h-1.7734V1.9565Z"/><path class="d" d="m121.8475,5.7886l1.6836-.1055c.0366.2734.1108.481.2227.6245.1821.2314.4429.3477.7812.3477.2524,0,.4473-.0596.584-.1777s.2051-.2559.2051-.4121c0-.1479-.0649-.2808-.1953-.3979s-.4321-.2275-.9062-.332c-.7759-.1748-1.3296-.4062-1.6602-.6953-.3335-.2891-.5-.6572-.5-1.1055,0-.2939.0854-.5723.2559-.834s.4272-.4678.7695-.6172.812-.2246,1.4082-.2246c.7319,0,1.29.1357,1.6738.4082.3848.2725.6133.7051.6855,1.2988l-1.668.0977c-.0444-.2578-.1372-.4453-.2793-.5625s-.3379-.1758-.5879-.1758c-.2056,0-.3608.0439-.4648.1309s-.1562.1934-.1562.3184c0,.0908.043.1729.1289.2461.0835.0752.2812.1455.5938.2109.7734.167,1.3281.335,1.6621.5059.335.1709.5781.3818.7305.6348s.2285.5352.2285.8477c0,.3667-.1016.7056-.3047,1.0151s-.4863.5449-.8516.7051c-.3647.1602-.8242.2402-1.3789.2402-.9741,0-1.6484-.1875-2.0234-.5625s-.5874-.8516-.6367-1.4292Z"/><path class="d" d="m127.3973,1.9565h1.7695v2.0039h1.9336V1.9565h1.7773v5.7261h-1.7773v-2.3159h-1.9336v2.3159h-1.7695V1.9565Z"/><path class="d" d="m133.5057,1.9565h4.7422v1.2227h-2.9688v.9102h2.7539v1.168h-2.7539v1.1284h3.0547v1.2969h-4.8281V1.9565Z"/><path class="d" d="m138.7665,1.9565h2.6289c.5186,0,.9365.0703,1.2559.2109s.583.3428.791.6055.3594.5693.4531.918.1406.7188.1406,1.1094c0,.6123-.0693,1.0869-.209,1.4233-.1396.3369-.333.6201-.5801.8477s-.5127.3799-.7969.4551c-.3877.1045-.7393.1562-1.0547.1562h-2.6289V1.9565Zm1.7695,1.2969v3.1284h.4336c.3701,0,.6328-.041.7891-.123s.2783-.2256.3672-.4292c.0889-.2041.1328-.5361.1328-.9941,0-.6064-.0986-1.0225-.2969-1.2461s-.5264-.3359-.9844-.3359h-.4414Z"/></g><g id="b" data-name="arrow_down"><path class="e" d="m147.2712,4.837l1.0225,1.0211,1.1379-1.1379v3.0042h1.4464v-3.0042l1.1394,1.1394,1.0227-1.0225-2.8845-2.8816-2.8845,2.8816Z"/></g></svg>');
        background-repeat: repeat-x;
        background-size: 300px;
        filter: drop-shadow(0px -4px 6px rgb(0 0 0 / 25%));
        
    } 





/* v1.3 */
.svg-clouds {
    overflow: hidden;
    position: relative;
}
 
.svg-clouds::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: -0.1vw;
    right: -0.1vw;
    height: 65px;
    transform: scaleX(1.1);
    transform-origin: 100% 100%;
    animation: 60s infinite alternate shape-anim-7408 linear;
    background-size: 50% 64px;
    background-position: 50% 100%;
    background-repeat: repeat-x;
    z-index: 3;
    pointer-events: none;
    background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 264.65 23.14 " fill="%23ffffff"> <g id="a" data-name="fg"><path d="m264.65,23.14v-14.33c-2.51.06-4.64,1.69-5.41,3.95-.26-.06-.54-.08-.82-.08-1.7,0-3.13,1.07-3.7,2.56-.95-.64-2.09-1.03-3.33-1.03-2.64,0-4.87,1.71-5.67,4.09-.33-.06-.67-.1-1.02-.1s-.7.03-1.03.1c-.68-2.37-2.87-4.11-5.47-4.11-.4,0-.79.04-1.17.12-1.13-3.3-4.25-5.68-7.94-5.68s-6.88,2.43-7.97,5.78c-.59-.15-1.21-.23-1.85-.23-1.11,0-2.17.24-3.12.67-1.06-1.47-2.75-2.47-4.68-2.56-.22-3.19-2.89-5.72-6.14-5.72-.6,0-1.18.09-1.73.25-1.03-1.72-2.91-2.87-5.06-2.87s-4.17,1.24-5.18,3.06c-.71-.29-1.49-.45-2.3-.45-3.35,0-6.07,2.67-6.15,6-.59-.19-1.22-.29-1.88-.29-3.31,0-6.01,2.62-6.15,5.9-1.47.04-2.67.51-3.6,1.3-.47-3.69-3.62-6.54-7.43-6.54-.78,0-1.54.12-2.25.34-1.18-4.8-5.51-8.37-10.67-8.37-3.74,0-7.05,1.87-9.03,4.73-1.27-.54-2.66-.83-4.12-.83-4.01,0-7.49,2.23-9.29,5.52-.56-.18-1.17-.29-1.79-.29s-1.24.1-1.81.29c-.84-3.07-3.64-5.32-6.97-5.32s-6.07,2.2-6.94,5.22c-.46-.12-.95-.19-1.46-.19-.68,0-1.32.12-1.92.33-1.2-2.02-3.4-3.38-5.93-3.38-.58,0-1.13.07-1.67.2-.99-3.03-3.84-5.23-7.21-5.23s-6.15,2.15-7.17,5.13c-.34-.07-.7-.11-1.06-.11-2.35,0-4.32,1.57-4.94,3.72-.3-.06-.61-.09-.93-.09-1.76,0-3.3.89-4.21,2.25-.84-2.4-3.12-4.11-5.8-4.11-.6,0-1.18.09-1.73.25-1.03-1.72-2.91-2.87-5.06-2.87s-4.17,1.24-5.18,3.06c-.71-.29-1.49-.45-2.3-.45-2.97,0-5.44,2.1-6.02,4.89-.61-1.42-1.79-2.54-3.28-3.02,0-.09,0-.17,0-.26,0-3.1-2.51-5.6-5.6-5.6-.58,0-1.15.09-1.68.26-.88-3.59-4.11-6.25-7.97-6.25-2.8,0-5.27,1.4-6.75,3.54-.95-.4-1.99-.62-3.08-.62-4.36,0-7.9,3.54-7.9,7.9,0,.22.01.44.03.65-1.28.08-2.43.61-3.31,1.43-.13.01-.26.01-.39.04-.49-1.7-2.05-2.94-3.91-2.94-.29,0-.57.03-.84.09-.81-2.36-3.04-4.06-5.67-4.06-.02,0-.04,0-.06,0v14.33h264.65Z"/></g><g id="b" data-name="fg-shadow"><g><path d="m263.42,23.14c0-.09.03-.18.03-.27h1.2v-14.49c-2.51.06-4.64,1.69-5.41,3.95-.26-.06-.54-.08-.82-.08-1.7,0-3.13,1.07-3.7,2.56-.95-.64-2.09-1.03-3.33-1.03-2.64,0-4.87,1.71-5.67,4.09-.33-.06-.67-.1-1.02-.1s-.7.03-1.03.1c-.68-2.37-2.87-4.11-5.47-4.11-.4,0-.79.04-1.17.12-1.13-3.3-4.25-5.68-7.94-5.68s-6.88,2.43-7.97,5.78c-.59-.15-1.21-.23-1.85-.23-1.11,0-2.17.24-3.12.67-1.06-1.47-2.75-2.47-4.68-2.56-.22-3.19-2.89-5.72-6.14-5.72-.6,0-1.18.09-1.73.25-1.03-1.72-2.91-2.87-5.06-2.87s-4.17,1.24-5.18,3.06c-.71-.29-1.49-.45-2.3-.45-3.35,0-6.07,2.67-6.15,6-.59-.19-1.22-.29-1.88-.29-3.31,0-6.01,2.62-6.15,5.9-1.47.04-2.67.51-3.6,1.3-.47-3.69-3.62-6.54-7.43-6.54-.78,0-1.54.12-2.25.34-1.18-4.8-5.51-8.37-10.67-8.37-3.74,0-7.05,1.87-9.03,4.73-1.27-.54-2.66-.83-4.12-.83-4.01,0-7.49,2.23-9.29,5.52-.56-.18-1.17-.29-1.79-.29s-1.24.1-1.81.29c-.84-3.07-3.64-5.32-6.97-5.32s-6.07,2.2-6.94,5.22c-.46-.12-.95-.19-1.46-.19-.68,0-1.32.12-1.92.33-1.2-2.02-3.4-3.38-5.93-3.38-.58,0-1.13.07-1.67.2-.99-3.03-3.84-5.23-7.21-5.23s-6.15,2.15-7.17,5.13c-.34-.07-.7-.11-1.06-.11-2.35,0-4.32,1.57-4.94,3.72-.3-.06-.61-.09-.93-.09-1.76,0-3.3.89-4.21,2.25-.84-2.4-3.12-4.11-5.8-4.11-.6,0-1.18.09-1.73.25-1.03-1.72-2.91-2.87-5.06-2.87s-4.17,1.24-5.18,3.06c-.71-.29-1.49-.45-2.3-.45-2.97,0-5.44,2.1-6.02,4.89-.61-1.42-1.79-2.54-3.28-3.02,0-.09,0-.17,0-.26,0-3.1-2.51-5.6-5.6-5.6-.58,0-1.15.09-1.68.26-.88-3.59-4.11-6.25-7.97-6.25-2.8,0-5.27,1.4-6.75,3.54-.95-.4-1.99-.62-3.08-.62-4.36,0-7.9,3.54-7.9,7.9,0,.22.01.44.03.65-1.28.08-2.43.61-3.31,1.43-.13.01-.26.01-.39.04-.49-1.7-2.05-2.94-3.91-2.94-.29,0-.57.03-.84.09-.81-2.36-3.04-4.06-5.67-4.06-.02,0-.04,0-.06,0v14.77h263.42Z" style="opacity: .5;"/></g></g><g id="c" data-name="bg" style="opacity: .3;"><path d="m214.77,3.74c-.33,0-.65.05-.95.15-.44-1.61-1.9-2.79-3.65-2.79s-3.18,1.15-3.63,2.73c-.24-.06-.5-.1-.76-.1-1.67,0-3.02,1.35-3.02,3.02s1.35,3.02,3.02,3.02c.67,0,1.28-.22,1.78-.58.61.72,1.56,1.19,2.61,1.19s2.08-.5,2.69-1.28c.52.42,1.18.67,1.9.67,1.67,0,3.02-1.35,3.02-3.02s-1.35-3.02-3.02-3.02Z"/><path d="m52.22,5.91c0-1.47-1.19-2.66-2.66-2.66-.22,0-.44.03-.64.08-.38-1.17-1.48-2.02-2.78-2.02s-2.38.83-2.77,1.98c-.13-.03-.27-.04-.41-.04-.91,0-1.67.61-1.91,1.44-.12-.02-.24-.03-.36-.03-1.08,0-1.96.88-1.96,1.96s.88,1.96,1.96,1.96c.03,0,.07,0,.1,0h8.77c1.46-.02,2.66-1.19,2.66-2.65Z"/><path d="m85.52,5.47c-.34,0-.67.06-.98.16-.45-1.66-1.97-2.89-3.78-2.89s-3.29,1.2-3.77,2.83c-.25-.07-.52-.1-.79-.1-1.73,0-3.13,1.4-3.13,3.13s1.4,3.13,3.13,3.13c.69,0,1.33-.22,1.85-.6.64.75,1.61,1.23,2.71,1.23s2.16-.52,2.79-1.33c.54.44,1.23.7,1.97.7,1.73,0,3.13-1.4,3.13-3.13s-1.4-3.13-3.13-3.13Z"/><path d="m133.11,8.53c0-1.47-1.19-2.66-2.66-2.66-.22,0-.44.03-.64.08-.38-1.17-1.48-2.02-2.78-2.02s-2.38.83-2.77,1.98c-.13-.03-.27-.04-.41-.04-.91,0-1.67.61-1.91,1.44-.12-.02-.24-.03-.36-.03-1.08,0-1.96.88-1.96,1.96s.88,1.96,1.96,1.96c.03,0,.07,0,.1,0h8.77c1.46-.02,2.66-1.19,2.66-2.65Z"/><path d="m184.57,8.71c0-1.74-1.41-3.14-3.14-3.14-.26,0-.52.03-.76.09-.45-1.38-1.75-2.38-3.29-2.38s-2.81.98-3.27,2.34c-.16-.03-.32-.05-.48-.05-1.07,0-1.97.72-2.25,1.7-.14-.03-.28-.04-.42-.04-1.28,0-2.31,1.03-2.31,2.31s1.03,2.31,2.31,2.31c.04,0,.08,0,.12,0h10.36c1.72-.02,3.14-1.4,3.14-3.13Z"/><path d="m248.19,12.16c0-1.47-1.19-2.66-2.66-2.66-.22,0-.44.03-.64.08-.38-1.17-1.48-2.02-2.78-2.02s-2.38.83-2.77,1.98c-.13-.03-.27-.04-.41-.04-.91,0-1.67.61-1.91,1.44-.12-.02-.24-.03-.36-.03-1.08,0-1.96.88-1.96,1.96s.88,1.96,1.96,1.96c.03,0,.07,0,.1,0h8.77c1.46-.02,2.66-1.19,2.66-2.65Z"/><path d="m14.9,9.53c0-1.47-1.19-2.66-2.66-2.66-.22,0-.44.03-.64.08-.38-1.17-1.48-2.02-2.78-2.02s-2.38.83-2.77,1.98c-.13-.03-.27-.04-.41-.04-.91,0-1.67.61-1.91,1.44-.12-.02-.24-.03-.36-.03-1.08,0-1.96.88-1.96,1.96s.88,1.96,1.96,1.96c.03,0,.07,0,.1,0h8.77c1.46-.02,2.66-1.19,2.66-2.65Z"/><path d="m259.75,3.93c-.16,0-.32.03-.47.08-.22-.8-.95-1.39-1.82-1.39s-1.58.58-1.81,1.36c-.12-.03-.25-.05-.38-.05-.83,0-1.51.67-1.51,1.51s.67,1.51,1.51,1.51c.33,0,.64-.11.89-.29.31.36.78.59,1.3.59s1.04-.25,1.34-.64c.26.21.59.34.95.34.83,0,1.51-.67,1.51-1.51s-.67-1.51-1.51-1.51Z"/><path d="m19.23,1.31c-.16,0-.32.03-.47.08-.22-.8-.95-1.39-1.82-1.39s-1.58.58-1.81,1.36c-.12-.03-.25-.05-.38-.05-.83,0-1.51.67-1.51,1.51s.67,1.51,1.51,1.51c.33,0,.64-.11.89-.29.31.36.78.59,1.3.59s1.04-.25,1.34-.64c.26.21.59.34.95.34.83,0,1.51-.67,1.51-1.51s-.67-1.51-1.51-1.51Z"/><path d="m54.47,11.31c-.16,0-.32.03-.47.08-.22-.8-.95-1.39-1.82-1.39s-1.58.58-1.81,1.36c-.12-.03-.25-.05-.38-.05-.83,0-1.51.67-1.51,1.51s.67,1.51,1.51,1.51c.33,0,.64-.11.89-.29.31.36.78.59,1.3.59s1.04-.25,1.34-.64c.26.21.59.34.95.34.83,0,1.51-.67,1.51-1.51s-.67-1.51-1.51-1.51Z"/><path d="m106.07,1.78c-.16,0-.32.03-.47.08-.22-.8-.95-1.39-1.82-1.39s-1.58.58-1.81,1.36c-.12-.03-.25-.05-.38-.05-.83,0-1.51.67-1.51,1.51s.67,1.51,1.51,1.51c.33,0,.64-.11.89-.29.31.36.78.59,1.3.59s1.04-.25,1.34-.64c.26.21.59.34.95.34.83,0,1.51-.67,1.51-1.51s-.67-1.51-1.51-1.51Z"/><path d="m162.81,2.66c-.16,0-.32.03-.47.08-.22-.8-.95-1.39-1.82-1.39s-1.58.58-1.81,1.36c-.12-.03-.25-.05-.38-.05-.83,0-1.51.67-1.51,1.51s.67,1.51,1.51,1.51c.33,0,.64-.11.89-.29.31.36.78.59,1.3.59s1.04-.25,1.34-.64c.26.21.59.34.95.34.83,0,1.51-.67,1.51-1.51s-.67-1.51-1.51-1.51Z"/></g></svg>');
}
 
@media (min-width: 2100px) {
    .svg-clouds::before {
        background-size: 50% calc(2vw + 60px);
        height: 103px;
    }
 
}
 
@media (max-width: 991px) {
    .svg-clouds::before {
        background-size: 150% calc(2vw + 75px);
        background-repeat: no-repeat;
        height: 90px;
    }
}

@keyframes shape-anim-7408 {
    100% {
        transform: scaleX(1.1) translateX(calc(100% - (100% / 1.1)));
    }
}

@media (min-width: 576px) {
	.pgram, .parallelogram{
		clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);

	}

    .pgram-flip, .parallelogram-flip {
        clip-path: polygon(0% 0, 98% 0, 100% 100%, 2% 100%);
    }

}

/* v1.3 triple wave for landing pages */
.svg-triple-wave{
    overflow:hidden;
    position:relative;
    }
.svg-triple-wave::before{
    content:'';
    position: absolute;
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw; 
    transform:scaleX(2.5);
    -webkit-transform: scaleX(2.5);
    transform-origin: 100% 100%;
    -webkit-animation: 30s infinite alternate anim-horizon-slide linear;
    animation: 30s infinite alternate anim-horizon-slide linear;
    background-size: 100% 40px;
    background-position: 100% 100%;
    background-repeat: no-repeat;     
    z-index: 3;
    pointer-events: none;
    background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"> <path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%23ffffff"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%23ffffff"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%23ffffff"/></svg>'); 
    }
@media (min-width:2100px){
    /* .svg-triple-wave::before{
    background-size: 100% calc(2vw + 262px);
    }*/
}
    @keyframes anim-horizon-slide {
    100% {
        transform: scaleX(4.1) translateX(calc(100% - (100% / 4.1)));
        -webkit-transform: scaleX(4.1) translateX(calc(100% - (100% / 4.1)));
    }
}

/* triple wave with set colour - will override default white above */
.svg-triple-wave-blue::before {
    content:'';
    background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"> <path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%230f147f"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%230f147f"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%230f147f"/></svg>'); 

}
.svg-triple-wave-pink::before {
    content:'';
    background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"> <path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%23e20177"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%23e20177"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%23e20177"/></svg>'); 

}


/* gcs static wave for fp slider */
.gcs-wave{
        overflow:hidden;
        position:relative;
    }
.gcs-wave::before   {
        content:'';
        position: absolute;
        z-index: 10; /* changed from 3 to test */
        pointer-events: none;
        background-repeat: no-repeat;
        bottom: -0.1vw;
        left: -0.1vw;
        right: -0.1vw;
        top: -0.1vw;
        background-size: 100% 30px;
        background-position: 50% 100%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1320 50" aria-hidden="true"> <!--<path opacity=".75" class="gcs-wave-2" fill="%23e20177" d="M642.6,16.6c5.8,0.8,11.6,1.6,17.4,2.4c329.3,46.8,660,0,660,0V2C1320,2,957,47.2,642.6,16.6z" />--><path class="gcs-wave-1" fill="%230f147f" d="M0,25c0,0,330.7-46.8,660,0c330,46.9,660,0,660,0v25H0V25z" /></svg>');
    }
        
    @media (min-width:2100px){
        .gcs-wave::before{
        background-size: 100% calc(2vw + -20px);
        }
    }

.gcs-wave-white{
        overflow:hidden;
        position:relative;
    }
.gcs-wave-white::before   {
        content:'';
        position: absolute;
        z-index: 10; /* changed from 3 to test */
        pointer-events: none;
        background-repeat: no-repeat;
        bottom: -0.1vw;
        left: -0.1vw;
        right: -0.1vw;
        top: -0.1vw;
        background-size: 100% 30px;
        background-position: 50% 100%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1320 50" aria-hidden="true"> <!--<path opacity=".75" class="gcs-wave-2" fill="%23ffffff" d="M642.6,16.6c5.8,0.8,11.6,1.6,17.4,2.4c329.3,46.8,660,0,660,0V2C1320,2,957,47.2,642.6,16.6z" />--><path class="gcs-wave-1" fill="%23ffffff" d="M0,25c0,0,330.7-46.8,660,0c330,46.9,660,0,660,0v25H0V25z" /></svg>');
    }
        
    @media (min-width:2100px){
        .gcs-wave-white::before{
        background-size: 100% calc(2vw + -20px);
        }
    }


.gcs-wave-pink{
        overflow:hidden;
        position:relative;
    }
.gcs-wave-pink::before   {
        content:'';
        position: absolute;
        z-index: 10; /* changed from 3 to test */
        pointer-events: none;
        background-repeat: no-repeat;
        bottom: -0.1vw;
        left: -0.1vw;
        right: -0.1vw;
        top: -0.1vw;
        background-size: 100% 30px;
        background-position: 50% 100%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1320 50" aria-hidden="true"> <!--<path opacity=".75" class="gcs-wave-2" fill="%23e20177" d="M642.6,16.6c5.8,0.8,11.6,1.6,17.4,2.4c329.3,46.8,660,0,660,0V2C1320,2,957,47.2,642.6,16.6z" />--><path class="gcs-wave-1" fill="%23e20177" d="M0,25c0,0,330.7-46.8,660,0c330,46.9,660,0,660,0v25H0V25z" /></svg>');
    }
        
    @media (min-width:2100px){
        .gcs-wave-pink::before{
        background-size: 100% calc(2vw + -20px);
        }
    }


/* only apply along side an svg class */
.flip-svg::before {
    transform: rotateY(180deg);
  }
.svg-top::before {
    transform: rotate(180deg);
}

/* shwn colours v1.1 */

/*.bg-primary{
background-color:#0f147f;
}*/
.bg-primary-light{
background-color:#1f3e8b;
}
.bg-primary-dark{
background-color:#2e336b;
}

/*.bg-secondary{
background-color:#e20177 ;
}*/
.bg-secondary-light{
background-color:#dd3c8f;
}
.bg-secondary-dark{
background-color:#a1125c;
}
.bg-orange{
background-color:#f48028;
}
/*.bg-white{
background-color:#ffffff ;
}*/
.bg-off-white{
background-color:#f9f8f5;
}
.bg-off-pink{
background-color:#ffd4e4;
}
.bg-off-blue{
background-color:#e3e3ff;
}

.bg-metallic-grey{
background-color:#1e242c;
}
.bg-footer-grey{
background-color:#252525;
}

.bg-sunset {
    background: linear-gradient(350deg, rgba(244, 152, 144, 1) 10%, rgba(78, 87, 129, 1) 75%);
}



.bg-sunset-blue {
    background-color: rgba(var(--sunset-blue-rgb), var(--bs-bg-opacity)) !important;
}

.bg-sunset-pink {
    background-color: rgba(var(--sunset-pink-rgb), var(--bs-bg-opacity)) !important;
    
}

.text-sunset-blue {
    color: var(--sunset-blue-rgb);
}

.text-sunset-pink {
    color: var(--sunset-pink-rgb);
}

.text-sunset {
    background: linear-gradient(350deg, var(--sunset-pink-rgb) 10%, var(--sunset-blue-rgb) 75%);
    background-clip: text;
    color: transparent;
}

.btn-trans {
    color: black!important; /* text needs to be dark as possible for the blend to work */
    mix-blend-mode: screen;

}


/* a plain looking button that has a translucent bg effects when hovering */
.btn-blend {

}

.btn-blend:hover, .btn-blend:focus-visible {
    background: rgb(0 0 0 / 10%);
}

.btn-blend:active {
    border: none;
    box-shadow: none;
    background-color: rgb(0 0 0 / 15%) !important;
}

.btn-blend:focus-visible {
    box-shadow: 0px 0px 0px 0.25rem rgb(0 0 0 / 50%);
}

/* applies only if .text-white */
.text-white .btn-blend:hover, .text-white .btn-blend:focus-visible {
    background: rgb(255 255 255 / 10%);
}

.text-white .btn-blend:active {
    border: none;
    box-shadow: none;
    background-color: rgb(255 255 255 / 15%) !important;
}

.text-white .btn-blend:focus-visible {
    box-shadow: 0px 0px 0px 0.25rem rgb(255 255 255 / 50%);
}

.btn-link{
    box-shadow: none; /* neutralises .btn edits below */
    border: none;
}
.btn {
    font-weight: 600;
}

.btn:not(.btn-outline-light, .btn-outline-dark, .btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-info, .btn-blend) {
    -webkit-box-shadow: inset 0 -2px 0 rgba(0 0 0 / 15%);
    box-shadow: inset 0 -2px 0 rgba(0 0 0 / 15%);
    border: solid 1px rgba(0 0 0 / 15%);
}

/*.btn-outline-light {
    box-shadow: none;
    border: solid 1px rgba(255 255 255 / 75%);
} */

.btn:hover {
    box-shadow: none;
}

.btn:active {
    box-shadow: inset 0 50px 0 rgb(0 0 0 / 15%);
    border: solid 1px rgba(0 0 0 / 15%);
}


#header .btn-white, .mm-navbar .btn-white, .gcs_mobile_header .btn-white {
    box-shadow: none; /* used on burger menu to sterilise */
    font-weight: normal;
}
.btn-white:active {
	box-shadow: none;
}


a.text-link { /* adding extra visual cues for plain text links */
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.25rem;
    text-decoration-thickness: 0.2rem;
    text-decoration-color: rgb(0 0 0 / 10%);
    position: relative;

}
    a.text-link:hover { 
        animation: expandRight 0.3s cubic-bezier(0.61, 1, 0.88, 1) 0s 1 normal forwards;
        -webkit-animation: expandRight 0.3s cubic-bezier(0.61, 1, 0.88, 1) 0s 1 normal forwards;
        text-decoration: none;
    }
    a.text-link:hover::before {
        background: rgb(0 0 0 / 10%);
        content: "";
        animation: expandRight 0.3s cubic-bezier(0.61, 1, 0.88, 1) 0s 1 normal forwards;
        -webkit-animation: expandRight 0.3s cubic-bezier(0.61, 1, 0.88, 1) 0s 1 normal forwards;
        position: absolute;
        top: -5px;
        bottom: -5px;
        left: -5px;
        right: -5px;
        z-index: -1;
    }

.white-links a.text-link { /* alternates colour for white links */
    text-decoration-color: rgb(255 255 255 / 10%);
}

.white-links a.text-link:hover::before {
    background: rgb(255 255 255 / 10%);

}

.white-links a.text-link:hover {
    color: white;
    transition: color 0.75s;
}

/* v1.0 show/hide button with text */ 
.btn-show-hide {
    position: relative;
    background: rgb(0 0 0 / 5%);
    padding-right: 1.8rem;
}
    .btn-show-hide::before { /* adds an up arrow symbol */
        content: "\25bc";
        position: absolute;
        font-size: 18px;
        top: 5px;
        width: 22px;
        height: 22px;
        right: 5px;
        color: rgb(0 0 0 / 20%);
    }
    .btn-show-hide:hover {
        background: rgb(0 0 0 / 10%);
    }
    .btn-show-hide:hover::before {
        color: rgb(0 0 0 / 30%)                
    }
    .btn-show-hide[aria-expanded="true"]::before { /* changes to down arrow when clicked */
        content: "\25b2";
    }

.show-hide-shadow { /* pulls the containing element upwards and adds a gradient to mask */
    position: relative;
    background: red;
    background: linear-gradient(360deg, #ffffff 50%, transparent);
    padding-top: 3rem;
    margin-top: -5rem;
}
.show-hide-shadow-spacer.collapse.show { /* adds a bottom margin when the show/hide button has been pressed  */
    margin-bottom: 4rem;
}

/* adds a pink left border when an accordion question is open */
.accordion-pink-active .accordion-button:not(.collapsed) {
    border-left: solid 5px #e20177;
    transition: border 0s;
}
.accordion-blue-active .accordion-button:not(.collapsed) {
    border-left: solid 5px #0f147f;
    transition: border 0s;
}

.accordion-titles-lg .accordion-button {
    font-size: 120%;
}

.accordion-titles-xl .accordion-button {
    font-size: 135%;
}

.accordion-titles-xxl .accordion-button {
    font-size: 150%;
}

.accordion-titles-xxxl .accordion-button {
    font-size: 200%;
}

/* legacy */
.accordion-large-titles .accordion-button {
    font-size: 120%;
}

/* accordion-glass aims to provide a neutral colour for the titles. It sets the backing panel to transparent, and setting the accordion's content to white */
.accordion-glass .accordion-button {
    background: rgb(0 0 0 / 30%);
}
.accordion-glass .accordion-button:hover {
    background: rgb(0 0 0 / 25%);
}

.accordion-glass .accordion-item, .accordion-glass-white .accordion-item {
    background: transparent;
    border-bottom: none;
    margin-bottom: 3px;
}
.accordion-glass .accordion-collapse {
    background:rgb(255 255 255 / 90%);
}

.accordion-glass .accordion-button:not(.collapsed) {
background: rgb(0 0 0 / 40%);

}

/* First button in the first accordion-item */
.accordion-glass .accordion-item:first-child .accordion-button {
  border-radius: 10px 10px 0px 0px;
}

.accordion-glass .accordion-item:first-child .accordion-button.collapsed {
  border-radius: 10px 10px 0px 0px;
}

/* Last button in the last accordion-item */
.accordion-glass .accordion-item:last-child .accordion-button, .accordion-glass .accordion-item:last-child .accordion-button.collapsed {
  border-radius: 0px 0px 10px 10px;
}

/* Remove border-radius when the last button is expanded */
.accordion-glass .accordion-item:last-child .accordion-button:not(.collapsed) {
  border-radius: 0;
}

/* ACCORDION WHITE */

/* accordion-glass-white is optimized for dark backgrounds, using lighter button colors */
.accordion-glass-white .accordion-button {
    background: rgb(255 255 255 / 10%);
    color: #fff;
}

.accordion-glass-white .accordion-button:hover {
    background: rgb(255 255 255 / 15%);
}


.accordion-glass-white .accordion-collapse {
    background: #fff;
    
}

.accordion-glass-white .accordion-button:not(.collapsed) {
    background: rgb(255 255 255 / 20%);
   
}

/* First button in the first accordion-item */
.accordion-glass-white .accordion-item:first-child .accordion-button {
  border-radius: 10px 10px 0px 0px;
}

.accordion-glass-white .accordion-item:first-child .accordion-button.collapsed {
  border-radius: 10px 10px 0px 0px;
}

/* Last button in the last accordion-item */
.accordion-glass-white .accordion-item:last-child .accordion-button, 
.accordion-glass-white .accordion-item:last-child .accordion-button.collapsed {
  border-radius: 0px 0px 10px 10px;
}

/* Remove border-radius when the last button is expanded */
.accordion-glass-white .accordion-item:last-child .accordion-button:not(.collapsed) {
  border-radius: 0;
}




.carousel-indicators [data-bs-target] {
    border-radius: 10px;
    width: 15px;
    height: 15px;
    background-color: #272727;
    border-top: 0;
    border-bottom: 0;
}


/* simple blockquote for articles, basic pages. */
/* blockquote {

    margin: 0 0 1rem;
    border-left: solid 5px;
    border-color: #30336d;
    padding: 1rem 1.5rem;
    background: rgb(255 254 249 / 85%);
    box-shadow: 2px 2px 5px 0px rgb(0 0 0 / 5%);

} */

/* gcs quote v1.1 - neutralises global blockquote */
blockquote.gcs-quote, blockquote.g-quote  {    

border: none;
padding: 2rem;
margin: 0;
background:none;
box-shadow: none;

}

.gcs-quote, g-quote {
    position: relative;
}

.gcs-quote p, g-quote p {    

    font-style: italic;
    font-weight: 300;
    font-size: 110%;

}
.gcs-quote::before {
    font-family: 'Trebuchet MS';
    content: "\201C";
    font-size: 15em;
    position: absolute;
    line-height: 0.8;
    top: 0;
    margin-left: -3rem;
    color: rgb(0 0 0 / 10%);
}

.gcs-quote::after {
    position: absolute;
    content: "\201D";
    font-size: 15em;
    font-family: 'Trebuchet MS';
    line-height: 0.0;
    bottom: -30px;
    right: 0.5rem;
    color: rgb(0 0 0 / 10%);
}

.gcs-quote-author, gq-author {
    padding: 5px 10px;
    font-weight: 900;
    text-transform: uppercase;
    clip-path: polygon(0% 0, 100% 0, 98% 100%, 0 100%);
    width: fit-content;
    margin-bottom: -15px;
    font-size: 2rem;
}

.gcs-quote-subtitle {
    padding-top:20px;
    font-size: 20px;
}

/* background gradients */
    /* background styles that use ::pseudo elements use position relative */
.bg-vignette, .butch-vig, .bg-gradient-container, .bg-eclipse, .blindspot {
    position: relative;

}

.bg-vignette::before, .butch-vig::before {
    background: radial-gradient(transparent 50%, rgb(0 0 0 / 50%) 95%);
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 100%;

}

.bg-eclipse::before, .blindspot::before {
    background: radial-gradient(rgb(0 0 0 / 50%) 25%, transparent 75%);
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
}

/* left & right gradient outside of container */


.bg-gradient-container::before, .bg-gradient-container::after {
    content: '';
    position: absolute;
    height: 100%;
}

.bg-gradient-container::before {
    background: linear-gradient(90deg, transparent 75%, rgb(0 0 0 / 25%));
    right: 0;
    left: 50%;
    
}

.bg-gradient-container::after {
    background: linear-gradient(90deg, rgb(0 0 0 / 25%), transparent 25%);
    right: 50%;
    left: 0;
    bottom: 0;
    
}

/* Gradientz */

.bg-gradient-trans-off-blue {
    background: linear-gradient(0deg, rgb(15 20 126 / 10%) 0%, transparent 100%);
}

.bg-gradient-trans-white {
    background: linear-gradient(180deg, transparent, white);
}

.bg-gradient-white-trans {
    background: linear-gradient(180deg, white, transparent);
}

.bg-gradient-tint-bottom {
    background: linear-gradient(180deg, transparent 50%, rgb(0 0 0 / 25%) 100%);

}

/* v1.1 main menu hover effects */
  .gcs-second-menu .nav-link, .pgram-expand, .pgram-expand-light, .pgram-expand-dark  {
    position: relative;
  }
  .gcs-second-menu .nav-link:hover::after{
    content:"";
    background: rgb(255 255 255 / 15%);
    clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    -webkit-animation: pgramExpand 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: pgramExpand 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  }

  .pgram-expand:hover::after {
    content:"";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    -webkit-animation: pgramExpand 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: pgramExpand 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;      
  }

  .pgram-expand-light:hover::after {
    content:"";
    background: rgb(255 255 255 / 15%);
    clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    -webkit-animation: pgramExpand 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: pgramExpand 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  }

  .pgram-expand-dark:hover::after {
    content:"";
    background: rgb(0 0 0 / 15%);
    clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    -webkit-animation: pgramExpand 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: pgramExpand 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  }
        
/* v1.1 animations */
        @-webkit-keyframes pgramExpand {
        0% {
            -webkit-transform: scaleX(0.4);
                    transform: scaleX(0.4);
        }
        100% {
            -webkit-transform: scaleX(1);
                    transform: scaleX(1);
        }
        }
        @keyframes pgramExpand {
        0% {
            -webkit-transform: scaleX(0.4);
                    transform: scaleX(0.4);
        }
        100% {
            -webkit-transform: scaleX(1);
                    transform: scaleX(1);
        }
        }


        @-webkit-keyframes expandRight {
            0% {
                transform: scaleX(0);
                transform-origin: 0% 0%;
            }

            100% {
                transform: scaleX(1);
                transform-origin: 0% 0%;
            }
        }

        @keyframes expandRight {
            0% {
                transform: scaleX(0);
                transform-origin: 0% 0%;
            }

            100% {
                transform: scaleX(1);
                transform-origin: 0% 0%;
            }
        }



/* creates a paper looking version of .card */
.card-paper {
    background: white;
    border-left: 0.5em solid rgb(0 0 0 / 20%);
    padding: 1.5rem 1.5rem;
}

.fw-black {
    font-weight: 900!important;
}

.inset-box-shadow {
    box-shadow: inset 0 -0.3em 0 rgb(0 0 0 / 20%);
}

/* hover effect for course listing cards 
.gcs-crs-listing .card:hover {
    box-shadow: 0px 13px 10px 0px rgba(0 0 0 / 20%)!important;
    transition: ease 0.5s;
    transform: translateY(-5px);
}*/


/* v0.7 bg-blur */

.bg-blur {
      z-index: 1;
  }
  .bg-blur::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      -webkit-mask-image: url(https://i.imgur.com/nGUV053.png);
      -webkit-mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      background: rgb(0 0 0 / 10%);
  }

/* cool animation that darkens the entire panel on click, apart from elements with a higher z-index of 1 */
.blackout:focus-within { 
    
    outline: 0;
    -webkit-box-shadow: 0 0 0px 100vh rgb(0 0 0 / 70%);
    box-shadow: 0 0 0px 100vh rgb(0 0 0 / 70%);
    transition: box-shadow ease 1s;
}
/* used on tranparent inputs */
.white-placeholder input::placeholder {
    color: white;
}

.focus-tint:focus-within {
    -webkit-box-shadow: 0 0 0px 100vh rgb(0 0 0 / 20%);
    box-shadow: 0 0 0px 100vh rgb(0 0 0 / 20%);
    transition: box-shadow ease 1s;
}

/* input group for landing page search */

.landing-page-search .white-placeholder input::placeholder {
    color: rgb(255 255 255 / 95%);
}

.landing-page-search.light-search  {
    background: rgb(0 0 0 / 10%);


}

.landing-page-search input:focus {
    -webkit-box-shadow: none; /* cancels the global bootstrap focus, which was blue */
    box-shadow: none; 
    /*-webkit-box-shadow: 0 0 0 0.25rem rgb(0 0 0 / 5%);
    box-shadow: 0 0 0 0.25rem rgb(0 0 0 / 5%); */
}

.landing-page-search:focus-within {
    box-shadow: 0 0 0 0.1rem rgb(255 255 255 / 95%);
}

.landing-page-search button {
    background: rgb(0 0 0 / 5%);
    color: white;
}

/* landing page search button, without a specified colour class, will default to this */
.landing-page-search button:hover, .landing-page-search button:focus-within {
    background: white;
    mix-blend-mode: screen; 
    color: black!important;
}

/* landing page search if the colour is bg-off-blue */
.landing-page-search.bg-off-blue button:hover, .landing-page-search.bg-off-blue button:focus-within {
    background: #0f147f!important;
    color: white!important;
    mix-blend-mode: normal;
}



.landing-page-search.bg-off-blue:focus-within {
    box-shadow: 0 0 0 0.1rem rgb(15, 20, 127, 25%);
}



.z-1 {
    z-index: 1;
}
  

/* v0.7 for future video background */
.video-bg video {
object-fit: cover;
width: 100vw;
height: 75vh;
position: absolute;
left:0;
}
.video-bg {
min-height:75vh;
}

/* sideways scrolling submenu - v2 needs script to help auto scroll when item is clicked */

.sss-link.pgram-expand-dark:hover::after {
content: "";
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%)!important;
background: rgb(0 0 0 / 5%)!important;
}

.sss {
white-space: nowrap;
scroll-behavior: smooth;
/* scroll-snap-type: x mandatory;  Enable snapping on the x-axis */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling for touch devices */
}

.sss a.sssactive {
border-bottom: 3px solid #dcdcdc;
}
.sss::-webkit-scrollbar {
  height: 5px; /* Define the height of the scrollbar */
}
.sss::-webkit-scrollbar-track {
  background: transparent; /* Make the track completely transparent */
}
.sss::-webkit-scrollbar-thumb {
background: rgb(0 0 0 / 25%);
    border-radius: 1px;
}
.sss::-webkit-scrollbar-thumb:hover {
background: rgb(0 0 0 / 35%); /* Change thumb color on hover for better visibility */
}
.sss-link {
 letter-spacing: -0.25px;
}
.sss-link:hover {
 text-decoration: none;
    color: #1539a5;
}
@media (max-width: 1080px) {
  .sss-fade::after{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, #f8f9fa 50%);
    width: 50px;
    z-index: 1021;
opacity:.9;
}
}

/* variables */
:root {
    --sunset-blue-rgb: rgba(78 87 129);
    --sunset-pink-rgb: rgba(244 152 144);
    }

/* ACCESSIBILITY OVERRIDES */

/* focus visible outline on buttons */

button:focus-visible, a:focus-visible {
    outline: #fd0 solid 3px!important;
}