@font-face {
    font-family: 'Vera';
    src: url('fonts/Vera.woff2?v=39fafc4') format('woff2'),
    url('fonts/Vera.woff?v=058d704') format('woff'),
    url('fonts/Vera.ttf?v=58cd6b5') format('truetype');

    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Vera';
    src: url('fonts/VeraBd.woff2?v=41f8c00') format('woff2'),
    url('fonts/VeraBd.woff?v=915c00d') format('woff'),
    url('fonts/VeraBd.ttf?v=51d6111') format('truetype');

    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Vera';
    src: url('fonts/VeraIt.woff2?v=805e57b') format('woff2'),
    url('fonts/VeraIt.woff?v=56c14c4') format('woff'),
    url('fonts/VeraIt.ttf?v=cc23c9e') format('truetype');

    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Vera';
    src: url('fonts/VeraBI.woff2?v=633fd5b') format('woff2'),
    url('fonts/VeraBI.woff?v=1c0963d') format('woff'),
    url('fonts/VeraBI.ttf?v=b55eee3') format('truetype');

    font-weight: bold;
    font-style: italic;
}

:root{
	--color-font-primary: #fff;
	--color-font-link: #76b8ff;

	--color-banner-green: #8ce020;
	--color-banner-red: #b1322d;
	--color-banner-yellow: #eeda34;
	--color-banner-pink: #cd5fbb;
	--color-banner-orange: #fd7916;
	--color-banner-blue: #4a97fc;

	--color-bg-accent: #484848;
	--color-bg-foundation: #000;
	--color-bg-header-footer: #111;

	--color-button-telephone: #26c943;
	--color-button-message: #7e32ad;
	--color-button-facebook: #0866ff;
	--color-button-instagram: #ff0a8f;

	--hover-overlay: rgba(255, 255, 255, .4);
	--hover-overlay-duration: .5s;
}

html {
    font-size: 16px;
    font-family: Vera, Arial, sans-serif;
    background-color: #000;
}
body,html{
	overflow-x: hidden;
}

body {
    max-width: 1700px;
    margin: 0 auto;
    min-height: 100vh;
}

h1 {
    font-size: 2rem;
    font-weight: 600;
}

form {
	label {
		font-weight: 600;
		width: 100%;
	}
}

figure {
    margin: 0;
}

button {
	border: 0;
	padding: 8px 12px;
	cursor: pointer;
	font-size: 17px;
	border-radius: 5px;
}

p {
    margin-bottom: 20px !important;
}

.container {
    max-width: 1120px;
}

.container.s9-inner {
    padding: 30px 40px;
}

#nav-area {
    border-bottom: 5px solid transparent;
    border-image: linear-gradient( to right, #6dabe3 0%, #6dabe3 11.11%, #ff1200 11.11%, #ff1200 22.22%, #0e9729 22.22%, #0e9729 33.33%, #d6de00 33.33%, #d6de00 44.44%, #ec7705 44.44%, #ec7705 55.55%, #1caba5 55.55%, #1caba5 66.66%, #e97187 66.66%, #e97187 77.77%, #ad82cc 77.77%, #ad82cc 88.88%, #58206a 88.88%, #58206a 100% );
    border-image-slice: 1;
}

#nav-logo {
    width: 345px;
    padding: 20px;
    height: 100%;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap !important;

    .user-menu {
        width: 100%;
        display: flex;
		justify-content: flex-end;
		gap: 10px;
		align-items: center;
        a {
            color: var(--tertiary-colour);
        }
    }
}

/*USER REGISTRATION FORM*/

#sld-password-checker {
	display: none;
}

/*USER PASSWORD RESET*/
.password-response {
	display: none;
}

/* MY ACCOUNT PAGE */

.account-container {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding-top: 1rem;
}

.tabs {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 20%;
	gap: 8px;
	padding-right: 10px;
}

.tabs, .tab-content {
	min-height: 300px;
}

.tab-content {
	width: 80%;
}

