/*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ====================================================================================================================
   ! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css
   ==================================================================================================================== */


/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

html {
    line-height: 1.15; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
    color: #222;
    font-size: 100%
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
    margin: 0;
    font-family: montserrat, sans-serif;

}


/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
    display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
    margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
    background-color: transparent; /* 1 */
    -webkit-text-decoration-skip: objects; /* 2 */
}

p a {
    color: #565c63;
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
    font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
    font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
    background-color: #ff0;
    color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
    display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
    border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
    overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
    font-family: sans-serif; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
    text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
    -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
    display: inline-block; /* 1 */
    vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
    display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
    display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
    display: none;
}


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

html {
    color: #222;
    font-size: 100%;
    line-height: 1.4;
}

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

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

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

/*
 * A better looking default horizontal rule
 */

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

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

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

/*
 * Remove default fieldset styles.
 */

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

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

textarea {
    resize: vertical;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}


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

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

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

/* --- colours and fills ---- */
.light-blue-fill {
    fill: #0069AF;
    color: #0069AF;
}

.grey3-fill {
    fill: #646E78;
    color: #646E78;
}

.grey2-fill {
    fill: #565c63;
    color: #565c63;
}

.grey1-fill {
    fill: #E4E7EA;
    color: #E4E7EA;
}

.white-fill, .white-fill p, .white-fill strong {
    fill: #fff;
    color: #fff !important;
}

/* -- colours Backgrounds -- */
.acc-blue-bkg {
    background-color: #023E83;
}

.light-blue-bkg {
    background-color: #0069AF
}

.light-blue-bkg a, .light-blue-bkg p {
    color: #fff;
}

.grey5-bkg {
    background-color: #2E2E2D;
    color: #fff;
}

.grey5-bkg h1, .grey5-bkg h2, .grey5-bkg p {
    color: #fff;
}

.grey4-bkg {
    background-color: #414B56;
}

.grey3-bkg {
    background-color: #646E78;
}

.grey2-bkg {
    background-color: #565c63;
}

.grey1-bkg {
    background-color: #E9ECEF;
}

.white-bkg {
    background-color: #fff;
}

.no-bkg {
    background-color: transparent;
    background: none;
}


.flex-wrap {
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .flex {
        display: flex;
        align-self: center;
    }

    .flex div, .flex img {
        margin: 0 2rem;
    }
}

/* -- scale and layout -- */
.mobile-only, .no-desktop {
    visibility: visible;
    display: inherit;
}

.no-mobile, .desktop-only {
    visibility: hidden;
    display: none;
}

@media (min-width: 768px) {
    .no-desktop, .mobile-only {
        visibility: hidden;
        display: none;
    }

    .no-mobile, .desktop-only {
        visibility: visible;
        display: inherit;
    }
}


.full-width {
    width: 100%;
    height: auto;
}

h1 {
    color: #2a333c;
    font-size: 1.4rem;
    text-align: center;
    width: 100%;
    font-weight: 300;
    padding: 1.5rem 0 1.5rem 0;
    margin-bottom: 2rem;

    /*border-top: 1px solid #646E78;*/
    /*border-bottom: 1px solid #646E78;*/
}

@media (min-width: 768px) {
    h1 {
        padding: 0px;
        font-size: 2.3rem;
        border-top: 0px;
        border-bottom: 0px;
    }
}

h2 {
    font-size: 1.3em;
    font-weight: 300;
    margin: 0;
    /*padding: 3rem 0 1rem 0px;*/
    color: #646E78;
}

.p,
p {
    line-height: 1.55;
    font-size: 1em;
    font-weight: 300;
    font-family: montserrat, sans-serif;
    color: #646e78;
}

li, ol {
    font-weight: 300;
}

/* ----- animations ----- */
.hvr-shrink {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
    opacity: 0.75;
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -2rem;
    margin-left: -2rem;
}

/* b-lazy image lazy loading */
.b-lazy {
    -webkit-transition: opacity 500ms ease-in-out;
    -moz-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;
    max-width: 100%;
    opacity: 0;
}

.b-lazy.b-loaded {
    opacity: 1;
    max-width: 100%;
}


/* =================================================================================== website content ================================*/


/* header */
header {
    width: 100%;
    height: auto;
    background-color: #2A333C;
    min-height: 90px;
    position: fixed;
    top: 0;
    z-index: 200;
}

#home header{
    background-color: transparent;

}

.acc-logo {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1.5em;
    min-width: 200px;
    max-width: 16%;
    z-index: 500;
}

.acc-logo svg {
    width: 80%;
}

.acc-logo .logo-dark svg {
    fill: #000;
}

.acc-logo .logo-light svg {
    fill: #fff;
}

.acc-logo1 {
    fill: url("#SVGID_1_")
}

.acc-logo2 {
    fill: url("#SVGID_2_")
}

.acc-logo3 {
    fill: #a1a2a1
}



/* ------ main menu ------*/
/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Button styling */
.menu-toggle {
    right: 0;
    top: 0;
    margin: 1.5rem;
    position: absolute;
    display: inline-block;
    padding: .75em 15px;
    line-height: 1em;
    font-size: 1em;
    color: #333;
}

.menu-toggle:hover,
.menu-toggle:focus {
    color: #c00;
}

/*
 Default styles + Mobile first
 Offscreen menu style
*/
.main-menu {
    position: absolute;
    right: -200px;
    top: 0;
    height: 100%;
    overflow: scroll;
    transition: right 0.5s ease,
    box-shadow 0.5s ease;
    z-index: 401;
    background-color: #2A333C;
}

.main-menu ul {
    list-style: none;
    text-align: center;
    margin: 3rem 0;
    padding: 2.5em 0 0;
    /* Hide shadow w/ -8px while 'closed'
    min-height: 100%; */
}

.main-menu li {
    border-bottom: 1px solid #414B56;
    padding: 1.5rem 0 1.5rem 0;
}

