/*.mm-menu * { 
    font-size: 14px;
    border: 10px solid red;
}*/


:root { 
	--baby-blossom: #FCC4C6;
	--blue-zing: #266CF0;
	--blue-zing-yellow: #FFDF3C;
	--classy-navy: #003666;
	--dreamy-lilac: #C7B1F2;
	--earthy-beige: #CCC1B0;
	--garden-fresh: #15AD90;
	--golden-glow: #F9BD3A;
	--happy-heart: #EA3453;
	--sky-bliss: #98D4D8;
	--soft-sand: #FAF2EB;
	--sunny-orange: #FF7716;
    --nav-adjustment: 127px;
	} 

* { 
	box-sizing: border-box;
	} 

body { 
	margin: 0;
	font-family: 'Quicksand';
    font-size: 13pt;
    line-height: 1.4;
    color: #003666;
    border-top: var(--nav-adjustment) solid var(--soft-sand);
    }

h1, h2, h3 { 
	font-family: 'Cat Comic';
    line-height: 1;
    }

h4, h5, h6, h7 {
    display: block;
    font-family: 'Quicksand';
    font-weight: 700;
    line-height: 1.2;
    }

h1 { font-size: 48pt; }
h2 { font-size: 42pt; }
h3 { font-size: 36pt; }
h4 { font-size: 30pt; }
h5 { font-size: 24pt; }
h6 { font-size: 20pt; }

@media (max-width: 640px) {
    h1 { font-size: 36pt; }
    h2 { font-size: 30pt; }
    h3 { font-size: 24pt; }
    h4 { font-size: 24pt; }
}

.text-subtitle1 { font-size: 16pt; font-weight: 700; }
.text-subtitle2 { font-size: 14pt; font-weight: 700; }
.text-body1 { font-size: 24pt; }
.text-body2 { font-size: 16pt; }
.text-caption { font-size: 12pt; }
.text-overline { font-size: 10pt; }

ul, ol { padding-left: 1.5em; }

.hidden { display: none!important; }

.text-center { text-align: center; }

.image-desktop { display: block; }
.image-mobile { display: none; }

@media (max-width: 960px) {
	.image-desktop { display: none; }
	.image-mobile { display: block; }
	}

.text-center .website-button { margin: 0 auto; }
.website-button {
	/*display: flex;*/ /* only way to make an inline-flex item centerable is flex with fit-content */
	/*width: fit-content;*/
    display: inline-flex;
	font-weight: bold;
	padding: 10px 30px;
	text-decoration: none;
	border-radius: 100px;
	background-color: var(--classy-navy);
	align-items: center;
    justify-content: center;
	text-align: center;
    --website-button-color: white;
    color: var(--website-button-color);

    /*transition: transform 0.2s ease;
    transform-origin: center center;*/
	}

    .website-button.website-button--outline { background-color: transparent; padding: 8px 28px; border: 2px solid var(--classy-navy); color: var(--classy-navy); }
    .website-button.bgcolor-golden-glow { --website-button-color: var(--classy-navy); }
    .website-button.bgcolor-blue-zing-yellow { color: var(--classy-navy); }

    .website-button:hover,
    .website-button:focus {
        color: var(--website-button-color) !important; /*transform: scale(1.02);*/
    }

	.bgcolor-classy-navy .website-button { background-color: var(--golden-glow); color: var(--classy-navy); }

.website-frame {
	background-color: white;
	border: 10px solid var(--earthy-beige);
	border-radius: 30px;
	overflow: hidden;
	padding: 20px;
	margin-block-start: 1em;
	margin-block-end: 1em;
	}

.website-spacer {
    padding: 75px 20px;
    }

.website-container {
	max-width: 1140px;
	min-height: 1em;
	margin: 0 auto;
	/* margin-block-start: 1em;
	margin-block-end: 1em; */
	}

