:root {
	/*overwritten by js-triggered style on load/resize*/
	--sticky-offset: 0;
}

html {
	scroll-padding-top: var(--sticky-offset);
}

#skip-to-main-content-link {
	z-index: 5;
	color:#000;
	border:3px solid #000;
	border-top-width:0;
	top:-53px;
}

.container {
	padding:0 4%;
}

button, .button {
	background: var(--primary-100);
	color:#414141;
}

header#pre-header {
	background: var(--primary-100);
	padding:12px 0;
	position: sticky;
	top: 0;
	z-index: 6;
}

header#pre-header .container {
	display: flex;
	justify-content: space-between;
	gap:3rem;
	align-items: center;
}

header#pre-header .tag-line {
	flex-shrink: 1;	
	font-size:0.8em;
}

header#pre-header .tab-buttons {
	display: flex;
	gap:1.5em;
	flex-shrink: 0;
	align-self: flex-start;
}

header#pre-header .tab-buttons .button-group {
	position:relative;
	display:flex;
	gap:0.5em;
} 

header#pre-header .tab-buttons .button-group > * {
	position: relative;
	background:#fff;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border:1px solid #000;
	color: #000;
	border:0;
	box-shadow: 2px 2px 4px rgba(0,0,0,.1);
	font-size:0.9em;
	font-weight:700;
	padding:13px 1.4rem;
	height:50px;
	box-sizing: border-box;
	top:-16px;
	margin-bottom:-100px;
	transition: all 0.15s ease-in, outline 1ms;
	line-height: 1;
}

header#pre-header .tab-buttons .button-group > a:hover {
	color:#fff;
	background-color: var(--secondary-100);
	top:-12px;
}

header#pre-header .tab-buttons .button-group [data-type="student"] {
	color:#116B3B;
	background-color: #F8FDFA;
}

header#pre-header .tab-buttons .button-group [data-type="student"]:hover {
	background-color:#116B3B;
}

header#pre-header .tab-buttons .button-group [data-type="staff"] {
	color:#185C91;
	background-color: #F4FAFF;
}

header#pre-header .tab-buttons  .button-group [data-type="staff"]:hover {
	background-color:#185C91;
}


header#header {
	background: var(--primary-10);
	z-index: unset;
	color:#2F2F2F;
	font-size:1.1em;
}

header#header .container {
	gap:4em;
}

header#header .site-logo {
	color: var(--secondary-100);
}

#header-right {
	align-self: unset;
	line-height: 1.5;
	flex-shrink: 1;
	max-width: 650px;
	text-align: right;
}

#carousel {
	position:relative;
	min-height:300px;
	width: 100%;
	aspect-ratio: 3/1;
	max-height: 50vh;
}

.hero-title {
	position: absolute;
	width:100%;
	height: 100%;
	z-index:-1;
	transition: opacity 0.3s ease-in-out;
	border:0;
}

.hero-title.active {
	z-index:2;
}

.hero-title .article-container {
	padding-top:1.5rem;
	padding-bottom:calc(1.5rem + 1rem + 16px);
	min-height: unset;
	height:calc(100% - 4rem - 16px);
	
}

#carousel-nav-holder {
	z-index:3;
	height:16px;
	position: absolute;
	bottom:1.5rem;
	width:100%;
}

#carousel-nav {
	display: flex;
	gap:7px;
}

#carousel-nav button {
	height:16px;
	width:16px;
	padding:0;
	background:var(--secondary-100);
	border-radius:999px;
	text-align: left;
	display:unset;
	overflow: hidden;
	transition: width 0.3s ease-in-out;
}

#carousel-nav button:disabled {
	width:60px;
	cursor: default;
}

#carousel-nav button:disabled span {
	display: block;
	background: var(--primary-100);
	height: 100%;
	border-radius: 8px;
	width: calc(16px + 50%);
	left: -16px;
	position: relative;
}

.hero-title h1 {
	color: #414141;
}

.hero-title h2 { 
	color: #171717;
	max-width: 70%;
	font-size:1.1rem;
}

.hero-title .hero-text {
	position: relative;
}

.hero-title .hero-text-top {
	position:absolute;
	bottom:0;
	gap:1rem;
}


section.type-a {
	padding:5rem 0;
	line-height: 1.5;
	text-align: center;
	color:#5f5f5f;
}


section.type-a .container {
	display: flex;
	flex-direction: column;
	gap:1rem;
	align-items: center;
	max-width: 800px;
}

section.type-a h2 {
	font-weight:300;
	margin-bottom:2rem;
	color:#7A710D;
	font-size:1.3rem;
}

section.type-a h2 b {
	font-weight:700;
}

.button.pill, button.pill {
	color:#414141;
	border-radius: 999px;
	font-weight: 800;
	font-size:0.9rem;
	padding:0.4rem 1.5rem;
	line-height: 1.4;
	font-weight: 700;
	display: block;
}

.button.pill.large, button.pill.large {
	font-size:1.1rem;
	padding:0.6rem 3rem;
}

.button.pill.extra-large, button.pill.extra-large {
	font-size:1.5rem;
	padding:1rem 4rem;
	font-weight: 800;
}