.main-menu li:first-child {
    border-top: 1px solid #414B56;
}

.main-menu a {
    display: block;
    line-height: 1em;
    font-size: 1.3em;
    color: #fff;
    text-decoration: none;
    padding: 1rem;
}

.main-menu li:hover,
.main-menu li:focus {
    background: #414B56;
    /* Firefox */
    -moz-transition: all 0.3s ease-in;
    /* WebKit */
    -webkit-transition: all 0.3s ease-in;
    /* Opera */
    -o-transition: all 0.3s ease-in;
    /* Standard */
    transition: all 0.3s ease-in;
    text-decoration: none;
}

.main-menu .menu-close {
    padding: 2.2rem 3rem;
    position: absolute;
    right: 0;
    top: 0;
}

/*
 On small devices, allow it to toggle...
*/
/*
 :target for non-JavaScript
 aria-expanded="true/false" will be for JavaScript
*/
.main-menu:target,
.main-menu[aria-expanded="true"] {
    right: 0;
    outline: none;
    width: 100vw;
}

.main-menu:target .menu-close,
.main-menu[aria-expanded="true"] .menu-close {
    z-index: 403;
}

.main-menu:target ul,
.main-menu[aria-expanded="true"] ul {
    position: relative;
    z-index: 401;
}

/*
 We could us `.main-menu:target:after`, but
 it wouldn't be clickable.
*/
.main-menu:target + .backdrop,
.main-menu[aria-expanded="true"] + .backdrop {
    position: fixed;
    display: block;
    content: "";
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 400;
    background: #2A333C;
    cursor: default;
}

@supports (position: fixed) {
    .main-menu,
    .main-menu:target + .backdrop,
    .main-menu[aria-expanded="true"] + .backdrop {
        position: fixed;
    }
}

/*----------------------child school sublist (dropdown) menu-----------------------*/


#main-menu ul.ChildList {
    display: none;
    background-color: #414b56;
    border-bottom: 1px solid #2a333c;
    font-size: 1.5rem;
    padding: 0;
    margin: 0 0 -2rem 0;

    -webkit-transition: all 500ms ease time;
    -moz-transition: all 500ms ease time;
    -ms-transition: all 500ms ease time;
    -o-transition: all 500ms ease time;
    transition: all 500ms ease time;
}

body.school-list-open #main-menu ul.ChildList {
    display: block
}

#main-menu li ul.ChildList li {
    padding: 0;
}

    #main-menu li ul.ChildList li:hover {
        background-color: #E4E7EA;
    }

#main-menu li ul.ChildList li a {
    font-size: 1rem;
    padding: .6rem;
}

    #main-menu li ul.ChildList li:hover a {
        color: #414b56;
        text-decoration: none;
    }


/*------sub menu controller------*/
body #main-menu .reveal {
    border-style: solid;
    border-width: 0 0 2px 2px;
    content: "";
    display: inline-block;
    height: 9px;
    left: 2rem;
    position: relative;
    top: 1px;
    vertical-align: top;
    width: 9px;
    transform: rotate(-45deg);
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

body.school-list-open #main-menu .reveal {
    transform: rotate(135deg);
    top: 5px;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}


/*
 Larger screen styling
 Horizontal menu
*/
@media (min-width: 768px) {

    #main-menu li ul.ChildList li {
        padding: 0;
    }

    #main-menu li ul.ChildList li a {
        font-size: 1rem;
        padding: 10px 15px 9px 15px;
        width: 10rem;
        margin: 0;
    }

    #main-menu li ul.ChildList li:hover a, #main-menu li ul.ChildList li a:hover {
        padding: 10px 15px 9px 15px;
        margin: 0;

    }


    .menu-toggle,
    .main-menu .menu-close {
        display: none;
    }

    /* Undo positioning of off-canvas menu */
    .main-menu {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0 1.5rem;
        height: auto;
        width: auto;
        background: none;
        overflow: visible;
    }

    .main-menu ul {
        display: flex;
        justify-content: flex-end;
        align-items: baseline;

        /* Undo off-canvas styling */
        padding: 0;
        margin: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        height: auto;
        width: auto;
        background: none;
    }

    .main-menu li {
        border-bottom: 0px;
        padding: 1rem 0 1.5rem 0;
    }

    .main-menu li:first-child {
        border-top: 0;
    }

    .main-menu li a {
        color: #fff;
        padding: .75em 15px;
        font-weight: 300;
        font-size: 1.4rem;
        fill: none;
        stroke: #FFFFFF;
        opacity: 1;
        margin-bottom: .75rem;
        border-bottom: 1px solid transparent;

    }

    .main-menu li:hover,
    .main-menu li:focus {
        background: none; /* Remove background from off-canvas styling */
        color: #c00;
    }

    .main-menu li a:hover {
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        position: relative;
        -webkit-transition-property: color;
        transition-property: color;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        color: #fff;
        border-bottom: 1px solid #fff;
        text-decoration: none;

    }

    .main-menu li a:hover.home-arrow {
        border-bottom: hidden;
    }

    .main-menu li a:hover.home-arrow:after {
        content: 'back'
    }

    .main-menu li a:hover svg {
        transform: rotate(361deg);
        -webkit-offset-rotate: 361;
        offset-rotate: 361;
        -webkit-transition: all 0.3s ease-in-out 0s;
        transition: all 0.3s ease-in-out 0s;
    }

    @keyframes fade {
        0%, 100% {
            opacity: 1
        }
        100% {
            opacity: 0
        }
    }

    /*----------------------dropdown menu-----------------------*/
    #main-menu .ParentItem {
        border-bottom: 0;
        position: relative;
    }

    body #main-menu .reveal {
        display: none
    }

    #main-menu ul.ChildList {
        display: none;
        opacity: 0;
        -webkit-transition: opacity 500ms ease;
        -moz-transition: opacity 500ms ease;
        -ms-transition: opacity 500ms ease;
        -o-transition: opacity 500ms eas;
        transition: opacity 500ms ease;
    }

    #main-menu li:hover ul.ChildList {
        position: absolute;
        left: -2rem;
        top: 4.5rem;
        max-width: unset;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        opacity: 1;

        display: flex;
        flex-direction: column;
        background-color: #2a333c;
        -webkit-transition: opacity 500ms ease;
        -moz-transition: opacity 500ms ease;
        -ms-transition: opacity 500ms ease;
        -o-transition: opacity 500ms ease;
        transition: opacity 500ms ease;
    }

    #main-menu li:hover ul.ChildList:before {
        content: '';
        position: absolute;
        top: -6px;
        left: 45%;
        width: 0;
        height: 0;
        box-shadow: 2px -2px 6px rgba(0, 0, 0, 0.05);
        border-top: 6px solid #2a333c;
        border-right: 6px solid #2a333c;
        border-bottom: 6px solid transparent;
        border-left: 6px solid transparent;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        mix-blend-mode: multiple;
    }
}


