:root {
    --navyColor:var(--VCAA-secondary-blue-2); /*replaces linkit navy*/
    --red:var(--VCAA-secondary-blue-2); /*replaces linkit red*/
    --red2:var(--VCAA-primary-blue); /*replaces linkit red2*/

/* Variables for VCAA branding */

    --VCAA-gradient-angle: -49.25deg; /* Initally set to 90 + 40.75 from style guide */
    --VCAA-gradient-band-width: 200px; /* Width of middle gradient band - not sure if should be set width or percentage based */
    --VCAA-gradient-break-1: 34%; /* First gradient break point */
    --VCAA-gradient-break-2: calc(var(--VCAA-gradient-break-1) + var(--VCAA-gradient-band-width)); /* Second gradient break point */
    --VCAA-white-stripe-width: 3px; /* Multiplied by two when used */
    --VCAA-primary-blue: rgba(0, 153, 227, 1);
    --VCAA-secondary-blue-1: rgba(0, 118, 163, 1);
    --VCAA-secondary-blue-2: rgba(0, 61, 88, 1);
    
}

/* Begin VCAA Gradient Background */
/* VCAA Blue Stipes */

#portal-v2-containter.special-page-login {
    background: linear-gradient(var(--VCAA-gradient-angle),
     var(--VCAA-primary-blue) 0%,
     var(--VCAA-primary-blue) var(--VCAA-gradient-break-1),
     var(--VCAA-secondary-blue-1) var(--VCAA-gradient-break-1),
     var(--VCAA-secondary-blue-1) var(--VCAA-gradient-break-2),
     var(--VCAA-secondary-blue-2) var(--VCAA-gradient-break-2));
}

/* Right White Stipe */
#portal-v2-containter.special-page-login::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
        background: linear-gradient(var(--VCAA-gradient-angle), 
        rgba(0, 153, 204, 0) 0%, 
        rgba(255, 255, 255, 0) calc(var(--VCAA-gradient-break-1) - var(--VCAA-white-stripe-width)), 
        rgba(255, 255, 255, 1) calc(var(--VCAA-gradient-break-1) - var(--VCAA-white-stripe-width)), 
        rgba(255, 255, 255, 1) calc(var(--VCAA-gradient-break-1) + var(--VCAA-white-stripe-width)), 
        rgba(255, 255, 255, 0) calc(var(--VCAA-gradient-break-1) + var(--VCAA-white-stripe-width))
    );
    mask: linear-gradient(to right, black 0%, black calc(calc(100% - var(--VCAA-gradient-break-1)) - 100px), transparent calc(calc(100% - var(--VCAA-gradient-break-1)) - 100px), transparent 100%);
}

/* Left White Stipe */
#portal-v2-containter.special-page-login::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
        background: linear-gradient(var(--VCAA-gradient-angle), 
        rgba(0, 153, 204, 0) 0%, 
        rgba(255, 255, 255, 0) calc(var(--VCAA-gradient-break-2) - var(--VCAA-white-stripe-width)), 
        rgba(255, 255, 255, 1) calc(var(--VCAA-gradient-break-2) - var(--VCAA-white-stripe-width)), 
        rgba(255, 255, 255, 1) calc(var(--VCAA-gradient-break-2) + var(--VCAA-white-stripe-width)), 
        rgba(255, 255, 255, 0) calc(var(--VCAA-gradient-break-2) + var(--VCAA-white-stripe-width))
    );
    mask: linear-gradient(to right, black 0%, black calc(calc(100% - var(--VCAA-gradient-break-2)) - 300px), transparent calc(calc(100% - var(--VCAA-gradient-break-2)) - 300px), transparent 100%);
}

/* End VCAA Gradient Background */

    
.logo {
    background: url(https://linkit-css-aus.s3.ap-southeast-2.amazonaws.com/Portal/UAT/3054/vcaastack.svg) no-repeat center;
    width:220px;
    height: 100px
}

body:not(.vertical-navigation-expanded) .logo {
    background: url(https://linkit-css-aus.s3.ap-southeast-2.amazonaws.com/Portal/UAT/3054/vcaaicon.svg) no-repeat center;
    width: 52px;
    height: 50px
}

.slider-wrapper {
    position:relative;
    aspect-ratio:65/24;
    max-width:1400px
}