:root {
	--blue: #6AC1D2;
	--pacific: #15A3BF;
	--yellow: #ffff73;
	--orange: #D65D45;
	--purplish: #7474AB;
	--royal-purple: #7851a9;
	--dark-purple: #2E2867;
	/*--silver: #E4DFDA;*/
	--silver: #CCC2B8;
	--light-grey: #e6e6e6;
	--dark-grey: #6c6c6c;
}

/* Set defaults */
html, body, header, h1, h2, h3, h4, h6, h6, figure, p, span, fieldset, input, div, section, menu, a, ul, ol, li, table, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
}

html, body {
	width: 100%;
	height: 100%;
	background-color: #e9e3f5;
}

img, a img {
	border: none;
}

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	text-decoration: none;
}

p+p {
	margin-top: 1.5em;
}

/* Standard class definitions */

.hidden {
	display: none;
}

.offline {
	opacity: .5;
}

body {
	font: 18px "Raleway", Verdana, sans-serif;
	color: #444;
	line-height: 1.5em;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 10em auto 10em;
}

@media (max-width: 61.9rem) {
	body {
		grid-template-rows: 6em auto 10em;
	}
}

/* Font Styles */
h1, h2, h3 {
	/*font-family: "Parisienne", cursive;*/
	font-family: 'Charm', cursive;
	color: var(--royal-purple);
	text-shadow: 2px 1px var(--silver);
	padding: 0.5em 0;
	line-height: 1.2em;
}

h1 { font-size: 2.4em; }
h2 { font-size: 2.2em; }
h3 { font-size: 2em; }


header#mainHeader {
	display: flex;
	width: calc(100% - 4em);
	background-color: rgba(120,81,169,1);
	color: #FFF;
	padding: 0.5em 2em;
}

header#mainHeader figure.mainLogo {
	height: 9em;
}

header#mainHeader figure.mainLogo img {
	display: block;
	height: 100%;
}

/* Header Menu */

@media (max-width: 61.9rem) {
	
	header#mainHeader {
		padding: 0.5em;
		width: calc(100% - 1em);
	}
	
	header#mainHeader figure.mainLogo {
		flex: 0 0 calc(100% - 3em);
		height: 5em;
	}
	
	header#mainHeader div.header-button {
		flex: 0 0 3em;
		align-self: center;
	}

	header#mainHeader div.header-button input {
		width: 1.5em;
		height: 1em;
		display: block;
		border: none;
		background-color: transparent;
		font-family: "Font Awesome\ 5 Free";
		font-weight: 900;
		color: #FFF;
		cursor: pointer;
		font-size: 1.2em;
		outline: none;
	}
	
	header#mainHeader nav {
		display: none;
		position: absolute;
		left: -100vw;
		height: 100%;
		top: 6em;
		background-color: var(--purplish);
		width: 100%;
	}
	
	header#mainHeader nav ul {
		display: block;
		padding: 2em 1em;
		width: calc(100% - 2em);
	}
	
	header#mainHeader nav ul li {
		display: block;
		font-size: 1.2em;
		margin: 0.5em 0;
	}
	
	header#mainHeader nav a, header#mainHeader nav a:visited {
		color: #FFF;
		font-weight: 700;
		transition: color 02.s
	}
	
	header#mainHeader nav li:hover a {
		color: var(--silver);
		transition: color 0.2s;
	}

}

@media (min-width: 62rem) {
	header#mainHeader div.header-button {
		display: none;
	}
	
	header#mainHeader nav {
		flex: 1 0 60%;
		align-self: center;
		padding: 2em;
	}
	
	header#mainHeader nav ul {
		display: flex;
		font-size: 1em;
		justify-content: flex-end;
	}
	
	header#mainHeader nav ul li {
		border: 1em solid transparent;
	}
	
	header#mainHeader nav ul li a, header#mainHeader nav ul li a:visited {
		color: #FFF;
		font-weight: 700;
		transition: color 0.2s;
	}
	
	header#mainHeader nav ul li.selected a {
		color: var(--dark-purple);
	}
	
	header#mainHeader nav ul li:hover a {
		color: var(--silver);
		transition: color 0.2s;
	}
}




footer#mainFooter {
	background-color: #222;
	color: #c0c0c0;
	font-size: 0.8em;
}

footer#mainFooter div {
	width: 100%;
	margin: 3em 0 5em 0;
	text-align: center;
}

/* mainBody Definitions */
div.heroImage {
	display: block;
	width: 100%;
	height: 100vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

div.heroImage > div {
	display: block;
	width: calc(100% - 10em);
	height: calc(100% - 10em);
	background: linear-gradient(rgba(120,81,169,1), rgba(120,81,169,0.5));
	padding: 5em;
}

div.heroImage div.whiteBlock {
	background-color: #fff;
	padding: 2em;
	margin:auto;
	width: 40%;
	border-radius: 5px;
	text-align: center;
}

div.heroImage h2 {
	margin-bottom: 1em;
}

@media (max-width: 61.9rem) {
	div.heroImage > div {
		width: calc(100% - 1em);
		height: calc(100% - 1em);
		padding: 0.5em;
	}
	
	div.whiteBlock {
		width: 80%;
	}
}


/* Design Elements */

section#mainBody a:not(.bookButton), section#mainBody a:not(.bookButton):visited {
	color: var(--royal-purple);
	font-weight: 700;
	transition: color 0.2s;
	position: relative;
}

section#mainBody a:not(.bookButton)::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 0.1em;
  bottom: 0;
  left: 0;
  background-color: var(--dark-purple);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}


section#mainBody a:not(.bookButton):hover {
	color: var(--dark-purple);
	transition: color 0.2s;
}

section#mainBody a:not(.bookButton):hover::before {
  transform: scaleX(1);
}


div.wrapper {
	display: block;
	max-width: 70rem;
	margin: auto;
}

.highlight {
	color: var(--purplish);
}

div.cal-inline {
	display: block;
}

span.fade {
	opacity: 0.5;
}

div.centerText {
	display: block;
	width: calc(100% - 2em);
	margin: auto;
	padding: 1.5em;
	text-align: center;
	border-left: 0.3em solid var(--royal-purple);
	border-right: 0.3em solid var(--royal-purple);
	background-color: var(--light-grey);
}

div.centerText h2 {
	margin-bottom: 1em;
	color: var(--royal-purple);
}

div.singleHeader {
	display: block;
	text-align: center;
	margin: 4em;
}
div.singleHeader h2 {
	display: block;
}

/* Animated */
div.aniv {
	/*opacity: 0.8;*/
	/*transition: opacity 2s ease-in;
	will-change: opacity;*/
}