.bgcolor-white { background-color: white; }
.bgcolor-baby-blossom { background-color: var(--baby-blossom); }
.bgcolor-blue-zing { background-color: var(--blue-zing); }
.bgcolor-blue-zing-yellow { background-color: var(--blue-zing-yellow); }
.bgcolor-classy-navy { background-color: var(--classy-navy); }
.bgcolor-dreamy-lilac { background-color: var(--dreamy-lilac); }
.bgcolor-earthy-beige { background-color: var(--earthy-beige); }
.bgcolor-garden-fresh { background-color: var(--garden-fresh); }
.bgcolor-golden-glow { background-color: var(--golden-glow); } 
.bgcolor-happy-heart { background-color: var(--happy-heart); }
.bgcolor-sky-bliss { background-color: var(--sky-bliss); }
.bgcolor-soft-sand { background-color: var(--soft-sand); }
.bgcolor-sunny-orange { background-color: var(--sunny-orange); }

/*
    this makes card buttons text white. not sure what doesnt work not that ive commented it out
    .website-colour-card[class*="bgcolor-"]:not(.bgcolor-white) a,
.website-colour-card[class*="bgcolor-"]:not(.bgcolor-white) a:visited,
.website-colour-card[class*="bgcolor-"]:not(.bgcolor-white) a:hover {
    color: currentColor;
}*/

.fill-white { fill: white; }
.fill-baby-blossom { fill: var(--baby-blossom); }
.fill-classy-navy { fill: var(--classy-navy); }
.fill-dreamy-lilac { fill: var(--dreamy-lilac); }
.fill-blue-zing { fill: var(--blue-zing); }
.fill-earthy-beige { fill: var(--earthy-beige); }
.fill-garden-fresh { fill: var(--garden-fresh); }
.fill-golden-glow { fill: var(--golden-glow); } 
.fill-happy-heart { fill: var(--happy-heart); }
.fill-soft-sand { fill: var(--soft-sand); }
.fill-sky-bliss { fill: var(--sky-bliss); }
.fill-sunny-orange { fill: var(--sunny-orange); }

.color-white { color: white; }
.color-baby-blossom { color: var(--baby-blossom); }
.color-classy-navy { color: var(--classy-navy); }
.color-dreamy-lilac { color: var(--dreamy-lilac); }
.color-blue-zing { color: var(--blue-zing); }
.color-earthy-beige { color: var(--earthy-beige); }
.color-garden-fresh { color: var(--garden-fresh); }
.color-golden-glow { color: var(--golden-glow); }
.color-happy-heart { color: var(--happy-heart); }
.color-soft-sand { color: var(--soft-sand); }
.color-sky-bliss { color: var(--sky-bliss); }
.color-sunny-orange { color: var(--sunny-orange); }

