:root {
    --primary-color: #502D7f;
    --secondary-color: #bca8cb;
	--top-banner-bg-color: #AD00FE;
	--accent-color: #E4f6ff;
	--topic-menu-bg-color-hover: #F0F0F0;
	/* LINK COLORS */
	--primary-links-color-hover: #1d0431;
	--secondary-links-color-hover: #bca8cb;
	--footer-link-color: #c4c4c4;
    --footer-link-color-hover: #bca8cb;
	/* BUTTON COLORS - PRIMARY */
	--primary-button-color: #502D7f;
	--primary-button-color-hover: #301357;
	--primary-button-text-color: #FEFEFE;
	--primary-button-text-color-hover: #FEFEFE;
	--primary-button-border-color: #502D7f;
	--primary-button-border-color-hover: #502D7f;
	/* BUTTON COLORS - SECONDARY */
	--secondary-button-color: #E4F6FF;
    --secondary-button-color-hover: #001623;
	--secondary-button-text-color: #005E91;
	--secondary-button-text-color-hover: #FEFEFE;
	--secondary-button-border-color: #005E91;
	--secondary-button-border-color-hover: #005E91;
	/* NAVIGATION COLORS */
	--nav-bg-color: #502D7f;
	--nav-tab-color: #FEFEFE;
	--nav-tab-color-hover: #bca8cb;
	--nav-link-color: #502D7f;
    --nav-link-color-hover: #bca8cb;
	/* HEADING/BANNER BACKGROUND COLORS */
	--bg-color-1: #dfdfdf;
    --bg-color-2: #D48000;
    --bg-color-3: #bca8cb;
	/* HEADING/BANNER BACKGROUND COLORS WITH TRANSPARENCY */
	--rgba-color-1: rgb(6 147 178 / .5);
    --rgba-color-2: rgb(212 128 0 / .5);
    --rgba-color-3: rgb(145 197 0 / .5);
	/* FONT FAMILY */
	--font-family-heading: "Poppins", serif;
    --font-family-body: "Poppins", sans-serif;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-family-heading);
    font-weight: 500;
}

.home-block a > span {
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    color: #54347d;
}

.button:focus, .button:hover {
    background-color: #bca8cb;
    color: #202020;
}

.dropdown.menu > li.is-active > a {
    color: #bca8cb;
}

button.close-modal-button.button.primary {
    background: var(--primary-color);

}

.mega-menu a:hover {
    color: #250031;
}

footer a:hover, footer a:focus {
    color: #e7c6ff;
}

.compare-block {
    padding: 1.4em;
    border: 1px solid #c3c3c3;
    border-radius: var(--border-radius-lg);
    overflow: clip;
    position: relative;
    box-shadow: 0 13px 13px -12px rgb(0 0 0 / .5);
    background: #dfdfdf;
}

#top-banner {
    background-color: #bca8cb;
    color: #502d7f;
    font-size: var(--small-font-size);
    padding: .5rem;
}
/*
.book-option {
    background: #bca8cb;
    border-bottom: 2px solid #502d7f;
}*/

.book-option-label {
    background: #502d7f;
}

.slideshow img {
    aspect-ratio: inherit !important;
}

.book-option.option-e---book {
    border-bottom: 2px solid #cd6406;
    background: #efcba5;
}

.book-option.option-e---book .book-option-label {
    background: #cd6406;
}

.book-option.option-rental {
    border-bottom: 2px solid #ad0076;
    background: #efb7e3;
}

.book-option.option-rental .book-option-label {
    background: #ad0076;
}

.solo-image img {
    border-radius: 1em;
}

/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS for graduation_landing.asp
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

.alum-links-container {
    text-align: center;
    padding: 2em 1em 1em 1em;
    background: #ededed;
    border-radius: 1em;
}

.alum-links-container a.button.hollow {
    color: #502d7f;
    border: 1px solid #502d7f;
}

.alum-links-container a.button.hollow:hover {
    background: #bca8cb;
    color: #202020;
    border: 1px solid #bca8cb;
}

.grad-landing .card {
    border-radius: 1em;
}

.grad-landing .card-section {
    text-align: center;
    background: #bca8cb;
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS for customshop.asp
::::::::::::::::::::::::::::::::::::::::::::::::::::  */
body.custom-shop-page div#page {
    background:#9e89d4;
    padding: 0;
}

body.custom-shop-page div#content {
    max-width: 152ch;
}

.section-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    margin: 2em 1% 1.1em 1%;
    width: 98%;
}

.top-logo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 0.5em;
    padding: 0.7em 1.4em 0em 1.4em;
}

.intro-block {
    background: #d8d1f2;
    border-radius: 40px;
    padding: 2em;
    margin: 1em;
    color: #1F2022;
}

.intro-block h1,
.intro-block h2,
.intro-block h3,
.intro-block h4,
.intro-block h5 {
    color: #6a5194;
    font-family: 'Fredoka One', cursive;
}

.intro-block h1 {
    font-size: 3em;
}

.intro-block p,
.intro-block ul, 
.intro-block li {
    font-family: 'Questrial', sans-serif;
}

.one-third-first {
    order:1;
    flex-grow:1;
    flex-basis: 33%;
    margin-right: 10px;
}

.two-thirds-second {
    order:2;
    flex-grow:2;
    flex-basis: 66%;
}

.pic-grid {
    background: #d8d1f2;
    border-radius: 40px;
    padding: 2em;
    margin:1em;
    color: #1F2022;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.grid-item {
    flex-basis: 33%;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0px 16px 10px 16px;
}

.pic-row {
    width: 100%;
    background: #fff;
    padding: 2em;
    color: #1F2022;
    border-radius: 2em;
}

.vid-link {
    margin: 1em;
}

.quad-banners {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
    margin: 0 .7%;
}

.quad-banners a {
    flex-grow: 1;
    flex-basis: 180px;
    max-width: 100%;
    margin: 0 5px 5px 5px;
}
  
.quad-banners img {
    height: 100%;
    width: 100%;
}

.third-first,
.third-second,
.third-third {
    flex-grow: 1;
    /*flex-basis: 33%;
    min-width: 300px;*/
    margin: 2em;
}

.third-first {
    order: 1;
}

.third-second {
    order: 2;
    flex-basis: 20%;
}

.third-third {
    order: 3;
}

.questionsbrush-container,
.insta-tok-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.orderoptions-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}



/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR MEDIUM SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */
@media screen and (min-width: 40em) {
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 64em) {
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR X-LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 75em) {
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR XX-LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 90em) {
}