.button-subtext {
	font-size:1rem;
	max-width:360px;
}


section.type-b {
	padding:5rem 0;
	line-height: 1.5;
	/*background: var(--primary-10);*/
	background: #FDFFE1;
	color:#000;
	font-size:1.3rem;
}

section.type-b .container {
	display: flex;
	flex-direction: column;
	gap:2rem;
}



.simple-accordion .buttons {
	display:flex;
	gap:2rem;
	max-width:47rem;
	margin:0 auto;
}

.simple-accordion .buttons > * {
	 flex-basis: 50%;
}

.simple-accordion .buttons button.pill {
	position: relative;
	overflow: hidden;
}

.simple-accordion .buttons button.pill:after {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	content:'';
	background:rgba(255,255,255,0.5);
	opacity: 0;
	transition: opacity 200ms ease-in-out;
	pointer-events: none;
}

.simple-accordion .buttons button.pill:not(.active):not(:hover):after {
	opacity:1;
	pointer-events:auto;
}

.simple-accordion[data-activated] .buttons button.pill.active {
	pointer-events: none;
}

.simple-accordion .white-space {
	height:3rem;
	transition:height 200ms ease-in-out;
}

.simple-accordion .content {
	transition:height 200ms ease-in-out;
	overflow: hidden;
	text-align: left;
}

.simple-accordion[data-activated] .content {
	transition:height 400ms ease-in-out;
}

.simple-accordion .content > * {
	opacity: 0;
	transition: opacity 200ms ease-in-out;
}


ul.large-arrowed {
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.45;
	list-style: none;
	padding-left: 0;
	margin: 0;
}

ul.large-arrowed  li {
	display: flex;
	align-items: center;
}

ul.large-arrowed  li:not(:last-child) {
	margin-bottom: 1.5rem;
}

ul.large-arrowed li::before {
	content: '';
	flex-shrink: 0;
	width: 16px;
	height: 30px;
	margin-right: 1.5rem;
	background-image: url('data:image/svg+xml;utf8,<svg height="16" width="9px" viewBox="0 0 256 448" xmlns="http://www.w3.org/2000/svg"> <path d="M 246.592 201.408 C 259.088 213.903 259.088 234.197 246.592 246.692 L 54.657 438.628 C 42.161 451.124 21.868 451.124 9.372 438.628 C -3.124 426.132 -3.124 405.839 9.372 393.343 L 178.715 224 L 9.472 54.657 C -3.024 42.161 -3.024 21.868 9.472 9.372 C 21.968 -3.124 42.261 -3.124 54.757 9.372 L 246.692 201.308 L 246.592 201.408 Z" style="fill: rgb(228, 188, 28);"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
}

#wraparound-support {
	text-align: center;
	gap:1.5rem;
}

#character-explorer {
	display: flex;
	flex-direction: column;
	gap:1.5rem;
}

#character-explorer .buttons {
	margin:1rem auto;
}

#character-explorer .content {
	text-align: center;
}

#character-explorer .title {
	font-weight: 600;
	font-size:1.4rem;
}


#character-explorer .buttons {
	display: block;
	position: relative;
	width:100%;
	aspect-ratio: 1.9 / 1;
}

#character-explorer .buttons button {
	border-radius: 999px;
	border:0.35rem solid #000;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	z-index: 1;
	position: absolute;
	aspect-ratio: 1 / 1;
	bottom:0;
	left:50%;
	transition: transform 300ms ease-in-out;
}

#character-explorer .buttons button:after {
	content:'';
	background:#fff;
	opacity: 0.4;
	transition: opacity 300ms ease-in-out;
	border-radius: 999px;
	position: absolute;
	top:-.35rem;
	left:-.35rem;
	right:-.35rem;
	bottom:-.35rem;
}


#character-explorer .buttons button.active {
	z-index: 2;
}

#character-explorer .buttons button.active:after {
	opacity: 0;
}


#character-explorer .buttons button[data-type="student"] {
	width:36%;
	border-color:var(--secondary-100);
	background-color:var(--primary-100);
	margin-left:-18%;
}

#character-explorer .buttons button[data-type="staff"] {
	width:24%;
	border-color:#1E78BC;
	background-color:#70B7E0;
	margin-left:-12%;
	transform-origin: bottom center;
}

#character-explorer .buttons button[data-target="senco"] {
	transform: translate(-110%, -20%);
}

#character-explorer .buttons button[data-target="senco"]:hover {
	transform: translate(-110%, -20%) scale(1.05);
}

#character-explorer .buttons button[data-target="aep"] {
	transform: translate(-57%, -120%);
}

#character-explorer .buttons button[data-target="aep"]:hover  {
	transform: translate(-57%, -120%) scale(1.05);
}

#character-explorer .buttons button[data-target="ehw"] {
	transform: translate(57%, -120%);
}

#character-explorer .buttons button[data-target="ehw"]:hover {
	transform: translate(57%, -120%) scale(1.05);
}

#character-explorer .buttons button[data-target="teacher"] {
	transform: translate(110%, -20%);
}

#character-explorer .buttons button[data-target="teacher"]:hover {
	transform: translate(110%, -20%) scale(1.05);
}