/* ================================================== BODY ==================================================================  */

main{
    padding: 1rem;
    margin: 5rem 0;
}

/* ----- Homepage ----- */
body#home {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: montserrat, sans-serif;
}

@media only screen and (min-width: 768px){
    main {
        width: 96vw;
        max-width: 1200px;
        margin: auto;
        padding: 0;
    }
}

body#home {
    background-image: url(/img/template-images/homepage-bkg-400.jpg);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;

    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: montserrat, sans-serif;
    background-color: #2a333c
}

@media only screen and (min-width: 576px) {
    body#home {background-image: url(/img/template-images/homepage-bkg-600.jpg);}
}
@media only screen and (min-width: 768px) {
    body#home {background-image: url(/img/template-images/homepage-bkg-1200-preload.jpg);}
}

@media only screen and (min-width: 1170px) {
    body#home {background-image: url(/img/template-images/homepage-bkg-1600-preload.jpg);}
}

@media only screen and (min-width: 2200px) {
    body#home {background-image: url(/img/template-images/homepage-bkg-2000-preload.jpg);}
}


.cd-title {
    position: relative;
    height: 160px;
    line-height: 230px;
    text-align: left;
}

.cd-title h1 {
    font-size: 2rem;
    font-weight: 400;
}

@media only screen and (min-width: 768px) {
    .cd-title {
        line-height: 250px;
    }
}

@media only screen and (min-width: 1170px) {
    .cd-title {
        height: 200px;
        line-height: 300px;
    }

    .cd-title h1 {
        font-size: 3rem;
    }
}

.home-title {
    height: unset;
    width: 72%;
    max-width: 950px;
    margin: 1rem;
    text-align: left;
    z-index: 200;

}

.home-title h2 {
    position: relative;
    line-height: 2.5rem;
    text-align: left;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0;
}

.description {
    width: calc(100% - 2rem);
    position: relative;
    margin: auto;
    display: block;
}

.description p {
    color: #fff;
}

@media only screen and (min-width: 768px) {
    .home-title {
        /*height: 160px;*/
        width: 85%;
        margin: 0;
        text-align: left;
    }

    .home-title h2 {
        position: relative;
        line-height: 3rem;
        text-align: left;
        font-size: 3rem;
        font-weight: 700;
        color: #fff;
    }

    .description {
        width: 60%;
    }

    .description {
        max-width: 750px;
        margin: 0;
    }

    .description p {
        font-size: 1.4rem;
    }
}

@media only screen and (min-width: 1170px) {
    .home-title h2 {
        /*height: 200px;*/
        font-size: 3rem;
        color: #fff;
    }
}

.cd-headline {
    font-size: 1.7rem;
    line-height: 1.2;
    text-align: center;
    font-weight: 300;
}

.cd-headline span {
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .cd-headline {
        font-size: 2.4rem;
        font-weight: 300;
    }

    #main-menu li:hover ul.ChildList li:hover a{
        border: 0;
        margin: 0;
    }

    .cd-headline span {
        width: auto;
    }

}

@media only screen and (min-width: 1170px) {
    .cd-headline {
        font-size: 3rem;
    }
}

.cd-words-wrapper {
    display: inline-block;
    position: relative;
    text-align: center;
    width: 60%;
}

.cd-words-wrapper b {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    left: 0;
    top: 0;
    font-weight: 300;
}

.cd-words-wrapper b.is-visible {
    position: relative;
}

.no-js .cd-words-wrapper b {
    opacity: 0;
}

.no-js .cd-words-wrapper b.is-visible {
    opacity: 1;
}


/* ------------homepage CTA button with dropdown------ */

#home-cta .container {
    position: relative;
    margin-top: 2rem;
    /*top: 50%;*/
    /*left: 50%;*/
    /*-webkit-transform: translate(-50%, -50%);*/
    /*transform: translate(-50%, -50%);*/
}

#home-cta .btn {
    outline: 0;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-radius: .25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding: 1.3rem 3rem;
    color: #fff;
    font-family: montserrat, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    overflow: hidden;
    cursor: pointer;
    background-color: #0069b4

}
#home-cta .btn:focus .dropdown
, #home-cta .btn:active .dropdown
    /*, #home-cta .btn:hover .dropdown*/
    /*, #home-cta .btn:hover .dropdown*/
{
    -webkit-transform: translate(0, 5px);
    transform: translate(0, 5px);
    opacity: 1;
    visibility: visible;
}
#home-cta .btn .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #2a333c;
    width: inherit;
    padding: 0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s ease;
}
#home-cta .btn .dropdown:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    box-shadow: 2px -2px 6px rgba(0, 0, 0, 0.05);
    border-top: 6px solid #2a333c;
    border-right: 6px solid #2a333c;
    border-bottom: 6px solid transparent;
    border-left: 6px solid transparent;
    mix-blend-mode: multiple;

    top: -6px;
    left: 45%;
    right: unset;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}