#home, #order-history, #settings, #streaming {
	display: none;
}

#home {
	display: block;
}

.tab {
	padding: 1rem;
	border-top: 1px solid grey;
}

.home-index-grid {
	display: grid;
	grid-auto-rows: auto;
	grid-template-columns: repeat(3, 1fr) !important;
	margin-top: 15px;
	gap: 15px;
	grid-template-areas:
                    'a b b'
                    'a c c';
	overflow: hidden;

	.item {
		background-size: cover;
		background-position: center;

		a {
			display: block;
			min-height: 250px;
			height: 100%;
		}
	}

	.item:nth-child(1) {
		grid-area: a;
	}

	.item:nth-child(2) {
		grid-area: b;
	}

	.item:nth-child(3) {
		grid-area: c;
	}

	.item:nth-child(4) {
		grid-area: d;
	}

	.item:nth-child(5) {
		grid-area: e;
	}

	.item:nth-child(6) {
		grid-area: f;
	}

	.item:nth-child(6n + 4){
		grid-row: auto /span 2;
	}

	.item:nth-child(6n + 3) {
		grid-column: auto /span 2;
	}
}

/* MY CART */
.cart-layout {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;

	.cart-item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 40px;
		border-radius: 10px;
		padding: 10px;
		border: 2px solid #6dabe3;

		.main-image {
			width: 200px;
			border: 4px solid #efffff1c;
			border-radius: 10px;
		}

		.cart-text {
			width: 60%;
		}

		.cart-item-info {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: flex-start;
			gap: 20px;

			.c-el {
				min-width: 15%;
			}

			.variation {
				width: 150px;
			}

			p {
				margin-bottom: 0 !important;
			}

			a {
				font-size: 24px;
			}
		}
	}

	.cart-item:nth-child(2n) {
		border: 2px solid #ff1200;
	}

	.cart-item:nth-child(3n) {
		border: 2px solid #0e9729;
	}

	.cart-item:nth-child(4n) {
		border: 2px solid #d6de00;
	}

	.cart-item:nth-child(5n) {
		border: 2px solid #ec7705;
	}
}

/* SHOP MISC */