#character-explorer .content .profile {
	display: flex;
	flex-direction: column;
	gap:2rem;
	opacity: 0;
}

#character-explorer .attributes {
	display: flex;
	justify-content: center;
	gap:1rem;
	flex-wrap: wrap;
}

#character-explorer .attributes > * {
	border-radius:15px;
	padding:10px;
	display:flex;
	flex-basis:10rem;
	font-size:0.9rem;
	align-items: center;
	height:8rem;
}

#character-explorer .profile[data-type="student"] .attributes > * {
	background:#FFF5CC;
}

#character-explorer .profile[data-type="staff"] .attributes > * {
	background:#D7F2FF;
}

.imagery-slider-holder {
	display:flex;
	align-items: center;
	justify-content: center;
	gap:1.3rem;
	margin-top:3rem;
	padding:2rem;
	border-radius: 20px;
	background:#1E78BC;
	color:#fff;
	flex-direction: column;
}

.imagery-slider {
	display:flex;
	align-items: center;
	justify-content: center;
	gap:2rem;
}


.imagery-slider .student-profile {
	flex-basis: 20%;
	text-align: center;
	font-size: 0.9rem;
	font-weight:300;
}

.imagery-slider .student-profile b {
	font-weight: 700;
	font-size:1rem;
	display:block;
}

.imagery-slider .student-profile .avatar {
	border-radius: 999px;
	border: 5px solid #005c34;
	background-color:#D6E0D4;
	width:100%;
	aspect-ratio: 1/1;
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
	overflow: hidden;
	margin-bottom:0.7em;
	background-position: bottom;
	box-sizing:border-box;
}

.imagery-slider .student-profile.first .avatar {
	background-size: 55%;
}

.imagery-slider .student-profile.second .avatar {
	background-size: 75%;
}


.imagery-slider img-comparison-slider {
	--divider-width: 4px;
	--divider-color: #ee4337;
	--default-handle-opacity: 0;
	border-radius:20px;
	cursor: col-resize;
}

 .custom-animated-handle {
	transition: transform 0.2s;
}

.imagery-slider img-comparison-slider:hover .custom-animated-handle {
	transform: scale(1.2);
}

.imagery-slider img-comparison-slider figure {
	margin: 0;
	position: relative;
}

.imagery-slider img-comparison-slider img {
	max-height: 50vh;
}

.imagery-slider .comparison-overlay {
	position:absolute;
	top:0;
	right:0;
	left:0;
	bottom:0;
	background:#000;
	opacity:0;
}


footer#footer {
	background: var(--primary-100);
}

footer#footer, footer#footer a {
	font-weight:600;
	color:#000;
}

#footer-body {
	gap:2rem;
}

.footer-cols {
	display:flex;
	gap:3rem;
	justify-content: space-between;
	align-items: flex-end;
}

.footer-row.links {
	gap:0.5rem;
	display:flex;
	flex-direction:column;
}

.footer-row.logos {
	gap:1rem;
}

.footer-row.logos img {
	height:57px;
}


@media (max-width: 1150px) {

	header#pre-header .tab-buttons .button-group > * {
		margin:0;
		border-top-left-radius: 0.5em;
		border-top-right-radius: 0.5em;
		height:auto;
		top:0;
	}	

	header#pre-header .tab-buttons .button-group > a:hover {
		top:0;
	}
}


@media (max-width: 860px) {

		.container {
			/*padding:0 1.5rem;*/
		}

		header#header .container {
			flex-direction: column;
			gap:1rem;
		}

		#header-right {
			text-align: center;
			font-size:1rem;
			font-weight:400;
			max-width: none;

		}

		header#pre-header .container {
			flex-direction: column;
			gap:0.6rem;
			align-items: flex-start;
		}

		header#pre-header .tab-buttons .button-group > * {
			padding:0.6rem 1rem;
		}

		header#pre-header .tab-buttons {
			width: 100%;
			justify-content: space-between;
		}



}

@media (max-width: 830px) {

	.simple-accordion .buttons {
		gap:1rem;
	}

	.simple-accordion .buttons button.pill {
		font-size:1rem;
		padding:1rem 1.5rem
	}

	section.type-b {
		font-size:1.1rem;
	}

}

@media (max-width: 700px) {

	.imagery-slider-holder {
		margin-top:1.5rem;
	}

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

	.imagery-slider img-comparison-slider {
		order: -1;
		flex-basis: 100%;
	}

	.imagery-slider .student-profile {
		flex-basis: 40%;
	}

}

@media (max-width: 600px) {
	section.type-a, section.type-b {
		padding:3rem 0;
	}

}

@media (max-width: 480px) {

	.container {
			/*padding:0 1rem;*/
	}

	#header-right {
		font-size:0.9rem;
	}

	.hero-title h1 {
		font-size:1.8rem;
	}

	.hero-title h2 {
		font-size:0.8rem;
	}

	.button.pill.extra-large, button.pill.extra-large {
		font-size:1.4rem;
		padding:0.6rem 2rem;
	}

	.footer-cols {
		flex-direction: column;
		align-items: flex-start;
		gap:2rem;
	}


}