#home-cta .btn .dropdown li {
    z-index: 1;
    position: relative;
    background: #2a333c;
    padding: 0 20px;
    color: #fff;
    list-style: none;
}


#home-cta .btn .dropdown li.active,  #home-cta .btn .dropdown li.hover, #home-cta .btn .dropdown li.hover a {
    color: #5380F7;
}
#home-cta .btn .dropdown li:first-child {
    border-radius: 4px 4px 0 0;
}
#home-cta .btn .dropdown li:last-child {
    border-radius: 0 0 4px 4px;
}
#home-cta .btn .dropdown li:last-child a {
    border-bottom: 0;
}
#home-cta .btn .dropdown a {
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 10px 0;
    color: inherit;
    font-size: .7rem;
    text-decoration: none;
}

#home-cta .btn .dropdown li:hover{background-color:#E4E7EA}
#home-cta .btn .dropdown li:hover a{color:#2a333c}

#home-cta .btn .dropdown {
    position: absolute;
    top: 4rem;
    right: unset;
    left: unset;
}

@media only screen and (min-width: 768px) {
    #home-cta .btn {
        position: relative;
        overflow: visible;
    }

    #home-cta .btn .dropdown {
        position: absolute;
        top: -12rem;
        right: -13rem;
        left: unset;
    }


    #home-cta .btn .dropdown:before {
        position: absolute;
        top: 12rem;
        right: unset;
        left: -5px;
        -webkit-transform: rotate(226deg);
        transform: rotate(226deg);
    }
}

/*3d effect div for homepage*/
#gl {
    display: none;
}

@media (min-width: 768px) {
    #gl {
        display: block;
        width: 100vw;
        height: 100vh;
        left: 0;
        top: 0;
        position: absolute;
        z-index: -1;
    }
}

#homebkgimage {
    z-index: 100;
}

.centre-content {
    width: 100%;
    margin: 0 auto;
    display: flex
}
/* -------------------------------- xclip -------------------------------- */
.cd-headline.clip span {
    display: inline-block;
    padding: 0.2em 6px 0.2em 0;
}

.cd-headline.clip .cd-words-wrapper {
    overflow: hidden;
    vertical-align: top;
    text-align: left;
}

.cd-headline.clip .cd-words-wrapper::after {
    /* line */
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background-color: #0069AF; /*light blue*/
}

.cd-headline.clip b {
    opacity: 0;
    font-weight: 700;
}

.cd-headline.clip b.is-visible {
    opacity: 1;
}


/* ------------------- SCHOOL Page -------------- */
@media only screen and (min-width: 768px) {
    #schools, #careers, #about {
        min-height: 100vh;
        margin-left: auto;
        margin-right: auto;

        display: flex;
        flex-direction: column;
        align-content: center;
    }
}

#schools > p {
    text-align: center;
}


#schools .card {
    margin: 1rem 0;
    flex: 1 0;
    min-width: 270px;
    max-width: 100%;
    position: relative;
    padding: 0 0 2em 0;
    transition: all .1s ease-in;
    margin-bottom: 1em;
    display: flex;
    flex-flow: column;
    box-sizing: border-box;
    text-align: center;
}

@media only screen and (min-width: 768px) {
    #schools .card {
        margin: 1rem;
    }
}

#schools .card h2, #schools .card p {
    padding: 0 2rem;
    margin: 0;
    color: #fff
}

#schools .card a {
    text-decoration: none
}

#schools .card img {
    display: block;
    border: 0;
    width: 100%;
    height: auto;
    margin-bottom: 1em;
}

/*-- ----------------------------- CAREERS PAGE ----------------------------- */

#careers h2{
    margin: -3rem 0 0;
    padding: 6rem 0 1rem;
}
/* Acordeon styles */
.tab {
    position: relative;
    margin-bottom: 1px;
    width: 100%;
    color: #2A333C;
    /*background-color: #E9ECEF;*/
    overflow: hidden;
}

input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

label {
    position: relative;
    display: block;
    padding: 2rem;
    margin: .5rem 0;
    font-weight: 500;
    line-height: 1.5rem;
    cursor: pointer;
    /*transition: all 500ms ease;*/
    background-color: #E9ECEF;
}

.blue label {
    background: #2980b9;
}

.tab-content {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    background-color: #E9ECEF;
    -webkit-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
.tab-content p,
.tab-content li,
.tab-content a{
    opacity: 0;
    transition: all 500ms ease;
}

.blue .tab-content {
    background: #3498db;
}

.tab-content p, .tab-content ul, .tab-content ol {
    color: #565c63;
    font-size: 1em;
}


/* when :checked = tab main content */
input:checked ~  .tab-content, .tab-content:target {
    max-height: 300em;
    -webkit-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
input:checked ~  .tab-content, .tab-content:target p,
input[type=checkbox]:checked+label+.tab-content p,
input:checked ~  .tab-content, .tab-content:target li,
input[type=checkbox]:checked+label+.tab-content li,
input:checked ~  .tab-content, .tab-content:target a,
input[type=checkbox]:checked+label+.tab-content a{
    opacity: 1;
    transition: all 500ms ease;
}



input[type=checkbox]:checked +  label {
    display:block;
    margin-bottom: 0;
}

/* Icon */
label::after {
    position: absolute;
    right: -20px;
    top: 1rem;
    display: block;
    width: 2rem;
    height: 2rem;
    line-height: 3;
    text-align: center;
    -webkit-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

input[type=checkbox] +  label::after {
    position: absolute;
    display: block;
    content: "";
    width: 2px;
    color: #2A333C;
    height: 9px;
    background-color: #2A333C;
    right: 26px;
    top: 45%;
    transform: rotate(-130deg);
    font-size: 2rem;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
}

input[type=checkbox] +  label::before {
    position: absolute;
    display: block;
    content: "";
    width: 2px;
    color: #2A333C;
    height: 9px;
    background-color: #2A333C;
    right: 32px;
    top: 45%;
    transform: rotate(130deg);
    font-size: 2rem;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
}

input[type=checkbox]:checked +  label::before {
    right: 26px;
    transform: rotate(676deg);

}

input[type=checkbox]:checked + label::after {
    right: 32px;
    transform: rotate(-676deg);
}

input[type=radio]:checked + label::after {
}

input[type=checkbox]:checked +  label + .tab-content {
    padding: 0 2rem 2rem 2rem;

}

#states{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 1rem 0 2rem;
}
#states span {
    width: 9rem;
    text-align: center;
    background-color: rgb(233, 236, 239);
    padding: 0.5rem;
    display: block;
    margin: 0.5rem;
}

#states a span {
    text-transform: uppercase;
    color: rgb(42, 51, 60);
    font-size: 0.7rem;
    text-decoration: none;
    margin: auto;
}

