/* COLOURS */

:root {
    --black: #000000;
    --white: #FFFFFF;
    --deloitteGreen: #86BC25;
    --manatee: #98999B;
    --coolGray11: #53565A;
    --darkGray: #202020;
    --lightGray2: #E6E6E6;
    --orange: #ED8B00;
    --gold: #FFCD00;
    --green: #009A44;
}

.darkGrayBackground {
    background-color: var(--darkGray);
}

.deloitteGreenBackground {
    background-color: var(--deloitteGreen);
}

.orangeBackground {
    background-color: var(--orange);
}

/* BLACK BG */

.blackBG {
    background-color: var(--black);
    color: var(--white);
}

/* WHITE BG */

.whiteBG {
    background-color: var(--white);
    color: var(--black);
}

/* RECTANGLES */

.textOval {
    color: var(--black);
}

.whiteBG .chooseDeloitte {
    border: 1px solid var(--coolGray11);
}

.blackBG .chooseDeloitte {
    border: 1px solid var(--manatee);
}

.chooseDeloitte:hover {
    color: var(--black) !important;
    background-color: var(--deloitteGreen);
    border: 1px solid var(--deloitteGreen);
}

/* ICONS */

.tick:before {
    color: var(--deloitteGreen);
}

.filledCircleTick:before {
    background: var(--deloitteGreen);
    color: var(--white);
}

.stars {
    color: var(--gold);
}

/* PAGE SPECIFICS */

/* NAV */

.blackBG>nav {
    background-color: var(--black);
}

.blackBG>nav #logo {
    fill: var(--white);
}

.blackBG>nav ul.navbar-menu>li>a {
    color: var(--manatee);
}

.blackBG>nav ul.navbar-menu>li>a:hover {
    color: var(--white);
}

.whiteBG>nav {
    background-color: var(--white);
}

.whiteBG>nav #logo {
    fill: var(--black);
}

.whiteBG>nav ul.navbar-menu>li>a {
    color: var(--coolGray11);
}

.whiteBG>nav ul.navbar-menu>li>a:hover {
    color: var(--black);
}

/* LITTLE LESS TAXING */

#littleLessTaxing .LHS a:hover {
    color: var(--white);
}

#littleLessTaxing .LHS a:after {
    background-color: var(--deloitteGreen);
}

#littleLessTaxing .LHS a, #littleLessTaxing .RHS>section {
    color: var(--coolGray11);
}

.blackBG #littleLessTaxing .LHS a.active, .blackBG #littleLessTaxing .RHS>section.active {
    color: var(--white);
}

.whiteBG #littleLessTaxing .LHS a.active, .whiteBG #littleLessTaxing .RHS>section.active {
    color: var(--black);
}

#littleLessTaxing .RHS img {
    color: var(--green);
}

/* WHY DELOTTE */

#whyDeloitte .sliderProgressContainer {
    background-color: var(--lightGray2);
}

#whyDeloitte .sliderProgressContainer>#sliderProgress {
    background-color: var(--green);
}

#whyDeloitte .flickity-button {
    background: transparent;
}

.whiteBG #whyDeloitte .flickity-button {
    color: var(--black);
}

.whiteBG #whyDeloitte .flickity-button:disabled {
    color: var(--lightGray2);
}

.blackBG #whyDeloitte .flickity-button {
    color: var(--white);
}

.blackBG #whyDeloitte .flickity-button:disabled {
    color: var(--coolGray11);
}

/* FAQS */

.whiteBG #faqs .accordionItem {
    border-color: var(--lightGray2);
}

.whiteBG #faqs .accordionQuestion:hover, .whiteBG #faqs .accordionQuestion:hover:after {
    color: var(--green);
}

.whiteBG #faqs .accordionItem[data-expanded='false']>* {
    color: var(--manatee);
}

.whiteBG #faqs .accordionQuestion:hover, .whiteBG #faqs .accordionQuestion:hover:after {
    color: var(--green);
}

.blackBG #faqs .accordionItem {
    border-color: var(--coolGray11);
}

.blackBG #faqs .accordionItem[data-expanded='false']>* {
    color: var(--coolGray11);
}

/* MAKE A MOVE */

#makeAMove .LHS>img {
    color: var(--orange);
}

#makeAMove .RHS>a {
    background-color: var(--white);
    color: var(--black);
}

#makeAMove .RHS>a:hover {
    background-color: var(--deloitteGreen);
}

#makeAMove #disclaimer {
    color: var(--manatee);
}