@media (max-width: 420px) {

	header#pre-header .tab-buttons .button-group > * {
		padding:0.4rem 0.8rem;
		font-size:0.8rem
	}

	.simple-accordion .buttons button.pill {
		border-radius:30px;
	}

}

.tooltip-i {
	background:var(--secondary-100);
}

#enquiry-flow .title {
	display: flex;
	flex-direction: column;
	transition: all 300ms ease-in-out;
	margin-bottom: 2rem;
}

#enquiry-flow h1 {
	display: flex;
	justify-content: center;
	align-items: center;
	margin:0;
}

#enquiry-flow #start-again {
	flex: 0 0 calc(20px + 0.9rem);
	height:20px;
	opacity: 1;
	transition: all 300ms ease-in-out;
	overflow: hidden;
}

#enquiry-flow #start-again .icon {
	width:20px;
	height:20px;
	opacity:1;
	transition: transform 500ms ease-in-out;
	-webkit-mask: var(--icon) no-repeat center / contain;
	mask: var(--icon) no-repeat center / contain;
	background-color: var(--secondary-100);
	display: block;
	border-radius: 0;
}

#enquiry-flow #start-again .icon:hover {
	transform: rotate(360deg);
}


#enquiry-flow #enquiry-email {
	overflow: hidden;
	opacity: 1;
	transition: opacity 400ms ease-in-out, flex-basis 200ms ease-in-out;
	flex-basis: calc(1rem + 5px);
	font-style: italic;
}

#enquiry-flow [data-id="institution"] .option-buttons {
	display: flex;
	flex-wrap: wrap;
	gap:1rem;
	justify-content: center;
}


#enquiry-flow .content {
	transition:height 400ms ease-in-out;
	overflow: unset;
}

#enquiry-flow .content > * {
	opacity: 0;
	transition: opacity 200ms ease-in-out;
	width:100%;
	margin:0 auto;
}

#enquiry-flow .content > .size-l {
	max-width:800px;
}

#enquiry-flow .content > .size-m {
	max-width:500px;
}

#enquiry-flow .content > .size-s {
	max-width:400px;
}


#enquiry-flow form {
	width: 100%;
	max-width: 400px;
}

#enquiry-flow form.fit-content {
	max-width: unset;
	width:fit-content;
}

#enquiry-flow form input[type="email"],
#enquiry-flow form input[type="text"],
#enquiry-flow form textarea {
	background: var(--primary-10);
	width:100%;
}

#enquiry-flow form.single-option-form input[type="email"],
#enquiry-flow form.single-option-form input[type="text"] {
	font-size:1.3rem;
}

#enquiry-flow form label {
	max-width: 400px;
}

#enquiry-flow form input[disabled] {
	color: #6e6e6e;
	background: #edeeec;
	border-color: #ccc;
}

#enquiry-flow .autocomplete-wrapper {
	width: 100%;
}

.flex-cols {
	display:flex;
	gap:1.5rem;
	flex-direction: column;
	align-items: center;
	text-align: center;
}



form.single-option-form, form.multi-option-form {
	display: flex;
	gap:1rem;
	flex-direction: column;
	align-items: center;	
}



.inline-update {
	position:relative;
}

.submit-holder { 
	margin-left:auto;
}

.inline-update .submit-holder {
	align-items: center;
	justify-content: center;
	gap:1rem;
	display: flex;
}

.inline-update .submit-holder .spinner {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border-top: 2px solid #000;
	border-right: 2px solid transparent;
	animation: spinner .8s linear infinite;
	z-index: 5;
	visibility: hidden;
}

.inline-update.updating:before {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:rgba(255,255,255,0.5);
	content:'';
	z-index:4;
}

.inline-update.updating:after {
	display: none;
}

.inline-update.updating .submit-holder .spinner {
	visibility: visible;
}

.form-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	gap: 2rem;
}

.form-footer > * {
	flex-shrink: 0;
}

.org-not-listed button {
	color:#000;
}

.org-not-listed button:hover {
	color:#666
}

@keyframes spinner {
	to {transform: rotate(360deg);}
}

.message {
	padding: 0.5rem;
	box-shadow: 2px 2px 4px rgba(0,0,0,.1);
	width: 100%;
	box-sizing: border-box;
}

.message.error {
	background:#ffe8e8;
	color:#5c0000;
}

.message.success {
	background:#6bb8e5;
	color:#000;
}

.org-items {
	display: flex;
	flex-direction: column;
}

.org-items {
	gap:1rem;
}

.org-item {
	justify-content: center;
	padding:0.5rem 1rem;
}


label.org-item { 
	border:2px dashed var(--secondary-100);
	background:#f9f9f9;
	border-radius: 0.7rem;
	cursor: pointer;
	transition: all 200ms ease-in-out;
}

.org-item [data-as="text"]:empty {
	display:none;
}

.org-item .name {
	font-size:1.3em;
	font-weight:500;
}

.org-item .urn {
	font-weight: 700;
	font-size: 0.7rem;
}

.org-item .details > *:not(:last-child):after {
	content:",";
}

.org-items label input {
	display:none;
}

.org-items label:has(input:checked) {
	background: var(--secondary-100);
	color: white;
}



[data-id="single-school-select"] .org-item,
[data-id="charity-select"] .org-item {
	border:1px dotted #000;
	background: var(--primary-10);
}