#states a{
    text-decoration: none;
    color:#2A333C;
    font-size: 0.7rem;
    display: flex;
    margin: .5rem auto;
    background-color: #E9ECEF;
    padding: .5rem 1rem;
    text-align: center;
    width: calc(100% - 2rem);
}
#states a:hover,
#states a:hover span,
#states span:hover
{
    color: #E9ECEF;
    background-color:#2A333C;
}

@media (min-width: 768px){
    #states{
        flex-direction: row;
    }
    #states a{
        background-color: #E9ECEF;
        padding: .5rem .5rem;
        display: block;
        margin: 0.5rem;
        /*width: 9rem;*/
    }
    #states a span {
        margin: auto;
    }

}


/* -------------- FOOTER --------------- */
.top-btn {
    width: auto;
    height: 35px;
    margin: 5rem auto 50px auto;
    display: block;
    text-align: center;

}

.top-btn a {
    width: 75vw;
    height: 60px;
    margin: auto;
    display: block;
    text-align: center;
}

.top-btn span {
    display: block;
}

.top-btn svg {
    fill: none;
    stroke: #FFFFFF;
}

/*the anchor*/
#top {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

/*--------- new Modern 2019 Footer  -------*/

#footermodern{
    width: 100%;
}

#footermodern{
    margin-top: 3rem;
}

body#home #footermodern {
    position: absolute;
    top: 100vh;
    margin-top: 0;
}

#footermodern .top-bar{background-color: #414B56; padding: 2rem 1rem;}

#footermodern .container{
    display: flex;
    flex-direction: column;
    margin: auto;
    width: 100%;
    max-width: 1200px;
}
#footermodern .container .column{
    width: 100%;
}

#footermodern .container .column h2, #footermodern .container .column h2 a{
    margin-top: 2rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    padding: 0;
}
#footermodern .container .column h4 {
    padding: 0;
    margin: 0.4em 0;
    color: #fff;
    font-size: .9rem;
    line-height: 1.2rem;
    letter-spacing: 0;
    text-decoration: none;
    word-wrap: break-word;
    font-weight: 400;
}

#footermodern .container .column h4:hover{
    color: #0069af;
}
#footermodern .container p,
#footermodern .container .column p{
    color: #fff;
    font-size: 0.9rem;
}

#footermodern .container .column ul {
    list-style-type: none;
    padding: 0;
    color: #fff;
    font-size: inherit;
}
#footermodern .container .column ul.list{
    margin: auto;
}

#footermodern .container .column li {
    padding: 0;
    margin: 0.2em 0;
    font-size: 0.9rem;
    color: #fff;
}

#footermodern .container a,
#footermodern .container .column a {
    font-size: 0.8rem;
    font-weight: 300;
    margin: 0;
    color: inherit;
    color: #fff;
    text-decoration: none;
}

#footermodern .container .column a:hover{
    color: #0072BC;
}

#footermodern .container .column .contact-wrapper{
    margin: auto;
}

/* first column ---- */

#footermodern .logo{
    position: relative;
    z-index: 100;
    padding: 0;
    width: 100%;
    max-width: 235px;
    height: auto;
    margin-bottom: 1rem;
    /* width: 100%; */
    /* max-width: 20%; */
}

/* ------ Second column ---- */

#footermodern .column.schools{
    display: flex;
}

#footermodern .column.schools .contact-wrapper{
    margin: 0 auto 0 0;
}

/* ----- footer Bootom Bar ----- */

#footermodern .bottom-bar{
    background-color: #2A333C;
    padding: 2rem 0;
    color: #fff;

    flex-direction: column;

}

#footermodern .bottom-bar .column1{
    width: 100%;
    order: 2;
}
#footermodern .bottom-bar .column2{
    width: 100%;
    order: 1;
}




@media (min-width: 768px){
    #footermodern .top-bar{padding: 2rem 0;}
    #footermodern .container{flex-direction: row;}
    #footermodern .container .column{
        width: calc(25% - 2rem);
        padding: 0 1rem;
    }
    #footermodern .container .column h2, #footermodern .container .column h2 a{margin-top: 0;}
    #footermodern .column.schools .contact-wrapper{margin: 0 auto;}

    #footermodern .container .column.column-wide{
        width: calc(50% - 2rem);
        padding: 0 1rem;
    }

    #footermodern .bottom-bar{
        background-color: #2A333C;
        padding: 2rem 0;
        color: #fff;

        flex-direction: row;

    }

    #footermodern .bottom-bar .column1{
        width: 75%;
        order: 1;
    }
    #footermodern .bottom-bar .column2{
        width: 25%;
        order: 2;
    }

}


/* ==========================================================================
                                Helper classes
========================================================================== */
/*
 * Hide visually and from screen readers
 */
.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
    visibility: hidden;
}

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

.clearfix:after {
    clear: both;
}

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


/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        /* Black prints faster:
                                          http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */
    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
        border-style: none

    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ============================================================== CSS page transition ANIMATION ==================================================================*/