.breadcrumb {
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.maincrumb {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.altcrumb {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

    a {
        text-decoration: none;
        margin: 0 5px;
        color: var(--tertiary-colour);

        &:first-child {
            margin-left: 0 !important;
        }

        &:hover {
            text-decoration: underline;
        }
    }
    p {
        margin: 0 5px !important;
    }
}

/* SHOP CATEGORY PAGE */

.shop-tiles {
	display: flex;
	gap: 15px;
	justify-content: center;
	flex-wrap: wrap;
	padding-top: 10px;

	.tile {
		width: 300px;
		height: 300px;
		background-size: cover;
		background-position: center;
		border-radius: 10px;
		transition: transform 0.1s ease-in-out;
		position: relative;

		span {
			position: absolute;
			bottom: 20px;
			left: 0;
			padding: 10px;
			background: #262626e0;
			color: white;
			border-top-right-radius: 10px;
			border-bottom-right-radius: 10px;
		}
	}
}

/* SHOP PRODUCT PAGE */

.shop-product-layout {
	display: flex;
	gap: 40px;
	margin-top: 20px;
	position: relative;

	.left, .right {
		flex: 1;
	}

	.left {
		max-width: 400px;
		position: sticky;
		top: 30px;
		align-self: flex-start;

		.main-image {
			max-width: 400px;
			height: auto;
			border: 4px solid #efffff1c;
			margin-bottom: 20px;
			border-radius: 10px;
		}

		.gallery {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			gap: 10px;
			margin-bottom: 20px;
		}

		.gallery-image {
			width: 50px;
			height: 50px;
			cursor: zoom-in;
			border-radius: 10px;
		}

		.selected {
			transform: scale(1.1);
			box-shadow: 0 0 0 3px var(--color-font-link);
		}
	}

	.right {
		.product-header {
			margin-top: 30px;
		}

		.aff-logo {
			margin: 20px 0;
			height: 60px;
		}

		.product-var {
			display: flex;
			flex-direction: column;
			gap: 15px;

			select {
				width: 300px;
				background: #484848;
				border: 0;
				border-bottom: 1px solid var(--text-colour);
				color: var(--text-colour);
				font-size: 18px;
				padding: 9px;
				border-radius: 5px;
			}
		}

		.price {
			margin-top: 20px;
			margin-bottom: 15px;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			gap: 10px;
		}

		.product-price {
			font-size: 24px;
			font-weight: 600;
		}

		.product-vat {
			font-size: 12px;
		}
	}
}

.cart-functionality, .account-cart-functionality {
	display: flex;
	gap: 15px;
	align-items: center;
	margin-top: 20px;

	input[type="submit"], input:disabled, #checkout-button {
		padding: 10px 20px;
		background-color: #2ecc71;
		color: var(--text-colour);
		border: 0;
		border-radius: 5px;
		cursor: pointer;
		text-decoration: none;
	}

	input[type="submit"]:hover, input:disabled {
		opacity: 0.9;
	}

	input:disabled {
		cursor: no-drop;
	}

	.cart-form {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		gap: 10px;

		a, .stock-warning {
			width: 100%;
		}

		.stock-warning {
			margin-bottom: 0 !important;
		}
	}

	.cart-quantity {
		display: inline-flex;
		align-items: center;
		background: #484848;
		border-bottom: 1px solid var(--text-colour);
		border-radius: 5px;

		button:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}

		button {
			width: 32px;
			height: 32px;
			border: 0;
			background: transparent;
			color: var(--text-colour);
			font-size: initial;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		input[type="number"] {
			width: 60px;
			text-align: center;
			background: transparent;
			color: var(--text-colour);
			border: 0;
			border-radius: 0;
			padding: 9px;
			margin: 0;
			font-size: 18px;
		}
	}

}

.account-cart-functionality {
	justify-content: flex-end;
}

.cart-checkout {
	flex-direction: column;
	text-align: center;
}

.product-code {
	font-size: 12px;
	margin-top: 5px;
	margin-bottom: 10px !important;
}

/* CHAMELEON PRODUCT PAGE */

.image-stack {
    padding: 0 15px;
    gap: 10px;
    margin-bottom: 20px;

    .col {
        padding: 0 !important;
    }
}


.page-slider {
    margin-bottom: 0;
}

/* Contact page */

#contact-form {
	input::placeholder, textarea::placeholder {
		color: white;
	}

	select {
		appearance: auto;
	}

	#contact-form-submit {
		font-size: 17px;
		padding: 8px 12px;
		border-radius: 5px;
		cursor: pointer;
		border: none;
	}
}

/* Stream page */

.stream-tiles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 30px;

	.tile {
		position: relative;
		border-radius: 5px;
		border-top: 4px solid;

		div {
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 30px;
			width: 100%;

			a {
				color: white !important;
			}
		}
	}
}

.stream-links {
	margin: 0;
	padding: 0;
	position: relative;

	.stream-dropdown {
		display: none;
		position: absolute;
		top: 100%;
		left: -4px;
		width: 280%;
		z-index: 5;
		padding: 0;
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;

		li {
			padding: 5px;
			margin: 5px 0;
		}
		li::marker {
			content: "";
		}
	}

	li {
		position: relative;
	}

	li::marker {
		content: "» ";
	}

	li:hover {
		.stream-dropdown {
			display: block;
		}
	}
}

.social-media-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 15px;
    a {
        color: #ffffff;
        font-size: 2.5rem;
    }

    #youtube {
        color: #ffffff;
        &:hover {
            color: red;
        }
    }

    #facebook {
        color: #ffffff;
        &:hover {
            color: dodgerblue;
        }
    }

    #instagram {
        color: #ffffff;
        &:hover {
            color: mediumpurple;
        }
    }
}