input[type="submit"].button.faux-disabled {
	opacity: 0.5;
}

input[type="submit"].button.faux-disabled:hover {
	cursor:default;
	transform: scale(1);
	color: #414141;
	background:var(--primary-100);
}

.brochure {

}

.brochure .top-banner {
	background:#e6e6e6;
}

.brochure .top-banner .pretitle {
	font-size: 0.7rem;
	padding:0.4rem 0;
}



.brochure .top-banner .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap:50px;
}

.brochure .top-banner .links-holder {
	padding:0.4rem 0.6rem;
	display: flex;
	gap:10px;
	align-items: center;
	background:var(--primary-100);
	align-self: flex-end;
}

@media (max-width: 500px) {
	.brochure .top-banner .pretitle {
		display: none;
	}

	.brochure .top-banner .links-holder {
		background: none;
		padding-left:0;
		padding-right:0;
	}
}


.brochure .top-banner a {
	font-size:0.8em;
	text-align: right;
	color:var(--secondary-100);
	color:#333;
	font-weight: 500;
}



.brochure .top-banner .links-holder button {
	background:#626262;
	color:#fff;
	font-weight:600;
	font-size:0.8rem;
	padding:0.4rem 0.6rem;
}

.brochure .top-banner .links-holder button:hover {
	background: #333;
}

.brochure h2 {
	/*text-align: center;*/
}

/*.brochure .cols {
	display: flex;
	width:100%;
	gap:2rem;
	align-items: flex-start;
}

.brochure .cols nav, .brochure aside {
	position: sticky;
	top:calc(var(--sticky-offset) + 2em);
}

.brochure .cols nav {
	display:flex;
	flex-direction: column;
	gap:0.3rem;
}

.brochure .cols main {
	flex-grow: 1;
}
*/
/*.brochure aside {
	flex-basis: 300px;
}*/

.brochure aside form {
	border-radius:10px;
	background:var(--primary-100);
	padding:1rem;
	font-weight:600;
	width:300px;
}

.brochure-contact-form  .form-sections {
	display: flex;
	flex-direction: column;
	gap:1rem;
}

.brochure-contact-form .inferrable-fields-holder .opposed-options {
	max-width: 250px;
	margin:1.1rem 0;
	font-size: 1em;
}

.brochure-contact-form .inferrable-fields-holder .opposed-options input {
	margin:0;
}

.brochure-contact-form .inferrable-fields-holder.is-inferred .inferrable-fields-group {
	position: relative;
	display:none;
}

.brochure-contact-form .inferrable-fields-holder.is-inferred .inferrable-fields-group:after {
	position: absolute;
	width:calc(100% + 6px);
	height:calc(100% + 6px);
	left:-3px;
	top:-3px;
	content:'';
	background: #dcdccf;
	opacity: 0.3;
}

.brochure-contact-form  .form-section {
	background:#dcdccf;
	padding:1rem;
	border-radius: 10px;
}

.pair-rows, .pair-row {
	display: flex;
	gap:1rem;
}

.pair-rows {
	flex-direction: column;
}

.pair-row .form-pair {
	flex-basis: 50%;
}

@media (max-width: 640px) {

	.pair-row {
		flex-direction: column;
	}

	.pair-row.two .form-pair {
		flex-basis: 100%;
	}
}

.form-pair {
	display:flex;
	flex-direction: column;
	gap:0.2rem;
	flex-grow: 1;
}

.form-pair.same-line-pushed {
	flex-direction: unset;
	justify-content: space-between;
	align-items: center;
}

.form-holder input[type="submit"] {
	background:#666;
	color:#fff;
}

.hideable-form-body {
	display:flex;
	flex-direction: column;
	gap:1rem;
}

.brochure #contact-us {
	background:#ECE8DC;
}

.brochure #contact-us h2 {
	font-size:1.8rem;
	font-weight:800;
	text-align: center;
}


.brochure #contact-us .message.success {
	border:none;
	text-align: center;
	font-size: 1.3rem;
	padding:1rem;
}


.brochure-contact-form.updating:before {
	background: rgba(236, 232, 220,0.5);
}

.brochure-contact-form {
	display:flex;
	flex-direction: column;
	gap:1rem;
	padding:6px;
	font-weight: 600;
}


.brochure-contact-form input:not([type="submit"]),
.brochure-contact-form select,
.brochure-contact-form textarea {
	border:none;
	background:#fff;
	border-radius: 4px;
	padding:0.8rem 1rem;
	margin-top:0.2rem;
}


.brochure-contact-form input[type="submit"] {
 	background: #000;
}

.brochure .features-reveal-wrapper {
	/*max-height: 75vh;*/
	/*aspect-ratio: 16/9;*/ /* aspect ratio and max-height don't work together on safari */ 

	width:100%;
	height: min(calc(100vw * 9 / 16), 75dvh);
	padding-bottom: 56px; /* buttons - 36px height + 10px top/bottom padding*/
	padding-top:15px; /* progress bar */
	box-sizing: content-box;
	overflow: hidden;
}




.brochure .profile-banner {
	padding:1rem 0;
	background:var(--primary-100);
}