/* --------------------------------

#transition-container Components

-------------------------------- */
body::after, body::before {
    /* these are the 2 half blocks which cover the content once the animation is triggered */
    content: '';
    height: 50vh;
    width: 100%;
    position: fixed;
    left: 0;
    background-color: #ffffff;
    z-index: 701;
    /* Force Hardware Acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: -webkit-transform 0.4s 0.4s;
    -moz-transition: -moz-transform 0.4s 0.4s;
    transition: transform 0.4s 0.4s;
}

body::before {
    top: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}

body::after {
    bottom: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
}

body.page-is-changing::after, body.page-is-changing::before {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}

/*RH main {
  height: 100vh;
  padding: 10px;
  text-align: center;
}*/
#transition-container .cd-main-content {
    position: relative;
    height: calc(100vh - 20px);
}

#transition-container .cd-main-content > div {
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#transition-container .cd-main-content::after, main .cd-main-content::before {
    /* these are the 2 gradient overlay at the top and bottom of the .cd-main-content - to indicate that you can scroll */
    content: '';
    position: absolute;
    left: 0;
    height: 50px;
    width: 100%;
}

#transition-container .cd-main-content::before {
    top: 0;
}

#transition-container .cd-main-content::after {
    bottom: 0;
}

#transition-container .cd-main-content.cd-index {
    /* .cd-main-content basic style - index page */
    /*RHbackground-color: #2A333C;*/
    /* vertically center its content */
    display: table;
    width: 100%;
}

#transition-container .cd-main-content.cd-index > div {
    /* vertically center the content inside the .cd-index */
    display: table-cell;
    vertical-align: middle;
}

/* this is the bottom gradient thing - its U-G-L-Y
#transition-container .cd-main-content.cd-index::after {
  background-color: rgba(64, 137, 166, 0);
  background-image: -webkit-linear-gradient(bottom, #2A333C, rgba(64, 137, 166, 0));
  background-image: linear-gradient(to top,#2A333C, rgba(64, 137, 166, 0));
}
#transition-container .cd-main-content.cd-index::before {
  background-color: rgba(64, 137, 166, 0);
  background-image: -webkit-linear-gradient(top, #2A333C, rgba(64, 137, 166, 0));
  background-image: linear-gradient(to bottom,#2A333C, rgba(64, 137, 166, 0));
}
*/
/*RH
#transition-container .cd-main-content.cd-about {
  background-color: #283040;
}
#transition-container .cd-main-content.cd-about > div {
  padding-top: 50px;
}
*/
/*
#transition-container .cd-main-content.cd-about::after {
  background-color: rgba(40, 48, 64, 0);
  background-image: -webkit-linear-gradient(bottom, #283040, rgba(40, 48, 64, 0));
  background-image: linear-gradient(to top,#283040, rgba(40, 48, 64, 0));
}
#transition-container .cd-main-content.cd-about::before {
  background-color: rgba(40, 48, 64, 0);
  background-image: -webkit-linear-gradient(top, #283040, rgba(40, 48, 64, 0));
  background-image: linear-gradient(to bottom,#283040, rgba(40, 48, 64, 0));
}
/*RH main p {
  width: 90%;
  max-width: 768px;
  margin: 3em auto;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #535966;
  text-align: left;
}*/
/*RH @media only screen and (min-width: 768px) {
  main {
    padding: 20px;
  }
  main .cd-main-content {
    height: calc(100vh - 40px);
  }
  main.cd-index > div {
    padding-top: 200px;
  }
  main.cd-index > div {
    padding-top: 50px;
  }
  main p {
    font-size: 1.8rem;
    line-height: 2;
  }
}*/
.cd-cover-layer {
    /* layer that covers the content when the animation is triggered */
    position: fixed;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.4s 0.4s, visibility 0s 0.8s;
    -moz-transition: opacity 0.4s 0.4s, visibility 0s 0.8s;
    transition: opacity 0.4s 0.4s, visibility 0s 0.8s;
}

.cd-about .cd-cover-layer {
    /*background-color: #283040;*/
}

.page-is-changing .cd-cover-layer {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
    transition: opacity 0.3s 0s, visibility 0s 0s;
}

@media only screen and (min-width: 768px) {
    .cd-cover-layer {
        height: calc(100% - 40px);
        width: calc(100% - 40px);
    }
}

.cd-loading-bar {
    /* this is the loding bar - visible while switching from one page to the following one */
    position: fixed;
    z-index: 702;
    left: 50%;
    top: 50%;
    height: 2px;
    width: 90%;
    background-color: #2A333C;
    visibility: hidden;
    -webkit-transition: visibility 0s 0.4s, -webkit-transform 0.4s 0s ease-in;
    -moz-transition: visibility 0s 0.4s, -moz-transform 0.4s 0s ease-in;
    transition: visibility 0s 0.4s, transform 0.4s 0s ease-in;
    /* Force Hardware Acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.cd-about .cd-loading-bar, .cd-schools .cd-loading-bar, .cd-careers .cd-loading-bar {
    background-color: #283040;
}

/*RH .cd-about .cd-loading-bar::before {
  background-color: #2A333C;
}*/
.cd-loading-bar::before {
    /* this is the progress bar inside the loading bar */
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #0069AF;
    /* Force Hardware Acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

.page-is-changing .cd-loading-bar {
    visibility: visible;
    -webkit-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    -moz-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    -ms-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    -o-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    -webkit-transition: visibility 0s 0.3s, -webkit-transform 0.4s 0.4s;
    -moz-transition: visibility 0s 0.3s, -moz-transform 0.4s 0.4s;
    transition: visibility 0s 0.3s, transform 0.4s 0.4s;
}

.page-is-changing .cd-loading-bar::before {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition: -webkit-transform 0.8s 0.8s ease-in;
    -moz-transition: -moz-transform 0.8s 0.8s ease-in;
    transition: transform 0.8s 0.8s ease-in;
}

@media only screen and (min-width: 768px) {
    .cd-loading-bar {
        width: calc(100% - 40px);
    }
}

/*---------------------------------- Vision Mission Values  ABOUT PAGE
--------------------------------------*/

main#about {
    width: 100%;
    max-width: unset;
}

#about li {
    color: #646e78;
}