.footer-img {
    border-top: 5px solid #ffffff;
}

.footer-menu {

    p {
        font-weight: 600;
        text-transform: uppercase;
    }

    a {
        color: var(--tertiary-colour);
        padding: 0;
    }
}

.bottom-menu {
    list-style-type: none;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    align-items: center;
    padding: 0;
    margin: 0;
}

#footer-top-area {
    border-top: 5px solid transparent;
    border-image: linear-gradient( to right, #6dabe3 0%, #6dabe3 11.11%, #ff1200 11.11%, #ff1200 22.22%, #0e9729 22.22%, #0e9729 33.33%, #d6de00 33.33%, #d6de00 44.44%, #ec7705 44.44%, #ec7705 55.55%, #1caba5 55.55%, #1caba5 66.66%, #e97187 66.66%, #e97187 77.77%, #ad82cc 77.77%, #ad82cc 88.88%, #58206a 88.88%, #58206a 100% );
    border-image-slice: 1;
}

.footer-affiliates {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
	margin: 45px 0;

	img {
		height: 45px;
	}
}

#footer-area {
	a {
		text-decoration: none;
	}
}

/* General */


#content-area ul {
	/*   margin: 5px 0 0 0 !important; */
	list-style-type: square !important;
}

#content-area a {
	color: var(--color-font-link);
	text-decoration: none;
	cursor: pointer;
}


.mt-20 {
	margin-top: 20px !important;
}

.mb-20{
	margin-bottom: 20px !important;
}

.pb-20{
	padding-bottom: 20px !important;
}

.gap-20{
	gap: 20px;
}

.row-grid-1 {
	grid-row: span 1;
}

.row-grid-2 {
	grid-row: span 2;
}

.column-grid-1 {
	grid-column: span 1;
}

.column-grid-2 {
	grid-column: span 2;
}

.column-grid-3 {
	grid-column: span 3;
}

.full-column, .full-column img{
	height: 100%;
	width: 100%;
}

.image-strip {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-evenly;
	margin: 20px;
}

.footnote{
	font-size: .9rem;
	font-style: italic;
}

.starpass-star{
	position: relative;
	padding-left: 30px;
}

.starpass-star:before{
	display: block;
	position: absolute;
	content: '';
	background-image: URL('/wp-content/uploads/logo_starpass_star.png');
	background-repeat: no-repeat;
	background-size: contain;
	width: 20px;
	height: 20px;
	left: 0;
}

.starpass-star + ul{
	padding-left: 47px;
}

.starpass-bronze:before{
	filter: brightness(0) saturate(100%) invert(44%) sepia(97%) saturate(592%) hue-rotate(2deg) brightness(86%) contrast(84%);
}

.starpass-silver:before{
	filter: brightness(0) saturate(100%) invert(79%) sepia(33%) saturate(0%) hue-rotate(134deg) brightness(86%) contrast(106%);
}

.starpass-gold:before{
	filter: brightness(0) saturate(100%) invert(99%) sepia(27%) saturate(6124%) hue-rotate(313deg) brightness(100%) contrast(83%);
}

.starpass-platinum:before{
	filter: brightness(0) saturate(100%) invert(50%) sepia(9%) saturate(904%) hue-rotate(185deg) brightness(98%) contrast(84%)
}

.head-office-details p:first-child {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: max-content;
	font-size: 1.4rem;
	border-bottom: 1px solid white;
	margin: 0 40px;
	padding-bottom: 10px;
}

.head-office-details p:first-child::before {
	width: 20px;
	height: 20px;
	display: inline-block;
	content: '';
	margin-right: 9px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(106%) contrast(106%);
}

.head-office-phone:before {
	background-image: url('/wp-content/uploads/social_phone.svg');
}

.head-office-postal:before {
	background-image: url('/wp-content/uploads/social_mail.png');
}

.head-office-message:before {
	background-image: url('/wp-content/uploads/social_message.svg');
}