.brochure .profile-banner h1 {
	font-size:2.6rem;
	margin:0;
}

.brochure .profile-banner .subtitle {
	font-size:1.3rem;
	font-weight: 300;
}

.brochure .profile-banner .subtitle .pipe {
	color:var(--primary-100);
	color:#e63131;
	display:inline-block;
	margin:0 0.4rem;
}

.brochure .pills {
	display: flex;
	gap:0.7rem;
	margin-top:0.5rem;
	flex-wrap: wrap;
}

.brochure .pill-pair {
	background: #3E8B49;
	color:#fff;
	font-size:1.1em;
	display:flex;
}

.brochure .pill-pair, 
.brochure .pill-pair span {
	border-radius:0.75rem;
}

.brochure .pill-pair span {
	padding:0.4rem 0.8rem;
}

.brochure .pill-pair span:nth-child(2) {
	background:rgba(255,255,255,0.32);
}

.brochure nav {
	position: sticky;
	top:0;
	background: #FFFAE5;
	z-index: 12;
}

.brochure nav .container {
	display: flex;
	flex-wrap: wrap;
	gap:0;
}

.brochure nav .container a {
	padding:0.6rem 0.8rem;
	color:#666;
	text-decoration:none;
	transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
	text-align:center;
}

.brochure nav .container a.active {
	background:var(--primary-100);
	color: #3f3f3f;
	font-weight:600;
}

.brochure nav .container a:not(.active):hover {
	background:var(--secondary-100);
	color:#3f3f3f;
}

.student-preview-holder {
	position: relative;
	display: flex;
	height:80vh;
	border:2px solid var(--primary-100);
	border-radius: 10px;
	overflow: hidden;
}

.student-preview-holder.is-fullscreen {
	height:unset;
	border:0;
}

.student-preview-holder.is-fullscreen, 
.student-preview-holder.is-mobile {
	display:block;
	position: relative;
}

.student-preview-holder.is-fullscreen {
	border-radius: 0;
}

.student-preview-holder .settings-selector {
	/*min-width:310px;*/
	background:#faffe5;
	padding:1em;
	flex: 0 0 310px;
	/*display: flex;
	flex-direction: column;*/
}

.student-preview-holder:not(.is-fullscreen):not(.is-mobile) .settings-selector {
	border-right:2px dashed var(--primary-100);
}

.student-preview-holder.is-fullscreen .settings-selector,
.student-preview-holder.is-mobile .settings-selector {
	transition: left 0.3s ease-in-out;
	position: absolute;
	left:-310px;
	width:310px;
	opacity:0.97;
	height:100%;
	padding:0;
}

.student-preview-holder .settings-selector .settings-inner {
	height:100%;
	width: 100%;
	overflow: auto;
}


@media (max-width: 430px) {
	.student-preview-holder.is-fullscreen .settings-selector {
		left:-300px;
		width:300px;
	}
}


.student-preview-holder.is-fullscreen .settings-selector .settings-inner,
.student-preview-holder.is-mobile .settings-selector .settings-inner {
	padding:10px;
	box-sizing: border-box;
}

.student-preview-holder #toggle-tray {
	display:none;
}

.student-preview-holder.is-fullscreen .settings-selector button#toggle-tray,
.student-preview-holder.is-mobile .settings-selector button#toggle-tray {
	width:30px;
	position:absolute;
	right:-30px;
	top:0;
	bottom:0;
	background:var(--primary-100);
	color:#fff;
	font-weight:bold;
	font-size:2em;
	border-radius:0;
	display:flex;
	align-items: center;
	justify-content: center;
	padding:0;
	transform: rotate(0deg);
	transition: none;
}

.student-preview-holder.is-fullscreen .settings-selector.is-open,
.student-preview-holder.is-mobile .settings-selector.is-open {
	left:0;
}


.student-preview-holder.is-fullscreen .settings-selector.is-open button#toggle-tray,
.student-preview-holder.is-mobile .settings-selector.is-open button#toggle-tray {
	transform: rotate(180deg);
}


.student-preview-holder iframe {
	flex-grow: 1;
	border:0;
}

.student-preview-holder.is-fullscreen iframe,
.student-preview-holder.is-mobile iframe {
	display: block;
	width:calc(100% - 30px);
	height:100%;
	opacity:1;
	padding-left:30px;
	box-sizing: content-box;
}



.student-preview-holder .return-to-standard {
	margin-bottom:1.4em;
	font-size:0.9rem;
}

.student-preview-holder .return-to-standard a {
	color: inherit;
}

#generate-student-profile {
	transition: opacity 0.3s ease-in-out;
}


.opposed-options .options div,
.opposed-options-multiple .options label {
	color: #333;
}

.opposed-options input[type="checkbox"]:not(:checked) + .options div:first-child,
.opposed-options input[type="checkbox"]:checked + .options div:last-child {
	color:#000;
}

.virtle-accordian-holder:not(.virtle-child-accordian:first-child) {
	margin-top:0.6rem;
}

.virtle-child-accordian .virtle-accordian-btn {
	margin-top:0;
}

.virtle-accordian-btn {
	color:#000;
}

.virtle-accordian-btn:hover {
	color:#333;
}