#about h1 {
    color: #2a333c;
    font-weight: 500;
    text-align: left;
    margin-top: .6rem;
    margin-bottom: 1.9rem;
}

@media (min-width: 768px) {
    #about h1, #about .h1 {
        line-height: 2.1rem;
        font-size: 1.6rem;
    }
}

/* --------  OUTER and INNER CONTAINER --------- */
/** -------- OUTER CONTAINER --------- **/


.outer-container, .inner-container {
    width: calc(100% - 2rem);
    padding-right: 1rem;
    padding-left: 1rem;
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 379px) {
    /*.outer-container, .inner-container {*/
    /*    width: 100%;*/
    /*}*/
}

@media (min-width: 576px) {
    .outer-container {
        max-width: 600px;
    }
}

@media (min-width: 768px) {
    .outer-container {
        max-width: 800px;
    }
}

@media (min-width: 992px) {
    .outer-container {
        max-width: 1000px;
    }
}

@media (min-width: 1200px) {
    .outer-container {
        max-width: 1136px
    }

    .inner-container {
        max-width: 1000px;
    }
}

@media (min-width: 1600px) {
    .outer-container {
        max-width: 1400px
    }

    .inner-container {
        max-width: 1150px;
    }
}

.container-fluid {
    width: calc(100% - 4rem);
    padding-right: 2rem;
    padding-left: 2rem;
    margin-right: auto;
    margin-left: auto;
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -1rem;
    margin-left: -1rem;
}


#vmv {
    font-size: 1.2rem;
}

#vmv section {
    padding-bottom: 0;
    padding-top: 0;
}

.vmv-bkg {
    position: relative;
    height: 25rem;
    width: 100%;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: -1;
}


#vmv .vmv-bkg {
    background-image: url(https://www.acc.edu.au/img/content-images/vmv/vmv-header-576.jpg);
}

@media (min-width: 576px) {
    #vmv .vmv-bkg {
        height: 51vh;
        background-image: url(https://www.acc.edu.au/img/content-images/vmv/vmv-header-768.jpg);
    }
}

@media (min-width: 768px) {
    #vmv .vmv-bkg {
        background-image: url(https://www.acc.edu.au/img/content-images/vmv/vmv-header-992.jpg);
        height: 41rem;
    }
}

@media (min-width: 992px) {
    #vmv .vmv-bkg {
        background-image: url(https://www.acc.edu.au/img/content-images/vmv/vmv-header-1200.jpg);
        height: 44rem;
    }
}

@media (min-width: 1200px) {
    #vmv .vmv-bkg {
        background-image: url(https://www.acc.edu.au/img/content-images/vmv/vmv-header-1600.jpg);
        height: 54rem;
    }
}

@media (min-width: 1600px) {
    #vmv .vmv-bkg {
        background-image: url(https://www.acc.edu.au/img/content-images/vmv/vmv-header-2000.jpg);
        height: 43rem;
    }
}

#vmv .intro {
    margin-top: 2rem;
}

#vmv .intro p {
    margin-bottom: 2rem;
    font-size: 1.2rem;
    color: #646e78;
}

/*------------ AUS map tabs ------------*/
#map{
    background-color:#fff;
    padding:1rem;
    position: relative;
}
/*------------ vmv tabs ------------*/


.tabs {
    width: 100%;
    height: auto;
    background-color: #fff;

    display: flex;
    flex-direction: column;
}

.tabs .tab {
    flex-grow: 1;
    display: flex;
    padding: 2rem;
    text-align: center;
    background-color: #d8e8f4;
}


@media (max-width: 576px) {
    .tabs svg {
        height: 55px;
    }
}

@media (min-width: 576px) {

    #vmv .intro {
        margin-top: -17rem;
    }

    #vmv .intro p {
        color: #fff;
    }

    .tabs {
        display: flex;
        flex-direction: row;
    }

    .tabs .tab {
        flex-direction: column;
        flex-grow: 1;
        margin-right: 1px;
        padding: 2rem;
        text-align: center;
        height: 9rem;
        line-height: 5rem;
        background-color: #d8e8f4;
    }
}

@media (min-width: 768px) {
    #vmv .intro {
        margin-top: -16rem;
    }
}

@media (min-width: 996px) {
    #vmv .intro {
        margin-top: -14rem;
    }
}

@media (min-width: 1200px) {
    #vmv .intro {
        margin-top: -14rem;
    }
}

.tabs .tab.values {
    margin-right: 0;
}

.tabs .tab:hover, .tabs .tab.active {
    background-color: #0069B4;
}

/*tab icons*/
#vision .tabs .icon {
    width: 75px;
    height: 60px;
    margin: auto;
    display: block;
    margin-bottom: 2rem;
}

/*insert the artwork into the tab icon*/
#vision .tab .tabs .icon.vision {
    background-image: url(img/template-images/icons/icon-vision.svg);
}

#vision .tab .tabs .icon.mission {
    background-image: url(img/template-images/icons/icon-mission.svg);
}

#vision .tab .tabs .icon.values {
    background-image: url(img/template-images/icons/icon-values.svg);
}

/* ------ when hoering over a tab replace the icon with the animating version of that icon ------ */
#vision .tabs .tab:hover .icon.vision {
    background-image: url(img/template-images/icons/icon-vision-animate.svg);
}

#vision .tabs .tab:hover .icon.mission {
    background-image: url(img/template-images/icons/icon-mission-animate.svg);
}

#vision .tabs .tab:hover .icon.values {
    background-image: url(img/template-images/icons/icon-values-animate.svg);
}