/* Index grid */



.index-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 15px;

	.index-grid-header-links {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.index-grid-header-links a {
		display: block;
		flex: 1;
		height: 100%;
	}
	.link-overlay {
		transition: background var(--hover-overlay-duration);
	}

	.link-overlay:hover {
		background-color: var(--hover-overlay);
	}

	img {
		display: block;
		width: 100%;
		height: 100%;
		max-width: 100%;
	}

}

/* Staff Collage */

.component-staff-collage {
	position: relative;
	gap: 15px;
}

.staff-collage-slot {
	position: relative;
	width: 220px;
	height: 304px;
	background-size: cover;
	border-radius: 15px;
	box-shadow: black 0 0 10px;
	cursor: pointer;
	overflow: hidden;

	img{
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		max-height: unset !important;
		max-width: unset !important;
		pointer-events: none;
	}

	div{
		position: absolute;
		bottom: 0;
		height: 35px;
		background-color: red;
		font-size: 0.7em;
		z-index: 3;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-bottom-left-radius: 15px;
		border-bottom-right-radius: 15px;
		width: 100%;
		text-shadow: black 0 0 10px;
	}

}

.staff-collage-slot:nth-child(6n+1) div {
	background-color: var(--color-banner-blue);
}

.staff-collage-slot:nth-child(6n+2) div{
	background-color: var(--color-banner-green);
}

.staff-collage-slot:nth-child(6n+3) div{
	background-color: var(--color-banner-red);
}

.staff-collage-slot:nth-child(6n+4) div {
	background-color: var(--color-banner-yellow);
}

.staff-collage-slot:nth-child(6n+5) div {
	background-color: var(--color-banner-pink);
}

.staff-collage-slot:nth-child(6n+6) div {
	background-color: var(--color-banner-orange);
}

.staff-bio-block:nth-child(6n+1) img {
	border-color: var(--color-banner-blue);
}

.staff-bio-block:nth-child(6n+2) img {
	border-color: var(--color-banner-green);
}

.staff-bio-block:nth-child(6n+3) img {
	border-color: var(--color-banner-red);
}

.staff-bio-block:nth-child(6n+4) img {
	border-color: var(--color-banner-yellow);
}

.staff-bio-block:nth-child(6n+5) img {
	border-color: var(--color-banner-pink);
}

.staff-bio-block:nth-child(6n+6) img {
	border-color: var(--color-banner-orange);
}

.staff-bio-list{
	row-gap: 20px;
}

.staff-bio-block {
	display: flex;
	gap: 25px;
	align-items: center;
	color: var(--color-font-primary);
	cursor: default;
}

.staff-bio-block:nth-child(2n) {
	flex-direction: row-reverse;
	text-align: right;
}

.staff-bio-block img {
	align-self: flex-start;
	border-radius: 10px;
	border: 4px solid white;
	border-top-color: white;
	border-right-color: white;
	border-bottom-color: white;
	border-left-color: white;
}

/* School styles */

.school-single-post{

	h1{
		margin-bottom: 1.1rem !important;
	}

	p,ul{
		margin-bottom: 0 !important;
	}

	.logo-image-strip img{
		height: 45px;
	}

	.featured-image-strip img{
		width: 300px;
	}

}

.button-bar {
	/*   height: 32px; */
}

.button-tel .social-inline-icon {
	background-image: url('/wp-content/uploads/social_phone.svg');
}

.button-message .social-inline-icon {
	background-image: url('/wp-content/uploads/social_message.svg');
}

.button-facebook .social-inline-icon {
	background-image: url('/wp-content/uploads/social_icon_fb.png');
}

.button-instagram .social-inline-icon {
	background-image: url('/wp-content/uploads/social_icon_insta.png');
}

.social-inline-icon {
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-right: 5px;
	filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(106%) contrast(106%);
}

.button-bar > a:hover {
	text-decoration: none !important;
}