.opposed-options-multiple {
	margin-top:10px;
	width:100%;
	font-size:0.8rem;
	box-sizing: border-box;
}



.account-type {
	/*background:#fff;*/
	/*padding:10px;*/
	margin-bottom:1rem;
}

.brochure main .container {
	padding-top:3rem;
	padding-bottom:3rem;
}

.brochure .features-holder {
	background:#eeeeee;
}


.brochure #welcome h1 {
	color:#519179
}

.reveal .p-gram {
  width: 100%;
  height: 100%;
  /*font-size: 18px;
  line-height: 1.2em;
  text-align: justify;*/
  position: relative;
  overflow: hidden;
  display: inline-block;
  /*clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);*/
  clip-path: polygon(100px 0%, 100% 0%, calc(100% - 100px) 100%, 0% 100%);
  box-sizing: border-box;
  padding:1.6em;
  font-weight: 600;
}

.reveal .p-gram.med-pad {
	padding:2em;
}

.reveal .p-gram.lrg-pad {
	padding:2.6em;
}

.p-gram .mask-left {
  float: left;
  width: 92px;
  height: 100%;
  shape-outside: polygon(0 0, 100% 0, 0% 100%, 0 100%)
}

.p-gram .mask-right {
  float: right;
  width: 92px;
  height: 100%;
  shape-outside: polygon(100% 0, 100% 0, 100% 100%, 0% 100%)
}

.p-gram .body {
	line-height:1.3em;
	/*transform: translateY(-50%);*/
	/*top: 50%;*/
	/*position: relative;*/
}



.feature-type-1 {
	--feature-bg: rgb(217, 234, 211);
	--feature-title-bg:#116b3b;
	--feature-text-bg:#afd0b4;
}

.feature-type-2 {
	--feature-bg: rgb(189, 173, 188);
	--feature-title-bg:#7d2371;
	--feature-text-bg:rgb(255, 240, 255);
}


.feature-type-3 {
	--feature-bg:rgb(224, 189, 158); 
	--feature-title-bg:#e89542;
	--feature-text-bg:#f8e2ce;
}


.feature-type-4 {
	--feature-bg: rgb(211, 227, 234);
	--feature-title-bg:#1e78bc;
	--feature-text-bg:#b4cad9;
}

.feature-type-5 {
	--feature-bg:#ffecf4;
	--feature-title-bg:#da3179;
	--feature-text-bg:#f2d2df;
}

.feature-type-6 {
	--feature-bg: #e3f0ef; 
	--feature-title-bg:#6ca6a3;
	--feature-text-bg:#c3d6d5;
}


[data-name="title"] .sl-block-content,
[data-name="image"].use-title-bg .sl-block-content {
	background: var(--feature-title-bg);
	color:#fff;
}

[data-name="text"] .p-gram {
	background:var(--feature-text-bg);
	color:#000;
}


.pricing-holder {
	width:100%;
	max-width: 750px;
	margin:0 auto;
}

.pricing-tiers {
	display: flex;
	align-items: stretch;
	--tier-radius:20px;
	margin:4em 0;
	text-align: center;
	width:100%;
	overflow: auto;
}

.pricing-holder[data-items="1"], .pricing-holder[data-items="2"] {
	max-width: 650px;
}

.pricing-tiers .tier-holder {
	display: flex;
	align-items: center;
	justify-content: center;
}


.pricing-holder[data-items="2"] .tier-holder:nth-child(1) {
	flex-basis:36%;
}

.pricing-holder[data-items="2"] .tier-holder:nth-child(2) {
	flex-basis:64%;
}

.pricing-tiers[data-items="3"] .tier-holder:nth-child(1) {
	flex-basis:20%;
}

.pricing-tiers[data-items="3"] .tier-holder:nth-child(2) {
	flex-basis:30%;
}

.pricing-tiers[data-items="3"] .tier-holder:nth-child(3) {
	flex-basis:50%;
}


.pricing-tiers .tier {
	border-top-left-radius: var(--tier-radius);
	border-bottom-left-radius: var(--tier-radius);
	display: flex;
	flex-direction: column;
	gap:1.8em;
	justify-content: center;
	padding:1.5em;
	box-sizing: border-box;
	color:#4e4e4e;
	width:100%;
}

.pricing-tiers .tier-holder:last-child .tier {
	border-top-right-radius: var(--tier-radius);
	border-bottom-right-radius: var(--tier-radius);
	height:100%;
	background:#ffdf5e;
	padding-bottom: 1em;
	color:#3A3A3A;
}

.pricing-tiers .tier-holder:nth-last-child(2) .tier {
	min-height:80%;
	background:#FFEA93;
}

.pricing-tiers .tier-holder:nth-last-child(3) .tier {
	min-height:60%;
	background:#FFF5CB;
}


.pricing-tiers .licences-count {
	font-weight:900;
}

.pricing-tiers .licences-count,
.pricing-tiers .cost .strong {
	font-size: 2.4rem;
}

.pricing-tiers .licences-count,
.pricing-tiers .ts-and-cs {
	color:#AB2B6B
}


.pricing-tiers .cost,
.pricing-tiers .equivalent-cost,
.pricing-tiers .ts-and-cs { 
	font-size:15px;
}