.tabs .tab .title {
    width: 100%;
    display: block;
    margin-top: 1rem;

    font-size: 1.5rem;
    line-height: 1rem;
    font-weight: 500;
    text-align: center;
    color: #fff;

}

/*tab panels*/
.vmv-panels {
    position: relative;
    height: 27rem;
}

.vmv-panels p {
    font-size: 1.2rem;
}

.vmv-panels .tab-panel {
    display: block;
    position: absolute;
    height: 0;
    overflow: hidden;
    padding: 0 2rem;
    background-color: #fff;
    border-bottom: 2px solid #0069B4;

    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    -ms-transition: all 100ms ease-in;
    -o-transition: all 100ms ease-in;
    transition: all 100ms ease-in;

}

.vmv-panels .tab-panel.active {
    height: 27rem;
    border-bottom: 0px solid #0069B4;

    -webkit-transition: all 1s 150ms ease-out;
    -moz-transition: all 1s 150ms ease-out;
    -ms-transition: all 1s 150ms ease-out;
    -o-transition: all 1s 150ms ease-out;
    transition: all 1s 150ms ease-out;
}

@media (min-width: 576px) {
    .vmv-panels {
        height: 27rem;
    }

    .vmv-panels .tab-panel {
        width: calc(100% - 4rem);
        padding: 0 2rem;
    }

    .vmv-panels .tab-panel.active {
        height: 27rem;
    }
}


@media (min-width: 768px) {
    .vmv-panels {
        height: 20rem;
    }

    .vmv-panels .tab-panel.active {
        height: 20rem;
    }
}

.tab-panel h1 {
    margin-top: 2rem;
}

#values p {margin: 3px 3px 3px;}

#values p strong {
    width: 1rem;
    margin-right: 1rem;
    text-align: center;
    float: left;
    display: block;
}

/* ------ statement of faith contnet -------- */
#student-attributes, #statement-faith {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

#statement-faith li {
    margin-bottom: 1rem;
}

/* ------- student attributes ------- */
#student-attributes h2 {
    font-size: .9rem;
    letter-spacing: .03rem;
    font-weight: 500;
    margin: 1rem 0 0 0;
    padding: 2rem 0;
    color: #646e78;
    border-top: solid 3px #0069B4;

}

/*---------- character development page ------------------*/

#attributes {
    margin-top: 4rem;
}

#attributes .card {
    width: calc(100% - 2rem);
    margin: 1rem 1rem 1rem 1rem;
    padding: 0;
    text-align: center;
}

#attributes img {
    width: 100%;
}

#attributes .card .text-block {
    padding: 2rem;
}

#attributes .card h2 {
    color: #fff;
}

#attributes .card h2 {
    width: 100%;
    margin: 0 auto 1rem auto;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 3px;
    /* border-radius: 5px; */
}


#attributes .card p {
    color: #fff;
}

#attributes .card p {
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.8rem;
}


#attributes .card p.small {
    text-transform: uppercase;
    font-weight: 400;
    font-size: .7rem;
    letter-spacing: .15rem;
    margin-top: 2rem;
}

@media only screen and (min-width: 768px) {
    #attributes .card {
        width: calc(50% - 2rem);
    }

    #attributes .card h2 {
        font-size: 1.6rem;
    }
}

/* -------------- ebook thankyou ---------- */

main.ebook-confirmation-wrapper, main.form-confirmation-wrapper {
    width: 100%;
    max-width: unset;
}


#ebook-confirmation {
    font-size: 1.2rem;
}

#ebook-confirmation section {
    padding-bottom: 0;
    padding-top: 0;
}

.ebook-confirmation-bkg {
    position: relative;
    height: 25rem;
    width: 100%;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: -1;
}

#ebook-confirmation .btn{
    outline: 0;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-radius: .25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    box-sizing: border-box;
    padding: 1.3rem 3rem;
    color: #fff;
    font-family: montserrat,sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    overflow: hidden;
    cursor: pointer;
    background-color: #0069b4;
}


#ebook-confirmation .ebook-confirmation-bkg {
    background-image: url(https://www.acc.edu.au/img/content-images/ebook-thankyou/student-celebrating-576.jpg);
}

@media (min-width: 576px) {
    #ebook-confirmation .ebook-confirmation-bkg {
        height: 51vh;
        background-image: url(https://www.acc.edu.au/img/content-images/ebook-thankyou/student-celebrating-768.jpg);
    }
}

@media (min-width: 768px) {
    #ebook-confirmation .ebook-confirmation-bkg {
        background-image: url(https://www.acc.edu.au/img/content-images/ebook-thankyou/student-celebrating-992.jpg);
        height: 41rem;
    }
}

@media (min-width: 992px) {
    #ebook-confirmation .ebook-confirmation-bkg {
        background-image: url(https://www.acc.edu.au/img/content-images/ebook-thankyou/student-celebrating-1200.jpg);
        height: 44rem;
    }
}

@media (min-width: 1200px) {
    #ebook-confirmation .ebook-confirmation-bkg {
        background-image: url(https://www.acc.edu.au/img/content-images/ebook-thankyou/student-celebrating-2000.jpg);
        height: 54rem;
    }
}

@media (min-width: 1600px) {
    #ebook-confirmation .ebook-confirmation-bkg {
        background-image: url(https://www.acc.edu.au/img/content-images/ebook-thankyou/student-celebrating-3000.jpg);
        height: 43rem;
    }
}

/* --------------------- student videos ------------------*/
section#staff-videos {
    padding-top: 1rem;
}
#staff-videos .video-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#staff-videos .video-grid .video {
    width: calc(100% - 2rem);
    margin: 1rem auto;
}

#staff-videos .video-grid .video p {
    margin-top: .5rem;
}

@media only screen and (min-width: 768px) {
    #staff-videos .video-grid .video {
        width: calc(50% - 2rem);
    }
}