.rotate-45 { transform: rotate(45deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-135 { transform: rotate(135deg); }
.rotate-180 { transform: rotate(180deg); }
.rotate-225 { transform: rotate(225deg); }
.rotate-270 { transform: rotate(270deg); }
.rotate-315 { transform: rotate(315deg); }
.flip-horizontal { transform: scaleX(-1); }
.flip-vertical { transform: scaleY(-1); }
.flip-both { transform: scale(-1, -1); }

/* .doodle { mask-size: contain; mask-repeat: no-repeat; mask-position: center; } */
.doodle { /*position: relative; this breaks all the doodle banners */ transition: transform 0.3s ease, color 0.3s ease; object-fit: contain; }
.doodle[class*="doodle--"]::before {
  content: '';
  position: absolute;
  inset: 0;
  /* z-index: -1; */
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: currentColor;
}

.doodle.doodle--apple::before          { mask-image: url('../images/doodles/apple.svg'); }
.doodle.doodle--arrow::before          { mask-image: url('../images/doodles/arrow.svg'); }
.doodle.doodle--atoms::before          { mask-image: url('../images/doodles/atoms.svg'); }
.doodle.doodle--books::before          { mask-image: url('../images/doodles/books.svg'); }
.doodle.doodle--bubbles::before        { mask-image: url('../images/doodles/bubbles.svg'); }
.doodle.doodle--chat::before           { mask-image: url('../images/doodles/chat.svg'); }
.doodle.doodle--chemistry::before      { mask-image: url('../images/doodles/chemistry.svg'); }
.doodle.doodle--chemistry-2::before    { mask-image: url('../images/doodles/chemistry-2.svg'); }
.doodle.doodle--chick::before          { mask-image: url('../images/doodles/chick.svg'); }
.doodle.doodle--clock::before          { mask-image: url('../images/doodles/clock.svg'); }
.doodle.doodle--cloud::before          { mask-image: url('../images/doodles/cloud.svg'); }
.doodle.doodle--compass::before        { mask-image: url('../images/doodles/compass.svg'); }
.doodle.doodle--creativity::before     { mask-image: url('../images/doodles/creativity.svg'); }
.doodle.doodle--dna::before            { mask-image: url('../images/doodles/dna.svg'); }
.doodle.doodle--duck-face::before      { mask-image: url('../images/doodles/duck-face.svg'); }
.doodle.doodle--education::before      { mask-image: url('../images/doodles/education.svg'); }
.doodle.doodle--fine-motor-skills::before       { mask-image: url('../images/doodles/fine-motor-skills.svg'); }
.doodle.doodle--fine-motor-skills-2::before     { mask-image: url('../images/doodles/fine-motor-skills-2.svg'); }
.doodle.doodle--flower::before         { mask-image: url('../images/doodles/flower.svg'); }
.doodle.doodle--flower-2::before       { mask-image: url('../images/doodles/flower-2.svg'); }
.doodle.doodle--games::before          { mask-image: url('../images/doodles/games.svg'); }
.doodle.doodle--hand::before           { mask-image: url('../images/doodles/hand.svg'); }
.doodle.doodle--hand-smile::before     { mask-image: url('../images/doodles/hand-smile.svg'); }
.doodle.doodle--hearing::before        { mask-image: url('../images/doodles/hearing.svg'); }
.doodle.doodle--highlight::before      { mask-image: url('../images/doodles/highlight.svg'); }
.doodle.doodle--house::before          { mask-image: url('../images/doodles/house.svg'); }
.doodle.doodle--imagination::before    { mask-image: url('../images/doodles/imagination.svg'); }
.doodle.doodle--kid-face::before       { mask-image: url('../images/doodles/kid-face.svg'); }
.doodle.doodle--kid-face-2::before     { mask-image: url('../images/doodles/kid-face-2.svg'); }
.doodle.doodle--light::before          { mask-image: url('../images/doodles/light.svg'); }
.doodle.doodle--logical-thinking::before { mask-image: url('../images/doodles/logical-thinking.svg'); }
.doodle.doodle--measuring-scale::before { mask-image: url('../images/doodles/measuring-scale.svg'); }
.doodle.doodle--memory::before         { mask-image: url('../images/doodles/memory.svg'); }
.doodle.doodle--microscope::before     { mask-image: url('../images/doodles/microscope.svg'); }
.doodle.doodle--painting::before       { mask-image: url('../images/doodles/painting.svg'); }
.doodle.doodle--picture-frame::before  { mask-image: url('../images/doodles/picture-frame.svg'); }
.doodle.doodle--rainbow::before        { mask-image: url('../images/doodles/rainbow.svg'); }
.doodle.doodle--rocket::before         { mask-image: url('../images/doodles/rocket.svg'); }
.doodle.doodle--sharpener::before      { mask-image: url('../images/doodles/sharpener.svg'); }
.doodle.doodle--speak::before          { mask-image: url('../images/doodles/speak.svg'); }
.doodle.doodle--speech-bubble::before  { mask-image: url('../images/doodles/speech-bubble.svg'); }
.doodle.doodle--speech-bubble-2::before { mask-image: url('../images/doodles/speech-bubble-2.svg'); }
.doodle.doodle--star::before           { mask-image: url('../images/doodles/star.svg'); }
.doodle.doodle--strawberry::before     { mask-image: url('../images/doodles/strawberry.svg'); }
.doodle.doodle--target::before         { mask-image: url('../images/doodles/target.svg'); }
.doodle.doodle--tree::before           { mask-image: url('../images/doodles/tree.svg'); }
.doodle.doodle--trophy::before         { mask-image: url('../images/doodles/trophy.svg'); }
.doodle.doodle--visual-perception::before { mask-image: url('../images/doodles/visual-perception.svg'); }

.website-white-input {
    border: none;
    border-radius: var(--border-radius);
    padding: 10px 20px;
}
select.website-white-input {
    padding-right: 40px;
    background-position: calc(100% - 18px);
}

/* ======================================================================================================================================================================================================================== */
.top-notice {
    background-color: var(--secondary-color);
    padding: 10px 15px;
    color: white;
    text-align: center;
    line-height: 1.2;
}

    .top-notice a,
    .top-notice a:visited, 
    .top-notice a:hover {
        color: inherit!important;
        text-decoration: underline;
        }

    @media (max-width: 759px) {
        .top-notice { padding: 5px 10px; font-size: 0.9rem; }
    }

.top-bar {
    display: flex;
    background-color: white;
    padding: 5px 10px;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    }

    .top-bar .button { background-color: silver; border-radius: 5px; font-size: inherit; border: none!important; }
    .top-bar .button.button--black { background-color: black; }
    .top-bar .button.button--black:hover { background-color: #0F0F0F; }
    

    .top-bar i { font-size: 1.1rem; }

    /*.top-bar a,*/
    /*.top-bar a:visited,
    .top-bar a:hover, 
    .top-bar a:active {*/
        /*color: currentColor;*/
        /*text-decoration: none;
        }*/

    /*.top-bar a:hover { opacity: 0.8; }*/

    .top-bar > div {
        padding: 5px 7px;
        }

    
    @media (max-width: 640px) {
        .top-bar div { 
            /*padding: 5px 0 0 0;*/
            font-size: 0.85rem;
        }
    }


/* ======================================================================================================================================================================================================================== */
.website-footer {
	background-color: var(--classy-navy);
	padding: 80px 20px;
	color: white;
	font-size: 0.9rem;
}

.website-footer a:not([class]),
.website-footer a:not([class]):visited {
	color: currentColor;
	text-decoration: none;
}
.website-footer a:not([class]):hover { text-decoration: underline; opacity: 0.75; }

.website-footer-divider { background-color: #40688C; height: 1px; margin: 30px 0px; }

.website-footer__logo {  width: 120px; }
.website-footer .website-button.bgcolor-golden-glow { font-size: 11px; }

.website-footer__social-link,
.website-footer__social-link:visited,
.website-footer__social-link:hover {
	background-color: white;
	color: var(--classy-navy);
	display: inline-flex;
	width: 32px;
	height: 32px;
	border-radius: 32px;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 100%;
}
.website-footer__social-link:hover {  opacity: 0.75; }

@media (min-width: 640px) {
	.website-footer__logo { width: 175px; }
	.website-footer .website-button.bgcolor-golden-glow { font-size: 1rem }
}



/*
    Code below was the first attempt at cms before new layout build
    
    :root {
    --content-width: 1140px;
    --content-radius: 50px;
    --text-color: var(--color-navy);
    --color-cream: #FAF2EB;
    --color-red: #EA3453;
    --color-green: #15AD90;
    --color-blue: #266CF0;
    --color-orange: #FF7716;
    --color-yellow: #F9BD3A;
    --color-navy: #003666;
}

@font-face{
  font-family: "CatComic";
  src: url("../Fonts/CatComic.otf");
}

@font-face{
  font-family: "Quicksand";
  src: url("../Fonts/Quicksand_Dash.otf");
  font-weight: 100;
}

@font-face{
  font-family: "Quicksand";
  src: url("../Fonts/Quicksand_Light.otf");
  font-weight: 300;
}

@font-face{
  font-family: "Quicksand";
  src: url("../Fonts/Quicksand_Book.otf");
  font-weight: 500;
}

@font-face{
  font-family: "Quicksand";
  src: url("../Fonts/Quicksand_Bold.otf");
  font-weight: 700;
}

body { font-family: Quicksand; font-size: 25px; xletter-spacing: -1px; xline-height: 1.2; color: var(--text-color); }

h1 { font-family: CatComic; font-size: 100px; }
h2 { font-family: CatComic; font-size: 70px; }
h3, h4, h5, h6, h7 { font-family: Quicksand; font-weight: 500; font-size: 40px; }


.text-small {
    font-size: 18px; font-weight: 500; line-height: 30px;
    }

.button {
    background-color: #F9BD3A;
    color: var(--text-color); 
    border-radius: 100px;
    font-size: 20px;
    padding: 12px 40px;
    font-weight: bold;
    }
.button.button:hover,
.button.button:active {
    background-color: white;
    color: var(--text-color);
    }

.button.button--white { background-color: white; }
.button.button--white:hover,
.button.button--white:active {
    background-color: var(--text-color);
    color: white;
    }

.button.button--blue { background-color: var(--text-color); color: white; }
.button.button--blue:hover,
.button.button--blue:active {
    background-color: white;
    color: var(--text-color);
    }

.container { max-width: var(--content-width); margin: 0px auto; }
.container .container { max-width: calc(var(--content-width) - 240px); margin: 0px auto; }

.rounded { border-radius: var(--content-radius); }
.shadow { box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); }

.zone-cream { background-color: var(--color-cream); color: var(--text-color); }
.zone-red { background-color: var(--color-red); color: white; }
.zone-green { background-color: var(--color-green); color: white; }
.zone-blue { background-color: var(--color-blue); color: white; }
.zone-orange { background-color: var(--color-orange); color: white; }
.zone-yellow { background-color: var(--color-yellow); color: white; }
.zone-navy { background-color: var(--color-navy); color: white; }

.frame { border: 20px solid white; overflow: hidden; border-radius: var(--content-radius); }

iframe[src*=youtube],
.frame { border: 20px solid white; overflow: hidden; border-radius: var(--content-radius); }

.accordion {
    
    }

    .accordion__item {
        border-bottom: 1px solid #979797;
        padding: 10px;
        }

        .accordion__item__bar { 
            display: flex;
            gap: 20px;
            }

            .accordion__item__bar__text { flex-grow: 1; font-weight: bold; font-size: 20px; }
            .accordion__item__bar__state {  }

        .accordion__item__content {
            font-size: 18px;
            max-width: 85%;
            }

.ideal-bar {
    display: flex;
    background-color: var(--color-red);
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    }

    .ideal-bar i { font-size: 1.1rem; }

    .ideal-bar a,
    .ideal-bar a:visited,
    .ideal-bar a:hover, 
    .ideal-bar a:active {
        color: white;
        text-decoration: none;
        }

    .ideal-bar a:hover { color: #E4E9F0; }

    .ideal-bar div {
        padding: 5px 7px;
        }

    
    @media (max-width: 640px) {
        .ideal-bar div { 
            padding: 5px 0 0 0;
            font-size: 0.85rem;
        }
    }

.full-vh {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    }

    @media (max-width: 640px) {
        .full-vh {
            background-attachment: scroll;
            background-position: center top;
        }

        .full-vh.full-vh--homepage { background-size: contain; }
    }


.home-banner {
    border-radius: 10px;
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
    width: 60%;
    max-width: 800px;
    color: white;
    padding: 50px;
    margin: 0 0 0 40%;
}

    @media (max-width: 759px) {

    }*/

/* ======================================================================================================================================================================================================================== */

.cml__paging {
    background-color: var(--classy-navy);
    color: white;
    border-radius: 8px;
    padding: 12px 20px;
    margin-bottom: 10px;
    font-size: 11pt;
}

.cml__paging__summary {
    margin-bottom: 6px;
}

.cml__paging__links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

    .cml__paging__links a,
    .cml__paging__links a:visited {
        color: white;
        text-decoration: none;
        padding: 2px 6px;
    }

        .cml__paging__links a:hover {
            text-decoration: underline;
        }

    .cml__paging__links span.cml__paging__current {
        font-weight: 700;
        text-decoration: underline;
        padding: 2px 6px;
    }

    .cml__paging__links span.cml__paging__sep {
        padding: 0 2px;
    }