.pricing-tiers .cost .strong,
.pricing-tiers .equivalent-cost .strong {
	font-weight:800;
}

.pricing-tiers .tier .licences,
.pricing-tiers .tier .equivalent-cost,
.pricing-tiers .tier .ts-and-cs {
	display:flex;
	flex-direction: column;
	gap:0.3em;
}


.pricing-tiers .tier .ts-and-cs {
	gap:0.5em;
}

.pricing-tiers .equivalent-cost .strong {
	font-size:1.5em;
}

.pricing-tiers sup {
	font-size: calc(0.4em + 4px);
  	vertical-align: baseline;
  	position: relative; 
  	top: calc(-0.5 * 0.83 * 2 * (1.2em - 4px)); 
}


.pricing-features h2 {
	text-align: center;
}

.pricing-features ul {
	list-style: none;
	width:100%;
	margin:0;
}

.pricing-features li {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius:40px;
	border-bottom-left-radius:40px;
	background:#edffe8;
	padding:1em 1em 1em 60px;
	box-sizing: border-box;
	position: relative;
	font-weight:500;
}

.pricing-features li:not(:first-child) {
	margin-top:1em;
}

.pricing-features li:before {
	border-radius:999px;
	content:'';
	height:100%;
	min-height:50px;
	width:50px;
	aspect-ratio: 1/1;
	position:absolute;
	left:0;
	top:0;
	background-color:#4bac4b;
	display: block;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='0 0 448 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 438.675 9.375 C 451.175 21.875 451.175 42.175 438.675 54.675 L 182.675 310.675 C 170.175 323.175 149.875 323.175 137.375 310.675 L 9.375 182.675 C -3.125 170.175 -3.125 149.875 9.375 137.375 C 21.875 124.875 42.175 124.875 54.675 137.375 L 160.075 242.675 L 393.475 9.375 C 405.975 -3.125 426.275 -3.125 438.775 9.375 L 438.675 9.375 Z' style='fill: rgb(255, 255, 255);'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size:50%;
	background-position: center;
}

.pricing-features.excluded li {
	background:#ffebe8;
}
.pricing-features.excluded li:before {
	background-color:#dd8867;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='23.091 84.703 293.327 375.039'%3E%3Cpath id='path9' d='M 314.133 286.619 L 265.2 387.803 C 254.762 409.383 238.509 427.526 218.196 440.267 C 197.885 453.007 174.476 459.742 150.5 459.742 C 116.468 459.742 84.473 446.487 60.408 422.423 C 36.344 398.359 23.091 366.365 23.091 332.329 L 23.091 169.133 C 23.091 156.418 33.439 146.07 46.157 146.07 C 52.318 146.07 58.109 148.468 62.465 152.83 C 66.822 157.185 69.22 162.977 69.22 169.133 L 69.22 281.555 C 69.22 283.532 70.823 285.131 72.8 285.131 C 74.777 285.131 76.38 283.532 76.38 281.555 L 76.38 169.133 L 76.38 140.934 C 76.38 128.174 86.604 117.676 99.172 117.533 C 105.446 117.462 111.324 119.86 115.75 124.287 C 120.107 128.643 122.506 134.434 122.506 140.59 L 122.505 281.555 C 122.505 283.532 124.107 285.131 126.084 285.131 C 128.061 285.131 129.664 283.532 129.664 281.555 L 129.665 140.59 L 129.665 108.16 C 129.665 95.253 139.983 84.733 152.664 84.703 C 152.686 84.703 152.706 84.703 152.727 84.703 C 158.889 84.703 164.679 87.103 169.036 91.453 C 173.392 95.813 175.791 101.601 175.791 107.763 L 175.791 140.59 L 175.791 281.555 C 175.791 283.532 177.394 285.131 179.371 285.131 C 181.347 285.131 182.95 283.532 182.95 281.555 L 182.949 140.59 C 182.949 127.875 193.295 117.527 206.012 117.527 C 212.173 117.527 217.964 119.926 222.32 124.281 C 226.677 128.643 229.076 134.434 229.076 140.59 L 229.076 311.671 C 229.076 313.199 230.043 314.557 231.485 315.051 C 232.926 315.552 234.527 315.084 235.469 313.881 L 275.749 262.646 C 283.28 253.064 296.949 251.108 306.867 258.187 C 315.92 264.648 318.975 276.609 314.133 286.619' style='fill: rgb(255, 255, 255); fill-opacity: 1; fill-rule: nonzero; stroke: none; stroke-width: 0.133;'/%3E%3C/svg%3E");
}

#metrics-preview {
	width:100%;
	border:none;
	margin-top:3em;
}

#preview-display-modes > *:not(.active),
#preview-display-modes [data-id="standard"] [data-standard-mode]:not(.active) {
	display: none;
}

#preview-display-modes [data-id="standard"] [data-standard-mode] {
	margin-top:1em;
	display:flex;
	flex-direction: column;
	gap:1em;
}

.student-preview-holder [data-wb-group] {
	margin-bottom:1em;
}

.student-preview-holder [data-wb-group] h5 {
	color:#49652c;
	font-weight: 600;
}