.button-bar > a {
	cursor: pointer;
	font-size: 0.9rem;
	text-decoration: none !important;
}

.button-bar-full > a{
	width: 100%;
}

.button-tel {
	background-color: var(--color-button-telephone);
}

.button-message {
	background-color: var(--color-button-message);
}

.button-facebook {
	background-color: var(--color-button-facebook);
}

.button-instagram {
	background-color: var(--color-button-instagram);
}

.tab-nav-bar{
	gap: 10px;
	max-width: 800px;
	margin: 0 auto 15px auto;
}

.tab-nav-bar a {
	padding: 10px;
	border: 2px solid var(--color-font-primary);
	border-radius: 10px;
	color: var(--color-font-primary) !important;
	position: relative;
	white-space: nowrap;
}

/* Single School Display */


.container-fluid:has(> .school-single-post){
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.single-school-display-information{
	margin-top: 35px;
	margin-bottom: 35px;
}

.single-school-display{

	.school-map-image{
		display: flex;
		position: relative;
		border-radius: 20px;
		overflow: hidden;
		color: #fff;
		min-height: 120px;
	}

	.school-map-image p{
		color: #fff !important;
	}

	.school-map-image > div {
		position: absolute;
		top: 50%;
		left: 40px;
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-radius: 20px;
		padding: 20px;
	}

	h1{
		margin-bottom: 1rem !important;
	}

	.button-bar {
		gap: 10px;
		margin-bottom: 20px;
	}

	.button-bar > a{
		padding: 10px;
		padding-top: 9px !important;
		padding-bottom: 9px !important;
		color: var(--font-color-primary);
		border-radius: 10px;
		display: flex;
		gap: 5px;
		align-items: center;
		justify-content: center;
	}

}

/* School grid box */

.school-grid{

	gap: 30px;

	.school-grid-box{
		width: 300px;
		border: 1px solid var(--color-bg-foundation);
		border-radius: 15px;
		overflow: hidden;

		.button-bar-full > a{
			width: 50% !important;
			padding: 5px 0;
		}

		.school-grid-header {
			font-size: 1.5rem;
			padding: 15px;
			background: var(--color-bg-header-footer);
			color: #fff;
		}

		.school-grid-map{
			height: 200px !important;

			img{
				object-fit: cover;
			}

		}

	}

}

/* Head office display */

.head-office-display{

	& > div img {
		width: 160px;
		height: 200px;
	}

	& > div {
		gap: 20px;
		width: 500px;
	}

	.profile-icon {
		gap: 6px;
		font-size: 0.9rem;
	}

	.profile-mail::before {
		background-image: url('/wp-content/uploads/social_mail.png');
	}

	.profile-phone::before {
		background-image: url('/wp-content/uploads/social_phone.svg')
	}

	.profile-icon::before {
		width: 20px;
		height: 20px;
		display: inline-block;
		filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(106%) contrast(106%);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		content: '';
	}

	a:first-of-type {
		margin-top: 1.5rem;
	}

}

/* Show pages */

.show-archive a{
	width: 300px;
}

.single-show-display{

	.show-tags span:not(:last-child):after{
		content: " \2022";
		margin-right: 5px;
	}

	.show-tags span {
		font-style: italic;
	}

	.show-details i{
		margin-right: 9px;
		font-size: 16px;
	}

	.show-detail-item:not(:last-child){
		margin-bottom: 7px;
	}

	.ticketing {
		display: flex;
		gap: 10px;
		align-items: center;
		justify-content: flex-start;

		a {
			color: var(--text-colour) !important;
		}
	}
}

/* Single Class */

.class-logo-container{
	img{
		max-width: 500px;
	}
}

.class-logo-container-small{
	img{
		height: 60px;
	}
}

.class-list{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px;
}

/* Timetable */

.timetable-row{
	gap: 15px;
}

.type-and-age-group{
	gap: 15px;
}

/* Forms */

#contact-form .form-control,
#contact-form .form-select{
	background: var(--color-bg-accent);
	border: 0;
	border-bottom-color: currentcolor;
	border-bottom: 1px solid var(--color-font-primary);
	color: var(--color-font-primary);
	font-size: 18px;
	padding: 9px;
	border-radius: 5px;
}

#contact-form .btn {
	border: 0;
	padding: 8px 12px;
	background-color: var(--color-form-button);
}

#contact-form #message{
	height: 200px;
}

#contact-form label {
	font-weight: bold;
	margin-bottom: 8px;
}

#contact-form .form-control{
	width: 400px !important;
}

#contact-form .form-select{
	width: 300px !important;
}

/* Small Screens Styling */

.navbar {
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler-icon{
	width: 50px;
	height: 50px;
}

#navbar:after {
	content: "";
	position: absolute;
	opacity: 0;
	z-index: -1;
	top: 0;
	bottom: 0;
	right: calc(100% + 2px);
	width: 100vw;
	background: linear-gradient(270deg, black, transparent);
}

@media only screen and (min-width: 1201px){

	#navbar{
		display: flex;
		flex-direction: column;
	}
}

@media only screen and (max-width: 1200px){

	.collapsing {
		transition: none !important;
	}

	.show:after {
		opacity: 1 !important;
	}

	.navbar-collapse.collapsing {
		height: auto !important;
		transition: none !important;
	}

	.navbar-shut{
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(-100%, -50%);
		width: 60px;
		height: 60px;
		background-image: url(/wp-content/uploads/arrow_right.svg);
		background-repeat: no-repeat;
		background-color: #262626;
		background-size: 50%;
		background-position: 21px center;
		border-top-left-radius: 60px;
		border-bottom-left-radius: 60px;
		cursor: pointer;
	}

	.user-menu{
		align-items: start !important;
		flex-direction: column !important;
		gap: 0 !important;
	}

	.user-menu a{
		padding: .5rem 0 !important;
	}

	#mobile-main-menu{
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.navbar .menu .navbar-collapse{
		position: fixed;
		right: 0;
		top: 0;
		bottom: 0;
		height: 100vh;
		height: 100dvh;
		background: #111;
		border-left: 3px solid #262626;
		width: 200px;
		flex-direction: column;
		justify-content: flex-start;
		padding: 30px;
		margin: 0;
		z-index: 500;
	}

	/* 	.user-menu{
            display: none !important;
        } */
}

@media only screen and (max-width: 992px){
	.index-grid{
		div[class^='row'],
		div:not(.index-grid-header){
			grid-column: 1 / -1 !important;
		}
	}

	.logo-container{
		justify-content: center !important;
	}


}

@media only screen and (max-width: 768px){

	#nav-logo{
		width: 200px;
	}

	.single-school-display{
		.button-bar{
			justify-content: center;
		}

		.image-strip{
			flex-wrap: wrap;
		}

		.d-flex:has(img){
			flex-wrap: wrap;
			gap: 10px;
		}

		*{
			margin-left: 0;
			margin-right: 0;
		}

		div:not(.image-strip) > img {
			width: 300px !important;
		}

		.school-map-image{

			flex-direction: column;

			div{
				position: relative;
				width: 100%;
				top: 100%;
				left: 0;
				border-radius: 0;
				transform: none;
			}
		}


	}

	.school-timetable{
		.timetable-row{
			flex-direction: column;
			gap: 3px;
			margin-bottom: 9px;
		}

		.type-and-age-group{
			flex-direction: row !important;
			gap: 8px !important;
		}

	}

	.staff-bio-block{

		flex-wrap: wrap;

		> div{
			width: 100%;
		}

		img{
			width: 60%;
		}

	}

	.staff-bio-block:nth-child(2n){
		flex-direction: initial;
		text-align: left;
	}

	.dancer-section .col{
		flex-basis: 100% !important;
		margin-bottom: 5px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.head-office-display{
		width: 100% !important;
	}

}