/* @override http://localhost:8888/WebDev/Development/spin-new-now/css/main.002.css */

/* @group Notes & Vars*/

@font-face {
	font-family: 'Banco';
	src: url('../fonts/Banco.woff2') format('woff2'),
		 url('../fonts/Banco.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

:root {
	--select-border: #777;
	--select-arrow: var(--select-border);
	--spinWhite: #fff;
	--spinBlack: #272121;
	--spinGreen: #138900;
	--spinGreenDark: #164c00;
	--spinPurple: #7917bd;
	--spinPurpleDark: #00092f;
	--spinPurpleGlow: #7816bc;
	--spinBlue: #080b41;
	--spinDarkBlue: #171fbd;
	--spinLightBlue: #d6f3fe;
	--spinYellow: #ecef98;
	--purpleHover: #b068e7;
	--lightVerticalGradient: linear-gradient(180deg, rgba(51,89,117,0) 29%, rgba(24,64,105,0.5788690476190477) 44%, rgba(10,34,83,0.8253676470588236) 60%, rgba(6,25,96,0.9486169467787114) 80%, rgba(8,11,64,1) 100%);
	--logoFont: 'Banco', sans-serif;
	--swirlyFont: 'Henny Penny', cursive;
	--subLogoFont: 'Lakki Reddy', cursive;
	--HFont: 'Signika', sans-serif;
	--textFont: 'Hind', sans-serif;
	--extraWidth: calc(100vw - 12rem);
	--extraHeight: calc(100vh - 10rem);
	--linkHighlight: rgba(0, 0, 0, 0.05);
	--linkHighlightHover: rgba(0, 0, 0, 0.10);
	--headClamp: clamp(2rem, 2.3vw, 8rem);
	--sideBarWidth: 40rem;
}

/*https://inspiredwebdev.com/add-dark-mode-to-your-website/*/
/*Dark Mode Colour #717171*/

/* @end notes*/

/* @group Utility Classes */

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

.block,
.block i,
.block a {
	cursor: not-allowed !important;
	opacity: 0.8 !important;
}

.purple {
	color: var(--spinPurple);
}

.takeTheL {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	text-align: center;
	background-color: red;
	color: white;
	padding: 2rem;
	border-bottom: 1px solid black;
	font-weight: bold;
	display: none;
}

#revert {
	visibility: hidden;
}

.noDesk {
	display: none!important;
}

.hideUntilLoad {
	opacity: 0;
}

.multiContentElement, .spider, .imageFade, .siteBottomContent {
  will-change: transform, opacity;
}

/* @group Wonder CMS Over Rides */

a {
	border-bottom-style: none;
	transition: none;
}

a:hover {
	border-bottom-style: none;
}

/* @end wonder cms overrides */

@media screen and (min-aspect-ratio: 31/9) {
	
	.takeTheL {
		display: block;
	}
    
}

/* @end utility classes */

/* @group House Style */

.style {
	background-color: var(--spinGreen);
	padding: 2rem;
	border-radius: 1rem;
	border: 5px solid white;
	box-shadow: 0 2px 4px black;
}

.style > * {
	background-color: var(--spinWhite);
	padding: 2rem 2.5rem;
	border-radius: 1rem;
	box-shadow: inset 0 1px 2px var(--spinGreenDark);
	text-align: center;
	color: var(--spinPurple);
	font-weight: bold;
}

.highlight {
	color: var(--spinGreen);
	font-weight: bold;
}

.highlight strong {
	color: var(--spinPurple);
}

/* @end house style */

/* @group Text */

html {
	font: 10px/10px "Lucida Grande", Lucida, Verdana, sans-serif;
	color: var(--spinBlack);
	overflow-x: hidden!important;
	/*scroll-behavior: smooth;*/
}

body {
	font: 1.8rem / 3rem var(--textFont);
	font-weight: 100;
}

.bodyUndercover {
	background: url(../img/graphics/shapes/rep/800/rep.webp) -150px top repeat #acfbc5;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 50rem;
}

h1 {
	font: 3rem/2rem var(--logoFont);
	color: var(--spinGreen);
	text-transform: uppercase;
	text-shadow: .1rem .1rem 0rem var(--spinPurple);
	letter-spacing: 0.2rem;
}

h2, h3, h4, h5 {
	font: bold 3rem;
	margin-top: 7rem;
	margin-bottom: 1rem;
	color: var(--spinPurple);
}

p,
h2.inline {
	margin: 2rem 0;
}

ul li {
	
}

a {
	text-decoration: none;
	color: var(--spinPurple);
}

a:hover {
	color: var(--spinGreen);
}

a:active {
	
}

.atop {
	position: relative;
	z-index: 1;
}

.noTopMargin {
	margin-top: 0;
}

.centered {
	text-align: center;
}

/* @end text*/

/* @group Images */

main p > img {
	display: block;
}

img.left {
	width: 45%;
	float: left;
	margin: 0.5rem 1rem 0 0;
}

img.right {
	float: right;
	margin: 0.5rem 0 .5rem 1rem;
}

img.center {
	width: 100%;
	box-shadow: 0 0 10px #b5cdd2;
	margin: 0 auto;
}

/* @end images */



/* @group Layout */

/* @group Frame */

/*Silly thing that just covers the purple background which shone through on the side bar animation*/

#smooth-scroll {
	overflow: hidden;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
	background-color: transparent!important;
	
}

#smooth-scroll-content {
	overflow: visible;
	width: auto!important;
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
}

.siteWrap {
	position: relative;
	/*will-change: margin;*/
}

.zFix {

}

.siteWrap .sideShadow {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0px;
	width: 10px;
	box-shadow: -7px 0 6px rgba(0, 0, 0, 0.5);
}

.pageElem {
	
}

.siteTop {

}

.siteBottom {
	height: 100vh;
	overflow: hidden;
	background-color: var(--spinWhite);
	width: calc(100% - 6rem);
	position: relative;
}


header {
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	padding-bottom: 5rem;
	background-color: var(--spinWhite);
	margin-bottom: -1px; /*Fixes a fault line in Chrome*/
	overflow: hidden;
}

/*#smooth-scroll-content > * {
	will-change: transform;
}*/

/*header > * {
	display: none;
}*/

.mainFlex {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	background-color: var(--spinWhite);
	overflow: hidden;
}

main {
	padding: 0 5vw;
	position: relative;
	width: calc(100% - 6rem);
	left: -3rem;
}

aside#sideBar {
	height: 100vh;
	position: fixed;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	right: 0rem;
	width: 40rem;
	top: 0;
	opacity: 0;
	visibility: hidden;
	/*transform: translateX(var(--sideBarWidth));*/
	/*will-change: transform;*/
}

aside#sideBar::before {
	content: "";
	background: url(../img/graphics/side/back/back.webp) left top no-repeat;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.dev aside#sideBar {
	opacity: 0!important;
}

aside#sideBar::after {
	content: "";
	height: 100vh;
	width: 10rem;
	top: 0;
	background: url(../img/graphics/side/top/top.webp) left top repeat-y, url(../img/graphics/side/linesNew/linesNew.webp) left top repeat-y;
	position: absolute;
	left: -.5rem;
}

aside#linksBar {
	height: 100%;
	position: fixed;
	top: 0;
	color: white;
	display: flex;
	flex-flow: column nowrap;
	margin-left: .8rem;
	z-index: 2;
	min-width:0;
	visibility: hidden;
	opacity: 0;
	/*will-change: transform;*/
}

#cover {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	cursor: wait;
	opacity: 0;
	visibility: hidden;
	z-index: 100;
	/*background-color: var(--spinWhite);*/
}

#cover.show {
	opacity: 1;
	visibility: visible;
}

.mainMenuOpen #cover {
	left: 35rem;
	right: 0;
}

#curve {
	display: none;
}

/* @end frame */

/* @group Header */

/* @group Frame */

header .headTop {
	text-align: right;
	width: 100%;
	background: url(../img/graphics/header/park/1500/park.webp) right center no-repeat;
	background-size: cover;
	margin-bottom: -15rem;
	position: relative;
}

header .headTop img {
	object-fit: contain;
	object-position: 100% 100%;
	margin-top: 10vh;
	width: 70vw;
	max-width: 57vw!important;
	max-height: 57vh;
}

.headShape {
	position: absolute;
	top: 0;
	left: 0;
	right: 15%;
	min-width: 50rem;
	background: url(../img/graphics/header/headerSpin/logoSpin.webp) 2% 3% / 45% no-repeat, 
				url(../img/graphics/header/lines/1300/linesHeadOverlay.webp) left -10% / contain no-repeat;
	height: 100%;
	max-width: 80vw;
}

header .headTop::after {
	content: "";
	background: linear-gradient(to bottom, 
	rgba(255,255,255,0) 30%, 
	rgba(255,255,255,0.2) 50%, 
	rgba(255, 255, 255, 0.59) 60%, 
	rgba(255, 255, 255, 0.77) 70%, 
	rgba(255, 255, 255, 0.94) 80%, 
	rgba(255,255,255,1) 100%) rgba(255,255,255,0);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 30rem;
}

#curveHead {
	
}

/* @end frame */

/* @group Head Intro */

/* @group Frame */

.headIntro {
	text-align: center;
	position: relative;
	z-index: 2;
	margin-top: 10rem;
	margin-bottom: -3rem;
}

.headIntro #loadContentHead {
	max-width: 105rem;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.headIntro #loadContentHead h1 {
	font: clamp(3rem, 3vw, 3.5rem) var(--HFont);
	line-height: clamp(3rem, 2.5vw, 4.1rem);
	text-transform: none;
	text-shadow: 0 0 rgba(0, 0, 0, 0);
	letter-spacing: 1px;
}

.headIntro #loadContentHead .headNavWrapper {

}

.headIntro #loadContentHead .headNavWrapper .headerNav {
	text-transform: uppercase;
	border-radius: 10px;
	background: url(../img/graphics/shapes/blotch/626/blotch.webp) #138900;
	background-size: cover;
	background-color: var(--spinGreen);
	background-blend-mode: multiply;
	margin: 1rem 0 3rem;
	padding: .7rem 3vw;
	display: inline-block;
	z-index: 1;
	position: relative;
}


.headIntro p.inDesc {
	color: var(--spinPurple);
	font-size: clamp(2rem, 1.3vw, 2.8rem);
	line-height: clamp(3rem, 2.5vw, 4.1rem);
	margin-right: clamp(2rem, 10vw, 10rem);
	margin-left: clamp(2rem, 10vw, 10rem);
	margin-top: 0;
}

.headIntro p strong {
	font-weight: 700;
	color: var(--spinPurple);
}

.headIntro p:first-of-type a {
	font-weight: bold;
}

.headIntro p:first-of-type a:hover {
	text-decoration: underline;
}

.headIntro .down a {
	color: var(--spinPurple);
	font-size: 2rem;
	text-shadow: 0 1px 3rem var(--spinPurpleGlow);
	display: block;
	margin-top: 1rem;
}

.headIntro .down a i {
	transition: transform .5s ease-in-out 0s;
}

.headIntro .down a i:hover {
	cursor: pointer;
	transform: scale(1.3) rotate(360deg);
}

/* @end frame */

/* @group Header Nav */

.headerNav ul {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;

}

.headerNav ul li {
	list-style: none;
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	padding-top: .2rem;
}

.headerNav ul li a {
	color: white;
	position: relative;
	font-size: clamp(1.5rem, 2.6vw, 2.5rem);
	line-height: clamp(2rem, 3.5vw, 4rem);
	font-weight: bold;
	text-shadow: 0 1px 2px black;
	transition: color .3s ease-in-out 0s;
	text-transform: capitalize;
}

.headerNav ul li a.current {
	text-shadow: 0 3px 4px black;
}

.headerNav ul li:last-child::after {
	display: none;
}

.headerNav ul li::after {
	content: "";
	width: .2rem;
	flex: 1;
	align-self: stretch;
	background-color: var(--spinWhite);
	display: block;
	border-radius: 25px;
	margin: .5rem 1rem .5rem 1rem;
	border-radius: 5px;
}


.headerNav ul li:nth-of-type(2) a:hover {
	color: #fb7474;
}

.headerNav ul li:nth-of-type(3) a:hover {
	color: orange;
}

.headerNav ul li:nth-of-type(4) a:hover {
	color: #38e4e4;
}

.headerNav ul li:nth-of-type(5) a:hover{
	color: #ef56ec;
}

.headerNav ul li:nth-of-type(6) a:hover {
	color: #2adf8c;
}

.headerNav ul li:nth-of-type(7) a:hover {
	color: #f2f233;
}

.headerNav ul li.title {
	display: none;
}

/* @group Line Under The Nav */

.headerNav a:after {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out 0s;
}
 
.headerNav ul li:nth-of-type(2) a:after {
  background-color: #fb7474;
}
 
.headerNav ul li:nth-of-type(3) a:after {
  background-color: orange;
}

.headerNav ul li:nth-of-type(4) a:after {
  background-color: #38e4e4;
}

.headerNav ul li:nth-of-type(5) a:after {
  background-color: #ef56ec;
}

.headerNav ul li:nth-of-type(6) a:after {
  background-color: #2adf8c;
}

.headerNav ul li:nth-of-type(7) a:after {
  background-color: #f2f233;
}

.headerNav a:hover:after,
.headerNav a:focus:after {
  opacity: 1;
}

/* @end line under the nav */

/* @end header nav */

/* @end head intro */

/* @end header */

/* @group Main */

/* @group Articles */

main .mainContentWrap {

}

main .mainContentWrap h2 {
	font: 4rem/4.5rem var(--subLogoFont);
}

main .mainContentWrap h2.inline {
	font: normal normal 1.8rem / var(--textFont);
	float: left;
	margin: 0 .5rem 0 0;
	color: var(--spinPurple);
}

main .mainContentWrap > article:nth-of-type(1) > h2.inline {
	float: left;
	margin: -.8rem 1rem -2rem 0;
	font: 3rem var(--subLogoFont);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-image: url(../img/graphics/shapes/purple/purple.webp);
	background-size: cover;
	background-position: 20% 25%;
}

main .mainContentWrap article > h3 {
	background: linear-gradient(var(--spinPurple), black);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

main .mainContentWrap > article:nth-of-type(1) > p:nth-of-type(1) {
	color: #393636;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-image: url(../img/graphics/shapes/purple/purple.webp);
	background-size: cover;
	background-position: 50% 70%;
}

/* @end articles*/

/* @group Section Content */

main .mainContentWrap .content {
	max-width: 100rem;
	margin: 0 auto;
}

/* @end section content */


/* @group Section Banner */


.multiContentWrapper {
	margin-right: 7vw;
	margin-left: 7vw;
}

.banner > img,
.banner > picture img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-position: center center;
	object-fit: cover;
}

/* @end section banner */

/* @end main */


/* @group Main Nav */

#mainNav {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 6rem;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	overflow: hidden;
	width: 0;
}

#mainNav .navScroll {
	top: 1rem;
	bottom: 1rem;
	left: 0;
	position: absolute;
	width: 29rem;
	scrollbar-color: var(--spinWhite) transparent; /* Match the scrollbar color */
}

#mainNav .navScroll::-webkit-scrollbar-thumb {
	background-color: var(--spinWhite); /* Match the scrollbar thumb color */
}

#mainNav .navScroll ul {
	padding: 4rem 4rem 1rem;
	margin-right: 3rem;
	flex: 1;
	width: 100%;
}

#mainNav .navScroll > ul:first-of-type {
	padding-top: 0;
}

#mainNav .navScroll ul li {
	list-style: none;
}

#mainNav .navScroll ul li a {
	color: #d4d1d1;
	background-color: rgba(245, 244, 245, 0);
	width: 100%;
	display: block;
	border-radius: 5px;
	padding: 1rem .3rem .3rem;
	transition: padding .3s ease-in-out 0s,
				background .3s ease-in-out 0s,
				color .3s ease-in-out 0s;
	text-transform: lowercase;
}

#mainNav .navScroll ul li a:hover {
	padding-left: 1rem;
	color: white;
	background: rgb(0,0,0);
	background: linear-gradient(90deg, rgba(0,0,0,0.20211834733893552) 20%, rgba(0,0,0,0.10407913165266103) 40%, rgba(6,25,96,0) 60%);
}

#mainNav .navScroll ul li.title {
	color: #f5f4f5;
	font: 3rem var(--subLogoFont);
	/*color: var(--spinPurple);*/
	/*border-bottom: 1px solid var(--spinGreen);*/
	margin-bottom: 0rem;
	text-shadow: 3px 3px 3px black;
	letter-spacing: 1px;
	margin-top: 1rem;
}

#mainNav .navScroll ul:first-of-type li.title:first-of-type {
	margin-top: -.3rem;
}

/* @end main nav */

/* @group Footer */

footer {
	width: 100%;
	background-color: var(--spinGreen);
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: flex-end;
	padding-bottom: 1rem;
	position: relative;
	margin-left: -6rem;
}

footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: .5rem;
	bottom: .5rem;
	background-color: rgba(0, 0, 0, 0.55);
}

footer p {
	color: white;
	margin: 0;
}

footer .footLogo {
	font: normal 6rem/3rem var(--logoFont);
	font-weight: 100;
	color: var(--spinYellow);
	transform: scaleY(1.3);
	letter-spacing: .2rem;
	text-shadow: .2rem -.2rem 0 var(--spinPurple);
	margin: 3rem 1rem 2.5rem;
}

footer .footContact {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-end;
	align-content: flex-end;
	margin-right: 2rem;
}

footer .footContact p {
	font-size: 2rem;
	font-weight: bold;
}

footer .footContact a {
	margin-left: 2rem;
	font-size: 1.7rem;
	display: inline-block;
	border-radius: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	transform: translateY(-.5rem);
	color: white;
	border-style: solid;
	border-width: 1px;
	width: 3rem;
	height: 3rem;
	transition: transform .3s ease-in-out 0s;
	position: relative;
    text-decoration: none;
}

footer .footContact a:hover {
	box-shadow: 2px 2px 5px black;
	transform: scale(1.2) translateY(-1rem);
}

footer .footLinks a {
	background-color: var(--spinPurple);
}

footer .footContact a::after {
    content: attr(data-tooltip);
    position: absolute;
    opacity: 0;
    background-color: var(--spinPurple);
    color: #fff;
    padding: .5rem 1rem;
    border-radius: 10%;
    white-space: nowrap;
    font-size: 1.2rem;
    transition: opacity 0.3s, transform 0.3s;
    transform: translateY(1rem);
    pointer-events: none;
    z-index: 100;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
	box-shadow: 0 1px 5px black;
}

footer .footContact a:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* @end footer */

/* @group Links Bar */

/* @group Frame */

#linksBar .extraTop {
}

#linksBar .extraBottom {
	flex: 1;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-end;
	align-items: center;
}

#linksBar .extraArrows {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	padding: 1rem 0 1rem;
	border-top-style: dotted;
	border-top-width: 1px;
	margin-top: 1rem;
}

/* @end frame */

/* @group Elements */

#linksBar div {
	width: 4.5rem;
}

#linksBar div div {
	
}

#linksBar div div a {
	color: white;
	text-align: center;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
/*	visibility: hidden;
	opacity: 0;*/
	position: relative;
	width: 100%;
}

#linksBar div div a i {
	cursor: pointer;
	font-weight: 600;
	font-size: 2rem;
	margin-top: 1rem;
}

#linksBar div div i.closeNav {
	display: none;
}

.mainMenuOpen #linksBar div div a i.openNav {
	display: none;
}

.mainMenuOpen #linksBar div div a i.closeNav {
	display: block;
}

#linksBar div div a span {
	font-size: 1.1rem;
	display: block;
	width: 100%;
	text-align: center;
	font-weight: bold;
}

#linksBar .extraBottom .bottomExtraLink {
	border-radius: 0rem 5rem 5rem 0rem;
	height: 5rem;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	margin-bottom: 0vh;
	text-transform: lowercase;
	border: 2px solid transparent;
}

#linksBar .extraBottom .bottomExtraLink > a span {
	color: rgba(255, 255, 255, 0);
}

/* @end elements*/

/* @group Tools */

.hideTools {
	display: none;
}

.tools {
	position: fixed;
	top: 1rem;
	left: 7rem;
	width: 20rem;
	background: radial-gradient(ellipse farthest-corner, var(--spinPurple) 0%, var(--spinPurpleDark) 100%) var(--spinPurple);
	border-radius: 10px;
	overflow: hidden;
	color: white;
	padding: 1rem 1rem 0;
	text-align: center;
	box-shadow: 10px 10px 20px black;
	opacity: 0;
}

.tools br {
	display: none;
}

.tools > div span {
	font-size: 1.2rem;
	background-color: var(--spinPurpleDark);
	padding: 1rem;
	line-height: 1.3rem;
	border-radius: 10px;
	box-shadow: 0 1px 2px black;
	transition: box-shadow .3s ease-in-out 0s, color .3s ease-in-out 0s;
	cursor: pointer;
	text-shadow: 0 1px 2px black;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tools > div span:hover {
	box-shadow: 0 0px 0px black;
	color: silver;
}

.tools > div span:active {
	background-color: #400f64;
}


.tools > div span i.iconTop {
	font-size: 2rem;
	display: block;
	margin-bottom: 1rem;
}

.tools .toolsGridTop {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	justify-content: center;
	align-content: center;
}

.tools .toolsGridBottom {
	margin-top: 2rem;
	margin-left: 1rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	margin-right: 1rem;
	position: relative;
}

.tools .toolsGridBottom::after {
	content: "";
	right: 0;
	left: 0;
	height: 2px;
	background-color: var(--spinPurpleDark);
	position: absolute;
	top: -1.1rem;
}

.tools .toolsGridBottom a {
	flex: 1;
	margin-right: 2rem;
	border-bottom: 2px solid var(--spinPurpleDark);
	position: relative;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tools .toolsGridBottom a::after {
	content: "";
	border-bottom: 2px solid var(--spinPurpleDark);
	position: absolute;
	bottom: .3rem;
	right: 0;
	left: 0;
}

.nl .tools .toolsGridBottom .enLang,
.en .tools .toolsGridBottom .nlLang {
	opacity: 0.6;
}

.tools .toolsGridBottom a:hover {
	opacity: 1!important;
}

.tools .toolsGridBottom a:hover::after {
	border-bottom: 2px solid var(--spinGreen);
}

.tools .toolsGridBottom a:last-of-type {
	margin-right: 0;
}

.tools .toolsGridBottom a svg {
	border-radius: 10px;
}

/* @end tools */

/* @end links bar */

/* @group Side Bar */

/* @group Frame */

#sideBar .sideBarContent {
	height: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	position: relative;
	width: 70%;
	margin-left: 7.5%;
}

#sideBar .sideBarContent > div {
	width: 100%;
	position: relative;
}

#sideBar .sideBarContent .sideLogo {
	text-align: center;
}

#sideBar .sideBarContent .datesWrap {
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	align-items: flex-start;
	padding-left: .3rem;
}

#sideBar .sideBarContent .sidePromoHeadlinesWrap  {
	flex: 1;
	padding-left: .3rem;
}

#sideBar .sideBarContent .sideGal {
	border: 2px solid var(--spinGreen);
	padding-top: 2rem;
	border-right-style: none;
	border-left-style: none;
	margin-top: 3rem;
	padding-bottom: 1rem;
}

#sideBar .sideBarContent .sideSocial {
	width: 100%;
	position: relative;
}

#sideBar .sideBarContent .sideEnquiry {
	background-color: var(--spinPurple);
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	height: 4rem;
	width: 100%;
	margin-bottom: 2rem;
	border-radius: 5px;
}

#sideBar .sideBarContent .smallSideTitle {
	font: normal 2rem/0 var(--subLogoFont);
	padding: 2rem 1rem 1rem 0;
	color: var(--spinGreen);
}

#sideBar .sideBarContent .subTitle.top {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

#sideBar .sideBarContent .subTitle.bottom {
	margin-top: 3rem;
	margin-bottom: 1.5rem;
}

/* @end frame */

/* @group Side Logo */

#sideBar .sideBarContent .sideLogo .sideLogoPic {
	font: normal 6rem/3rem var(--logoFont);
	font-weight: 100;
	color: var(--spinGreen);
	transform: scaleY(1.3);
	letter-spacing: .2rem;
	text-shadow: .2rem -.2rem 0 var(--spinYellow);
	margin: 3rem 0 2.5rem;
}

#sideBar .sideBarContent .subTitle {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-end;
	font-size: 2.2rem;
}

#sideBar .sideBarContent .subTitle span:nth-of-type(1) {
	font-family: var(--subLogoFont);
	color: var(--spinGreen);
	margin: 0 1rem 0 0;
	line-height: 0;
}

#sideBar .sideBarContent .subTitle span:nth-of-type(2) {
	flex: 1;
	background-color: var(--spinGreen);
	height: 1rem;
	flex: 1;
	border-radius: 0 10px 10px 0;
	margin-right: -.5rem;
}

/* @end side logo */

/* @group Side Dates */

#sideBar .sideBarContent .datesWrap > div {
	text-align: left;
}

#sideBar .sideBarContent .datesWrap > div .dates {
	
}

#sideBar .sideBarContent .datesWrap > div .dates .workDateTop {
	display: block;
	color: var(--spinPurple);
	font: 1.7rem var(--HFont);
	margin-bottom: -.3rem;
}

#sideBar .sideBarContent .datesWrap > div .dates:hover .workDateTop {
	color: var(--spinPurpleDark);
}

#sideBar .sideBarContent .datesWrap > div .dates .workDateTop .title {
	
}

#sideBar .sideBarContent .datesWrap > div .dates .workDateTop .when {
	
}

#sideBar .sideBarContent .datesWrap > div .dates .workDateBottom {
	color: var(--spinGreen);
	font: 1.4rem var(--HFont);
	line-height: 2.5rem;
}



#sideBar .sideBarContent .datesWrap > div .dates .where {

}



/* @end side dates */

/* @group Side Gallery */


.sideGal {
	width: 100%;
	overflow: hidden;
}

.sideGal .sideGalScroller {
	width: calc(100% + 1.5rem);
	height: calc(100% - 1rem);
	transition: width .3s ease-in-out 0s;
}

.sideGal:hover .sideGalScroller {
	width: calc(100%);
}

.sideGal .sideGalScroller .sideGalContent {
	width: calc(100% - 1rem);
	display: grid;
	grid-template-columns: repeat(3, 1fr); 
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	padding-bottom: 0rem;
	perspective: 100px;
	/*filter: grayscale(50%);*/
}

.sideGal .sideGalScroller .sideGalContent:hover {
	/*filter: grayscale(0%);*/
}

.sideGal .sideGalScroller .sideGalContent a {
	width: 100%;
	height: 100%;
	margin-right: 1rem;
	background: #ffffff;
	border-radius: 5px;
	counter-increment: carousel-cell;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	border: 1px solid var(--spinPurple);
	border-radius: 5px;
}

.sideGal .sideGalScroller .sideGalContent a:hover {
	border: 1px solid var(--spinGreen);
	padding: 0;
	margin: 0;
	line-height: 0;
	font-size: 0;
}

.sideGal .sideGalScroller .sideGalContent a picture {
	height: 100%;
	width: 100%;
}


.sideGal .sideGalScroller .sideGalContent a img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 5px;
	transition: all .3s ease-in-out 0s;
	display: block;
}

.sideGal .sideGalScroller .sideGalContent a img:hover {
	transform: scale(0.9);
}

/* @end side gallery */

/* @group Side Promo Headlines */

.sidePromoHeadlinesWrap .sidePromoHeadlines .headlines {
	
}

.sidePromoHeadlinesWrap .sidePromoHeadlines .headlines span {
	
}

.sidePromoHeadlinesWrap .sidePromoHeadlines .headlines span .card {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
}

.sidePromoHeadlinesWrap .sidePromoHeadlines .headlines span .card h3 {
	line-height: 2rem;
	font: normal normal 1.6rem var(--HFont);
	margin-bottom: 0;
	order: 1;
	margin-top: 1rem;
	cursor: pointer;
	position: relative;
}

.sidePromoHeadlinesWrap .sidePromoHeadlines .headlines span .card h3::before {
	content: "";
	width: 1rem;
	height: 1rem;
	background-color: var(--spinGreen);
	display: inline-block;
	margin-right: 1rem;
	border-radius: 100%;
}

.sidePromoHeadlinesWrap .sidePromoHeadlines .headlines span .card h3:hover {
	color: var(--spinPurpleDark);
}

.sidePromoHeadlinesWrap .sidePromoHeadlines .headlines span .card .meta {
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 2.5rem;
	color: var(--spinGreen);
	display: none;
}

.sidePromoHeadlinesWrap .sidePromoHeadlines .headlines span .card .description {
	display: none;
}

/* @end side promo headlines */

/* @group Blog Side Pop */

.blogPopWrap {
	display: flex;
	position: absolute;
	right: 100%;
	top: 0;
	bottom: 0;
	width: calc(100vw - 40rem);
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: center;
	align-content: center;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.35);
	opacity: 0;
	visibility: hidden;
	-webkit-backdrop-filter: blur(4px);
}

.blogPopWrap .blogPop {
	background-color: var(--spinWhite);
	height: 70vh;
	width: 50vw;
	margin-right: 3rem;
	border-radius: 20px;
	box-shadow: 0 0 10px black;
	border: 1px solid var(--spinGreen);
	position: relative;
	border-top-width: 10px;
	border-bottom-width: 10px;
	transform-origin: 100% 50%;
}

.blogPopWrap .blogPop .blogArticleWrap {
	position: absolute;
	top: 0rem;
	bottom: 0rem;
	right: 0rem;
	left: 0rem;
	padding-right: 5rem;
	padding-left: 5rem;
}

.blogPopWrap .blogPop h1 {
	margin-top: 2rem;
}

.blogPopWrap .blogPop .text-left a {
	display: none;
}

.closeBlogSide {
	width: 3.5rem;
	height: 3.5rem;
	background-color: red;
	font-size: 3rem;
	color: white;
	border-radius: 100%;
	box-shadow: 0 1px 2px black;
	position: absolute;
	top: -2rem;
	left: -1rem;
	cursor: pointer;
}

.closeBlogSide:hover {
	color: red;
	background-color: var(--spinWhite);
}


/* @end blog pop up*/

/* @group Side Social */

/* @group Frame */

.sideSocial .socialMediaPages {
	text-align: center;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.sideSocial .socialMediaPages > div {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	margin: 2rem 1rem 0;
	position: relative;
}

/* @end frame*/

/* @group Social Media Pages */

#sideBar .sideBarContent .sideSocial .socialMediaPages p {
	
}

#sideBar .sideBarContent .sideSocial .socialMediaPages .socialTitle {
	font-weight: normal;
	margin-right: .5rem;
	margin-left: 2rem;
	position: absolute;
	top: -2.5rem;
	left: .3rem;
	font-size: 1.4rem;
	text-transform: lowercase;
	font-style: normal;
}

#sideBar .sideBarContent .sideSocial .socialMediaPages .socialTitle:nth-of-type(1) {
	margin-left: 0rem;
}

#sideBar .sideBarContent .sideSocial .socialMediaPages .socialTitle .socialSVG {
	width: 100px;
	height: 100px;
	font-size: 1.3rem;
	transform: rotate(30deg);
	position: absolute;
	left: -2rem;
	top: -2rem;
}

#sideBar .sideBarContent .sideSocial .socialMediaPages .socialTitle .socialSVG {
	color: var(--spinPurple);
	fill: currentColor
}

#sideBar .sideBarContent .sideSocial .socialMediaPages .shareContent .socialTitle .socialSVG {
	left: -2.1rem;
	top: -2rem;
	transform: rotate(30deg);
}

#sideBar .sideBarContent .sideSocial .socialMediaPages a {
	margin-left: .5rem;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	border-radius: 2rem;
	width: 3.2rem;
	height: 3.2rem;
	position: relative;
	z-index: 5;
}

#sideBar .sideBarContent .sideSocial .socialMediaPages a i {
	font-size: 1.5rem;
	display: block;
	color: white;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}

/* @end social media pages*/

/* @end side social*/

/* @group Side Enquiry */

#sideBar .sideBarContent .sideEnquiry a {
	font: 1.8rem/4rem var(--HFont);
	color: white;
	text-transform: uppercase;
	text-align: center;
}

/* @end side enquiry*/

/* @end side info */

/* @group Site Bottom */

/* @group Frame */

.siteBottom {
	height: 100vh;
	width: calc(100% - 5rem)
}

.siteBottom .siteBottomContent {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	height: 100vh;
	will-change: transform, filter;
	width: 100%;
}

.siteBottom .siteBottomContent .siteBottom-Top {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	flex: 3;
	position: relative;
	background: url(../img/graphics/shapes/lines/1500/lines.webp) rgb(255, 255, 255);
	background-size: 100%;
	background-position: center center;
	width: 100%;
}

.siteBottom .siteBottomContent .siteBottom-Bottom {
	background-color: var(--spinGreen);
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-end;
	padding: 1rem 4rem 2rem;
	color: white;
	font-weight: bold;
	text-shadow: 0 1px 2px black;
	width: 100%;
	box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.8);
	z-index: 1;
}

.siteBottom .siteBottomContent #credit {
	background-color: var(--spinPurple);
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	padding: .5rem 2rem;
	color: white;
	position: relative;
	z-index: 1;
}

/* @end frame */

/* @group Site Bottom Spiders */

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

	.spidersWrap {
		flex: 2;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
		align-items: flex-start;
		align-content: center;
		height: 50vh;
		max-width: 150rem;
		margin: 0 auto;
	}
		
	.spidersWrap .spider {
		flex: 1;
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
		margin: 0 3rem;
		/*will-change: transform;*/
	}
		
	.spidersWrap .spider .thread {
		flex: 1;
		background-color: var(--spinBlack);
		width: 4px;
		position: relative;
	}
		
	.spidersWrap .spider .spinHead {
		background: url(../img/graphics/footSpin/topSpin.webp) center bottom no-repeat;
		position: absolute;
		top: -40px;
		height: 67px;
		right: 0;
		left: 0;
	}
		
	.spidersWrap .spider .spiderWrap {
		position: relative;
	}
		
	.spidersWrap .spider .spiderWrap .character {
		background-color: var(--spinPurple);
		position: relative;
		border-radius: 5px / 100px;
		display: block;
		padding-bottom: .3rem;
		padding-right: 1rem;
		padding-left: 1rem;
		transition: transform .3s ease-in-out, background .3s ease-in-out;
	}
		
	.spidersWrap .spider .spiderWrap .character:hover {
		transform: translateY(-5px);
		background-color: var(--spinPurpleDark);
	}
	
	.spidersWrap .spider .spiderWrap .character::after,
	.spidersWrap .spider .spiderWrap .character::before {
		content: "";
		width: 6px;
		height: 33px;
		position: absolute;
		top: 2rem;
	}
		
	.spidersWrap .spider .spiderWrap .character::after {
		background: url(../img/graphics/footSpin/leftSpin.webp) left center no-repeat;
		left: -3px;
	}
		
	.spidersWrap .spider .spiderWrap .character::before {
		content: "";
		background: url(../img/graphics/footSpin/rightSpin.webp) left center no-repeat;
		right: -3px;
	}
		
	.spidersWrap .spider .spiderWrap .character h4 {
		color: white;
		margin: 0;
		text-align: center;
		font: 2.5rem var(--subLogoFont);
		padding-top: 2rem;
	}
		
	.spidersWrap .spider .spiderWrap .character span {
		margin: 0 1rem 1rem;
		display: block;
		color: white;
		text-align: center;
		font-size: 1.6rem;
		line-height: 2.5rem;
	}
		
	.spidersWrap .spider:nth-of-type(1) {
		height: 80%;
	}
	
	.spidersWrap .spider:nth-of-type(2) {
		height: 100%;
	}
		
	.spidersWrap .spider:nth-of-type(3) {
		height: 80%;
	}
		
	.spidersWrap .spider:nth-of-type(4) {
		height: 100%;
	}
		
	.spidersWrap .spider:nth-of-type(5) {
		height: 80%;
	}
	
	
}

/* @end site bottom spiders */

/* @group Footer Bottom */

/* @group Foot Pic Wrap */

.siteBottom-Bottom .footPicWrap {
	width: 31rem;
	height: 40rem;
	background-color: var(--spinWhite);
	position: relative;
	align-self: flex-end;
	border: 5px solid var(--spinGreen);
	border-radius: 10px 10px 0 0;
	border-bottom-style: none;
	margin-bottom: -3rem;
	margin-top: -10rem;
	padding: .5rem;
	overflow: hidden;
}

.siteBottom-Bottom .footPicWrap img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

/* @end foot pic wrap */

/* @group Social Buttons */

.siteBottom-Bottom .socialBtnsWrap {
	margin-left: 4rem;
	padding-left: 2rem;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	border: 3px dotted rgba(255, 255, 255, 0.06);
	margin-right: 1%;
	padding-right: 1%;
	border-top-style: none;
	border-bottom-style: none;
}

.siteBottom-Bottom .socialBtnsWrap a {
	color: white;
	font-size: 3.2rem;
	width: 5rem;
	height: 5rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	border-radius: 10px;
	margin-top: 1.3rem;
}

.siteBottom-Bottom .socialBtnsWrap a:first-child {
	margin-top: 0;
	margin-bottom: 0;
}

/* @end social buttons */

/* @group Address */

.siteBottom-Bottom .address {
	padding-left: 2rem;
}

.siteBottom-Bottom .address p {
	color: white;
	font-weight: bold;
	text-shadow: 0 1px 2px black;
	margin-top: 0;
	margin-bottom: 0;
}

.siteBottom-Bottom .address p i {
	width: 2rem;
	height: 2rem;
	border-radius: 100%;
	display: inline-flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	font-size: 1.4rem;
	position: relative;
	top: -0.1rem;
	color: #e3e2e2;
}

.siteBottom-Bottom .address p a {
	text-shadow: none;
	font-weight: normal;
	font-style: normal;
	color: #f9e50e;
}

.siteBottom-Bottom .address p a:hover {
	text-decoration: underline;
}

/* @end address */

/* @group Visit Us */

.visitUs {
	flex: 1;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-end;
}

.visitUs h4 {
	text-shadow: 0px 0px 10px white;
	color: var(--spinPurple);
	font-size: 2.5rem;
	margin-top: 0;
	margin-bottom: 2rem;
	text-transform: capitalize;
}

.visitUs > div {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-end;
}

.visitUs > div span {
	
}

.visitUs > div a {
	text-shadow: none;
	margin: 0;
	padding: 0;
	float: right;
	text-align: right;
	color: #f9e50e;
}

/* @end visit us*/

/* @end footer bottom */

/* @group Credit */

#credit .credit {
	flex: 1;
}

#credit .privacy {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}

#credit .splitter {
	margin-right: 1.5rem;
	margin-left: 1.5rem;
}

#credit .credit a,
#credit .privacy a {
	color: #ecebeb;
}

#credit .credit a:hover,
#credit .privacy a:hover {
	text-decoration: underline;
}

/* @end credit */

/* @end site bottom */

/* @group Extras Pop */

/* @group Pop Shell */

#popInto {

}

.extrasPop {
	position: fixed;
	top: 0px;
	bottom: 0px;
	right: 0px;
	left: 0rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	z-index: 5;
	background-color: rgba(0, 0, 0, 0.65);
	visibility: hidden;
	backdrop-filter: blur(10px);
}

.extrasPop .extrasContent {
	max-width: 1500px;
	background: url(../img/graphics/shapes/lines/1500/lines.webp) white;
	border-radius: 20px;
	padding: 0 3rem 5rem 5rem;
	width: 90vw;
	height: 90vh;
}

.extrasPop .extrasContent::before {
	content: "";
	position: absolute;
	inset: 1rem;
	border-radius: 20px;
	border: 2px solid var(--spinGreen);
}

.extrasPop .closePopExtras {
	position: absolute;
	top: -1rem;
	right: -1rem;
	background-color: red;
	width: 5rem;
	height: 5rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	color: white;
	font-weight: bold;
	border-radius: 100%;
	z-index: 6;
	border: 1px solid black;
	font-size: 3rem;
	padding-top: .5rem;
	box-shadow: 0 1px 5px black;
	cursor: pointer;
	transition: font-size .3s ease-in-out 0s, box-shadow .3s ease-in-out 0s, background-color .3s ease-in-out 0s;
}

.extrasPop .closePopExtras:hover {
	font-size: 2rem;
	padding-top: .5rem;
	box-shadow: 0 1px 10px black;
	background-color: green;
}

/* @end pop shell */

/* @group Extras Box */

/* @group Frame */

.extrasBox {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: center;
}

.extrasBox nav {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: calc(100% - 3.5rem);
	padding: 2rem 0rem 1rem 1rem;
}

.extrasBox .switchBoxScroll {
	width: 100%;
	flex: 1;
	position: relative;
	z-index: 3;
}

/* @end frame */

/* @group Nav */

.extrasBox nav a {
	padding: 1.2rem 1.5rem 0;
	font: normal 2.3rem/3.2rem var(--subLogoFont);
	color: var(--spinPurple);
	text-align: center;
	position: relative;
	margin-right: 1rem;
	margin-left: 1rem;
}

.extrasBox nav a::after {
	content: "";
	background-color: var(--spinPurple);
	width: 1rem;
	height: 1rem;
	position: absolute;
	border-radius: 100%;
	left: -1.7rem;
	top: 1.7rem;
}

.extrasBox nav a:first-of-type::after {
	display: none;
}

.extrasBox nav a.current,
.extrasBox nav a:hover {
	color: var(--spinGreen);

}

.extrasBox nav a:first-child {
	border-radius: 10px 0px 0px 0px;
}

.extrasBox nav a:last-child {
	border-radius: 0px 10px 0px 0px;
}

/* @end nav */

/* @group Extras Title */

.extrasTitle {
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	text-transform: uppercase;
	width: calc(100% - 3rem);
}

.extrasTitle .left,
.extrasTitle .right {
	height: 1.5rem;
	background-color: var(--spinPurple);
	flex: 1;
	border-radius: 20px 0 0 20px;
}

.extrasTitle .right {
	border-radius: 0px 20px 20px 0px;
}

.extrasTitle .middle {
	margin-right: 1rem;
	margin-left: 1rem;
}

/* @end extras title */

/* @group Extras Box Content */

.extrasBox .switchBoxScroll .switchBoxContent {
	display: none;
}

.extrasBox .switchBoxScroll .switchBoxContent.current {
	display: block;
}

/* @end extras box content */

/* @end extras box*/

/* @group Extras Content */

/* @group Galerij */

.filterControl {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: center;
	position: fixed;
	z-index: 300;
	background-color: var(--spinPurple);
	border-radius: 5px;
	padding: .7rem;
	box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.88);
	left: 6rem;
	color: white;
	font-weight: bold;
	text-transform: uppercase;
	bottom: 6rem;
}

.filterControl .filterTitle {
	width: 100%;
	font-size: 1.7rem;
}

.filterControl .filterButtons {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	background-color: var(--spinGreen);
	border-radius: 5px;
}

.filterControl .filterButtons button {
	border-style: none;
	border-radius: 5px;
	padding: .5rem;
	text-transform: lowercase;
	color: white;
	font-weight: bold;
	font-size: 1.7rem;
	line-height: 1.2rem;
	cursor: pointer;
	background-color: transparent;
	margin-left: .3rem;
	margin-right: .3rem;
}

.filterControl .filterButtons button:hover,
.filterControl .filterButtons button.active {
	background-color: red;
}

.filterControl .filterButtons .splitter {
	margin-right: .5rem;
	margin-left: .5rem;
	color: var(--spinPurple);
}

.gallery {

}

.grid {
	width: calc(100% - 1rem);
	margin-left: -2rem;
}

.grid-item {
  float: left;
  width: 20%;
  line-height:0;
  aspect-ratio: 1 / 1;
}

.grid-item img {
	width: calc(100% - 2rem);
	height: calc(100% - 2rem);
	object-position: center center;
	object-fit: cover;
	border-radius: 5px;
	margin: 2rem 2rem 0;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.75);
}

.grid-item.big {
	width: 40%;
	aspect-ratio: 1 / 1;
}

/* @end galerij */

/* @group Blog */

.blogIndex {
	margin-bottom: 5rem;
	margin-right: 5rem;
	margin-left: 2rem;
}

.blogArticle {
	visibility: hidden;
	opacity: 0;
	display: none;
}

.blogBack {
	display: none;
	flex-flow: column nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	color: var(--spinGreen);
	font-weight: bold;
	text-transform: lowercase;
	cursor: pointer;
}

.blogDivider {
	height: .5rem;
	background-color: var(--spinPurple);
	border-radius: 10px;
	width: calc(100% - 3rem);
	margin: 3rem 0 5rem;
	position: relative;
}

.blogBack:hover,
.blogBack:hover i {
	color: var(--spinPurpleDark);
}

.blogBack.top {
	position: absolute;
	top: -1.3rem;
	left: -4.8rem;
}

.blogBack i {
	margin-right: 1rem;
	margin-left: 1rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	background-color: var(--spinWhite);
	color: var(--spinPurple);
	font-size: 3rem;
	text-shadow: 0 1px 2px black;
	margin-bottom: 1rem;
}

.backToAllBlogPosts {
	display: none;
}

.blogLoadContent #mainBlogWrap .text-left {
	display: none;
}

/* @end blog */

/* @group Reviews */

.facebookReviews {
	width: calc(100% - 2rem);
}

/* @end reviews */

/* @group Media */

.mediaWrap {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}

.mediaWrap .download {
	flex: 1;
	align-self: stretch;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	margin: 1rem;
	box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.57);
}

.mediaWrap .download > div {
	flex: 1;
	border: 1px solid var(--spinPurple);
	width: 100%;
}	

.mediaWrap .download > div img {
	width: 100%;
	height: 20rem;
	object-fit: contain;
	object-position: center center;
	filter: grayscale(100%);
}

.mediaWrap .download > div > span {
	width: 100%;
	display: block;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	background-color: var(--spinGreen);
	color: white;
}

.mediaWrap .download > div div {
	background-color: var(--spinPurple);
	color: white;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	padding-right: 1rem;
	padding-left: 1rem;
}

.mediaWrap .download > div div i {
	margin-right: .5rem;
	margin-left: .5rem;
	flex: 1;
}

.mediaWrap .download > div div .downloadLinks {
	padding-top: .5rem;
}

.mediaWrap .download > div div .downloadLinks a {
	color: white;
}

.mediaWrap .download > div div .downloadLinks a:hover {
	text-decoration: underline;
}

.mediaWrap .download > div div .downloadLinks a span {
	margin-right: 1rem;
	margin-left: 1rem;
}				

/* @end media*/

/* @group Winkel */

.winkelPop {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}

.winkelPop img {
	display: block;
	width: 40rem;
}

/* @end winkel */

/* @end extras content*/

/* @end extras pop */

/* @group Blog */

/* @group Frame */

#mainBlogWrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
	grid-column-gap: 4rem;
	grid-row-gap: 3rem;
	padding-top: 2rem;
	padding-bottom: 10rem;
	margin-bottom: 5rem;
	max-width: 100rem;
	margin: 0 auto;
	position: relative;
}

#mainBlogWrap .card {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	position: relative;
}

#mainBlogWrap .text-left {
	position: absolute;
	bottom: 2rem;
	width: 100%;
	text-align: center;
	font-size: 2rem;
}

#mainBlogWrap .text-left a {
	color: var(--spinPurple);
}

#mainBlogWrap .text-left:hover a {
	color: var(--spinGreen);
}

#mainBlogWrap > form {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	text-align: center;
}

#mainBlogWrap > form h1 {
	margin-bottom: 2rem;
}

#mainBlogWrap > form input {
	border: 1px solid purple;
	border-radius: 10px;
	padding: .7rem;
}

#mainBlogWrap > form button.wbtn {
	border: 1px solid purple;
	border-radius: 10px;
	padding: .7rem 2rem;
	background-color: var(--spinPurple);
	color: white;
	cursor: pointer;
}

#mainBlogWrap > form button.wbtn:hover {
	background-color: var(--spinGreen);
}

#mainBlogWrap .note-editor.note-frame {
	width: 100%;
}

/* @end frame */

/* @group Blog Cards */

#mainBlogWrap .card > * {
	border: 2px solid var(--spinPurpleDark);
	transition: all .3s ease-in-out 0s;
}

#mainBlogWrap .card h3 {
	margin: 2rem 0 0;
	width: 100%;
	background-color: var(--spinPurple);
	color: white;
	padding: 1rem 6rem .5rem 1rem;
	z-index: 1;
	transform: rotate(-2deg);
}

#mainBlogWrap .card .meta {
	flex: 1;
	position: absolute;
	right: .5rem;
	top: .5rem;
	text-align: right;
	display: inline-block;
	padding: 1rem;
	line-height: 0;
	background-color: var(--spinWhite);
	color: var(--spinBlack);
	z-index: 1;
	transform: rotate(10deg);
}

#mainBlogWrap .card .description {
	font-size: 1.7rem;
	background-color: var(--spinGreen);
	padding: 3rem 1rem 1rem;
	line-height: 2.3rem;
	color: white;
	width: 100%;
	margin: 0!important;
	transform: rotate(2deg) translate(2rem, -1.5rem);
}

#mainBlogWrap .card:hover h3,
#mainBlogWrap .card:hover .meta,
#mainBlogWrap .card:hover .description {
	transform: rotate(0deg) translate(0rem, 0rem);
}

#mainBlogWrap .card:active h3 {
	background-color: var(--spinPurpleDark);
}

/* @end blog cards */

/* @group Blog Posts */

#mainBlogWrap .post {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	color: #2f2b2b;
}

#mainBlogWrap .post h1 {
	font-family: var(--swirlyFont);
	color: var(--spinPurple);
	margin-bottom: 0;
	letter-spacing: 5px;
	line-height: 5rem;
	text-align: center;
}

#mainBlogWrap .post .body {
	color: #2f2b2b;
}

#mainBlogWrap .post .body img {
	width: 100%;
}

#mainBlogWrap .post .meta {
	color: var(--spinGreen);
	font-weight: bold;
}

#mainBlogWrap .post img {
	max-width: 100%;
	display: block;
}

/* @end blog posts */

/* @end blog */

/* @group Form */
	
/* @group Frame */
	
.formWrapperBack {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 102;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: flex-start;
	background-image: url(../img/graphics/shapes/formBack/formBack.webp);
	background-size: cover;
	scrollbar-width: thin;
	scrollbar-color: var(--spinPurple) transparent;
	overscroll-behavior: none;
	overflow: auto;
	display: none;
}

/* Works on Chrome/Edge/Safari */
.formWrapperBack::-webkit-scrollbar-track {
	display: none;
}

.formWrapperBack::-webkit-scrollbar {
	width: 8px;
}

.formWrapperBack::-webkit-scrollbar-thumb {
	background-color: var(--spinWhite);
	border-radius: 20px;
	transition: all 1s ease-in-out 0s;
}

.formWrapperBack .contactWrap {
	height: 100%;
	width: calc(100% + 18px);
	max-width: 120rem;
	font: 1.9rem var(--HFont);
}
	
.formWrapperBack .contactWrap .contactForm {
	padding: 5rem;
	min-height: 100vh;
}

/*.formWrapperBack .contactWrap .formNoticesWrap {
	height: 0rem;
	overflow: hidden;
}*/

.closeForm {
	position: fixed;
	right: 2em;
	top: 2rem;
	background-color: red;
	border-radius: 100%;
	color: white;
	cursor: pointer;
	box-shadow: 0 1px 2px black;
	z-index: 103;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	width: 4rem;
	height: 4rem;
	visibility: hidden;
}

.closeForm:hover {
	background-color: green;
}

.closeForm:active {
	background-color: var(--spinPurpleDark);
}


.closeForm i {
	font-weight: bold;
	font-size: 3rem;
}

.bookBack {
    position: fixed;
    width: 0rem;
    height: 0rem;
    border-radius: 1000rem;
}

.bookBack1 {
	background-color: #2d0a46;
	z-index: 100;
	/*opacity: 0.50!important;*/
}

.bookBack2 {
	background-color: #59158b;
	z-index: 101;
	/*opacity: 0.50!important;*/
}

.bookBack3 {
	background-color: var(--spinPurple);
	z-index: 102;
	/*opacity: 0.50!important;*/
}

.bookingWrap {
	
}

.forceInline {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.forceInline {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.forceInline span {
	margin-left: 1rem;
}

/* @end frame */

/* @group Basic Form Elements */

.contactForm * {
	color: white;
}

.contactForm .logoWrap {
	text-align: center;
	margin: 5rem 0 2rem;
}

.contactForm .logoWrap .logo {
	font: normal 6rem/3rem var(--logoFont);
	font-weight: 100;
	color: white;
	transform: scaleY(1.3);
	letter-spacing: .2rem;
	text-shadow: .2rem -.2rem 0 var(--spinGreen);
}

.contactForm .logoWrap .logoSubTitle {
	display: block;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-end;
	margin-top: 3rem;
	text-align: center;
	color: white;
	margin: 5rem 11rem 0;
	font-weight: 100;
}

.contactForm .logoWrap .logoSubTitle a {
	color: silver;
	text-decoration: underline;
}

.contactForm fieldset {
	border-style: none;
}

.contactForm .formSection {
	margin-right: 6rem;
	margin-left: 6rem;
}

.contactForm legend {
	letter-spacing: 2px;
	font: bold 2.8rem var(--subLogoFont);
	color: white;
	text-shadow: 0 1px 2px black;
	padding-top: 5rem;
	margin-bottom: 1rem;
}
	
.contactForm textarea {
	width: 100%;
	padding: 1rem;
	line-height: 25px;
	min-height: 130px;
	display: block;
	border: 1px solid gray;
	background-color: var(--spinWhite);
	color: var(--spinBlack);
	border-radius: 10px;
}

.contactForm p {
	margin-right: 0;
	margin-left: 0;
	font-weight: 100;
}

.contactForm p strong {
	text-shadow: 0 1px 2px var(--spinPurple);
	font-weight: 500;
}

.contactForm legend + p {
	margin-top: 0;
}
	
/* @end basic form elements*/


/* @group Switch Box */

/* @group Frame */

.formBox {
	margin: 2rem 6.3rem -1px !important; /*	Minus pixel fixes a Safari border*/
	min-height: 220px; /*Smallest it's allowed to get*/
}

.formBox nav {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: center;
	margin-bottom: -1px;
}

/* @end frame */

/* @group Nav */

.formBox nav a {
	position: relative;
	margin-right: 2rem;
	padding: 1rem;
	border-radius: 10px;
	font: 2rem/3.2rem var(--HFont);
	font-weight: bold;
	text-shadow: 1px 2px 2px black;
/*	transition: background .3s ease-in-out 0s, color .3s ease-in-out 0s, box-shadow .3s ease-in-out 0s;*/
	text-transform: uppercase;
	letter-spacing: 2px;
	background-color: var(--purpleHover);
	color: white;
	flex: 1;
}

.formBox nav a:last-of-type {
	margin-right: 0;
}

.formBox nav a.current,
.formBox nav a:hover {
	color: white;
	background-color: var(--spinGreen);
	box-shadow: 0 1px 3px black;
}

.formBox nav a.current span {
	padding-bottom: 1rem;
}

.formBox nav a.current {
	border-radius: 10px 10px 0 0;
	box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.21);
}

.formBox nav a span {
	text-align: center;
	display: block;
}

.formBox nav span:first-of-type {
	border-radius: 10px 0 0 0;
}

.formBox nav span:last-of-type {
	border-radius: 0 10px 0 0;
}

/* @end nav */

/* @group Content */

/* @group Frame */

.formBox .switchBoxContentWrap {
	background-color: var(--spinGreen);
	padding-right: 6rem;
	padding-left: 6rem;
	border-radius: 0 10px 10px 10px;
	padding-bottom: 3rem;
}

/*html.generalForm .formBox .switchBoxContentWrap {
	border-radius: 0 10px 0 0;
}

html.eventsForm .formBox .switchBoxContentWrap,
html.workshopsForm .formBox .switchBoxContentWrap {
	border-radius: 10px 10px 0 0;
}

html.detailsForm .formBox .switchBoxContentWrap {
	border-radius: 10px 0 0 0;
}*/

.contactForm .allForms {
	border-radius: 0 0 10px 10px;
	margin: 0 6.3rem;
}

.formBox .switchBoxContentWrap .switchBoxContent {
	display: none;
}

.formBox .switchBoxContentWrap .switchBoxContent.current {
	display: block;
}

.formBox .switchBoxContentWrap .switchBoxContent.active {
	
}

/* @end frame */

/* @end content */

/* @end switch box */


/* @group Horizontal Input Wrapper */

.contactForm .horizontalWrapper {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	padding-bottom: 1rem;
	border-bottom: 1px solid #7f807f;
	margin-top: 3rem;
}
	
.contactForm .horizontalWrapper span {
	margin-right: 2.5rem;
	display: block;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	color: white;
	font-size: 1.7rem;
}
	
.contactForm .horizontalWrapper span label {
	font-size: 1.7rem;
	padding-left: 1rem;
	font-weight: 100;
}
	
.contactForm .horizontalWrapper span label.answer {
	margin-right: 1rem;
}
	
.contactForm .formHideWrap {
	max-height:0;
	overflow: hidden;
	opacity: 0;
	transition: all .5s linear 0s;
}
	
.showBusiness .contactForm .formHideWrap {
	max-height: 500px;
	opacity: 1;
}
	
/* @end horizontal wrapper */


/* @group Custom Options */

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: transparent;
	border: none;
	padding: 0 1em 0 0;
	margin: 0;
	width: 100%;
	font-family: inherit;
	font-size: inherit;
	cursor: inherit;
	line-height: inherit;
	z-index: 1;
	outline: none;
}

select::-ms-expand {
	display: none;
}

.select {
	display: grid;
	grid-template-areas: "select";
	align-items: center;
	position: relative;
	min-width: 15ch;
	max-width: 30ch;
	border: 1px solid var(--select-border);
	border-radius: 0.25em;
	padding: 0.25em 0.5em;
	font-size: 1.25rem;
	cursor: pointer;
	line-height: 1.1;
	background-color: #fff;
	background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
	
}

.select select, .select::after {
	grid-area: select;
	color: var(--spinBlack);
	font-size: 1.7rem;
	margin-right: 2px;
}

.select:not(.select--multiple)::after {
	content: "";
	justify-self: end;
	width: 0.8em;
	height: 0.5em;
	background-color: var(--select-arrow);
	-webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);
	clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}

select:focus + .focus {
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	border: 2px solid var(--select-focus);
	border-radius: inherit;
}

select[multiple] {
  padding-right: 0;
  /*
   * Safari will not reveal an option
   * unless the select height has room to 
   * show all of it
   * Firefox and Chrome allow showing 
   * a partial option
   */
  height: 6rem;
  /* 
   * Experimental - styling of selected options
   * in the multiselect
   * Not supported crossbrowser
   */
}

select[multiple] option {
	white-space: normal;
	outline-color: var(--select-focus);
}

.select--disabled {
	cursor: not-allowed;
	background-color: #eee;
	background-image: linear-gradient(to top, #ddd, #eee 33%);
}

label {
	font-size: 1.125rem;
	font-weight: 500;
}

.select + label {
	margin-top: 2rem;
}

/* @end custom options */

/* @group Choose Act */

.contactForm .actsWrapper,
.contactForm .actsWrapper .chooseAct {
	position: relative;
}

.contactForm .actsWrapper .addAct,
.promoInfo {
	background-color: var(--spinPurple);
	display: inline-block;
	border-radius: 20px;
	text-shadow: 0 1px 2px black;
	text-transform: lowercase;
	font-size: 1.5rem;
	position: absolute!important;
	right: 2rem;
	bottom: 1.4rem;
	display: flex;
}

.contactForm .actsWrapper .addAct:hover {
	background-color: var(--purpleHover);
	color: white;
}

.contactForm .actsWrapper .addAct i {
	font-size: 1.5rem;
}

.addAct[title]:hover::after {
	top: calc(-100% - 2rem);
	left: 1rem;
}

.contactForm .actsWrapper .chooseAct .select {
	margin-right: 1rem;
}

.contactForm .actsWrapper .chooseAct .removeAct {
	position: absolute;
	bottom: 2.3rem;
	right: -1rem;
	background-color: red;
	border-radius: 20px;
	transform: scale(.7)
}

.contactForm .actsWrapper .chooseAct:first-of-type .removeAct {
	display: none;
}

.removeAct[title]:hover::after {
	top: calc(-100% - 2rem);
	left: 1rem;
}

input[type="datetime-local"], input[type="time"] {
   color: transparent;
}

input[type="datetime-local"]:focus, input[type="time"]:focus,
input.active {
   color: initial;
}

/* @end choose act */

/* @group Animated Inputs */
		
.contactForm .input-wrapper {
	position: relative;
	display: block;
	margin: 3.5rem 0 0;
}
		
.contactForm .input-wrapper input {
	border: none;
	border-bottom: 1px solid gray;
	padding: 1rem 0;
	position: relative;
	width: 100%;
	transition: transform .3s ease, padding .6s ease;
	font-size: 1.7rem;
	letter-spacing: 1px;
	background-color: transparent;
	outline: none!important;
}

.contactForm .input-wrapper.topInput {
	margin-top: 0rem;
}
		
.contactForm .input-wrapper input:focus {
	border-bottom-style: dashed;
}
		
.contactForm .input-wrapper label {
	font-size: 1.3rem;
	position: absolute;
	top: .5rem;
	pointer-events: none;
	transition: color .5s ease, transform .5s ease;
	text-align: left;
	left: 0;
	color: white;
	background-color: transparent;
}
		
.contactForm .input-wrapper input + label {
	transform: translate(0px, 0px);
	text-align: left;
	font-size: 1.7rem;
}
			
.contactForm .input-wrapper input:focus + label {
	transform: translate(0, -2rem);
	font-size: 1.5rem;
}

.contactForm .input-wrapper input.active + label {
	transform: translate(0rem, -3rem);
	font-size: 1.5rem;
	color: rgba(255, 255, 255, 0.7);
}

.contactForm .nameAgeWrapper input.active + label .nameNum::after {
	color: rgba(255, 255, 255, 0.7);
}
		
/* @end animated inputs*/

/* @group Workshops Form */

/* @group Accordion */

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

.contactForm .workshopFormAccord section {
	margin: 0!important;
}


.contactForm .workshopFormAccord section .accordLink {
	background-color: var(--spinPurple);
	border-radius: 10px;
	padding: 1rem;
	display: block;
	max-width: 40rem;
	text-align: left;
}

.contactForm .workshopFormAccord section .accordLink:hover {
	text-decoration: underline;
	color: white;
}

.contactForm .workshopFormAccord section .accordLink:hover i {
	color: var(--spinGreen);
}

.contactForm  #privateWorkshop {
	margin-bottom: 1rem!important;
}

.contactForm .workshopFormAccord section .accordLink i {
	float: right;
	background-color: var(--spinWhite);
	height: 3rem;
	width: 3rem;
	color: var(--spinPurple);
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	border-radius: 10px;
	box-shadow: inset 0 1px 2px var(--spinPurple);
	margin-top: -0.3rem;
	transition: color .2s ease-in-out 0s;
}

.contactForm .workshopFormAccord section .accordLink.active {
	border-radius: 10px 10px 0 0;
}


.contactForm .workshopFormAccord section .accordContent {
	color: var(--spinBlack);
	margin-top: 0.5rem;
	text-align: left;
	border-radius: 0px 10px 10px 10px;
}


.workshopFormAccord .accordContent .accordContentInner {
	color: var(--spinBlack);
	margin: 0rem 0rem 1rem;
	border: 1px solid #195700;
	background-color: #1e6700;
	padding: 3rem 3.5rem 3rem;
}

/* @end accordion */

/* @group Workshop Dates */

.workIntro a {
	color: #d5d3d3;
}

.workIntro a:hover {
	color: #d5d3d3;
	text-decoration: underline;
}

.whichDate {
	margin-top: 0rem!important;
	margin-bottom: 0rem;
	display: none!important;
}

.whichDate p {
	font-size: 1.7rem;
}

.workDatesWrap {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: flex-start;
	align-content: center;
	margin: -2rem -.8rem 5rem !important;
}

.workDatesWrap .workDate {
	width: calc(50% - 2rem);
	margin-bottom: -2rem;
}

.workDatesWrap .workDate:hover p span {
	background-color: rgba(0, 0, 0, 0.5);
}

.workDatesWrap .workDate p {
	font-size: 1.5rem;
	line-height: 2.5rem;
	text-align: left;
	padding-left: 1rem;
}

.workDatesWrap .workDate p span {
	font-size: 1.7rem;
	display: block;
	background-color: rgba(0, 0, 0, 0.25);
	padding: 1rem;
	border-radius: 10px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	transition: background-color .3s ease-in-out 0s;
	margin-left: -1rem;
}

.workDatesWrap .workDate p span strong {
	flex: 1;
}

.workDatesWrap .workDate input {
	font-size: 1.7rem;
}

.workDatesWrap .workDate label {
	cursor: pointer;
	position: relative;
}

.workDatesWrap .workDate label.full::after,
.workDatesWrap .workDate label.nearly-full::after  {
	content: "full";
	position: absolute;
	top: -11.3rem;
	background-color: red;
	width: 10rem;
	font-size: 1.2rem;
	border-radius: 5px;
	padding: .2rem .2rem .2rem .5rem;
	box-shadow: 0 1px 2px black;
}

.workDatesWrap .workDate label.nearly-full::after {
	content: "nearly full";
	background-color: #b17508;
}

.workDatesWrap .workDate label.full {
	cursor: not-allowed;
}

.workDatesWrap .workDate label.full::after,
.workDatesWrap .workDate label.full > * {
	opacity: 0.7;
}

.workDatesWrap .workDate label.full span {
	background-color: red;
}

.workDatesWrap .workDate label.nearly-full span {
	background-color: #b17508;
}

.workDatesWrap .workDate label.full input {
	pointer-events: none;
	visibility: hidden;
}

.workDatesWrap .workDate label.full cite {
	font-weight: normal;
	font-style: normal;
	color: red;
	text-transform: uppercase;
	text-shadow: 0 0px 1px black;
}

/* @end workshop dates */

/* @group Workshop Participants */

.nameAgeWrapper {
    counter-reset: nameAgeWrap; 
}

.nameAgeWrapper .nameAgeWrap {
	border-top: 5px solid var(--spinPurple);
	position: relative;
	margin-top: 3rem;
	padding-top: 0px;
}

.nameAgeWrapper .nameAgeWrap p {
	font-size: 1.7rem;
	margin-right: 20%;
	color: #d1ced4;
}

.nameAgeWrapper .nameNum::after {
	content: " " counter(nameAgeWrap);
    counter-increment: nameAgeWrap;
	transition: color .5s ease;
}

.nameAgeWrapper .promoShare {
	margin-top: 1.7rem;
}

.nameAgeWrapper .addParticipant {
	background-color: var(--spinPurple);
	color: white;
	padding: 1rem;
	border-radius: 10px;
	text-transform: uppercase;
	font-weight: bold;
	margin-top: 4rem;
	display: inline-block;
	font-size: 1.5rem;
	font-weight: 200;
	text-shadow: 0 1px 2px black;
}

.nameAgeWrapper .addParticipant i {
	margin-left: 1rem;
	display: inline-block;
}

.nameAgeWrapper .addParticipant:hover {
	background-color: green;
	color: white;
}

.nameAgeWrapper .nameAgeWrap .promoInfo.hoverTitle[title]:hover::after {
	top: calc(-100% - 5rem);
	width: 30rem;
	right: 5rem;
}

.contactForm .removeParticipant {
	position: absolute;
	top: 0rem;
	right: 0rem;
	background-color: red;
	border-radius: 0 0 20px 20px;
	border-style: solid;
	border: 3px solid var(--spinPurple);
	box-shadow: none;
}

.removeParticipant.hoverTitle[title]:hover::after {
	top: calc(-100% - .5rem);
	right: 2rem;
	font-size: 1.5rem;
}

.contactForm .accordContentInner .nameAgeWrapper div:nth-of-type(1) .removeParticipant {
	display: none;
}

.contactForm .accordContentInner .nameAgeWrapper > div:nth-of-type(1) {
	border-style: none;
	margin-top: 5rem!important;
}

/* @end workshop participants */

/* @end workshops form */

/* @group Details Form */

.contactDetailsWrap {

}

.contactDetailsWrap .contactDetails {
	display: grid;
	grid-template-columns: repeat(10, 1fr); 
	grid-template-rows: repeat(3, 1fr); 
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	margin-top: 6rem;
}

.contactDetailsWrap .contactDetails li {
	list-style: none;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	padding: 1rem;
}

.contactDetails li:nth-of-type(1) {
	grid-area: 1 / 2 / 4 / 6;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	font-size: 2.4rem;
	position: relative;
} 

.contactDetails li:nth-of-type(1) i {
	margin-top: 2rem;
	position: relative;
	z-index: 2;
	background-color: var(--spinPurple);
	color: white;
	border-radius: 30px;
	width: 4rem;
	height: 4rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	font-size: 2rem;
	box-shadow: 0 0 4px black;
}

.contactDetails li:nth-of-type(1) i:hover {
	color: var(--spinPurple);
	background-color: var(--spinWhite);
} 

.contactDetails li:nth-of-type(1)::after {
	content: "";
	background-image: url(../img/graphics/spin/300/spin.webp);
	background-size: 150%;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 0;
	opacity: 0.06;
}

/*grid-area: topLEft / row / 4 / 2;

Think of it as a grid and you can shove the different parts around on the various blocks*/

.contactDetails li:nth-of-type(2) {
	grid-area: 1 / 6 / 2 / 10;
} 
	
.contactDetails li:nth-of-type(3) {
	grid-area: 2 / 6 / 2 / 10;
} 

.contactDetails li:nth-of-type(4) {
	grid-area: 3 / 6 / 4 / 10;
} 


/*grid-row-start: as specified
grid-column-start: as specified
grid-row-end: as specified
grid-column-end: as spe*/


.contactDetailsWrap .contactDetails li:last-of-type {
	margin-right: 0rem;
}

.contactDetailsWrap .contactDetails .title {
	font-weight: bold;
	font-size: 2rem;
	text-shadow: 0 1px 2px black;
	margin-bottom: 1rem;
	display: block;
}


/* @end details form */ 

/* @group Comments */

.addComments legend,
.addComments p {
	display: none;
}

/*the rest is controlled in contentSwitcher.js*/

/* @end comments */

/* @group Privacy */
	
.privacy .privacyCheck label {
	font-size: 1.7rem;
	margin-right: 1rem;
}
		
/* @end privacy*/
	
	
/* @group Send Form */
		
.contactForm .send {
	display: block;
	width: 100%;
	padding-top: 1rem;
	border-top-style: solid;
	border-top-color: white;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}
	
.contactForm .send input {
	text-transform: uppercase;
	padding: 1rem;
	border: 1px none white;
	width: 48%;
	border-radius: 5px;
}
	
.contactForm .send input#reset {
	background-color: red;
	color: white;
	cursor: pointer;
	flex: 0;
	margin-right: 2rem;
}

.contactForm .send input#reset:hover {
	background-color: var(--spinPurpleDark);
}

.contactForm .send input#reset:active,
.contactForm .send input#send:active {
	transform: scale(.95);
}

.contactForm .send input#send {
	color: white;
	cursor: pointer;
	background-color: var(--spinGreen);
	flex: 1;
}

.contactForm .send input#send:hover {
	background-color: var(--spinPurpleDark);
}
	
/* @end send form */

/* @group Form Annoucements */

.formNoticesWrap {
	display: none;
}
	
.formNoticesWrap .formNotices {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	opacity: 0;
	visibility: hidden;
	width: 50%;
	margin-right: auto;
	margin-left: auto;
}
	
.formNoticesWrap .formNotices p {
	text-align: center;
	font-size: 2.5rem;
	line-height: 4rem;
	margin-right: 10rem;
	margin-left: 10rem;
	position: relative;
	color: white;
}

.formNoticesWrap .formNotices > i {
	background-color: var(--spinWhite);
	margin-bottom: 2rem;
	border-radius: 100%;
	font-size: 5rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 9rem;
	height: 9rem;
	border-style: solid;
}

.formNoticesWrap .formSending i {
	color: orange;
}

.formNoticesWrap .thanksGeneral i {
	color: green;
}

.formNoticesWrap .thanksGeneral img {
	width: 7rem;
}

/* @end form notices */
		
/* @end form */

/* @group Inline Blog Page */

/*#mainBlogWrap {
	width: 100%;
	min-height: 100vh;
}

#mainBlogWrap h1 {
	margin-top: 2rem;
	margin-bottom: 4rem;
}

#mainBlogWrap input#password {
	border: 2px solid var(--spinPurple);
}

#mainBlogWrap button.wbtn-info {
	letter-spacing: 0;
	padding: 1rem 2rem;
	background-color: var(--spinPurple);
	color: white!important;
}

#mainBlogWrap button.wbtn-info:hover {
	background-color: var(--spinGreen);
}


#mainBlogWrap > #topMenu {
	background-color: black;
}

#mainBlogWrap > .post.card {
	border-radius: 20px;
	min-height: 300px!important;
	background-color: #733a02;
	box-shadow: 0 1px 10px black;
	width: 100px;
	height: 100px;
	display: block;
}

#mainBlogWrap > .post.card .meta {
	display: none;
}

#mainBlogWrap > .post .meta {
	position: absolute;
	top: 25px;
}

#mainBlogWrap > .post .meta a {
	display: inline-block;
	padding: 3px 3px 0;
	background-color: red;
	font-weight: bold;
	text-transform: uppercase;
	border-radius: 10px;
}

#mainBlogWrap > #intro .inner {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

#mainBlogWrap > #intro .inner .text-left {
	display: block;
	width: 100%;
	text-align: center;
}

#mainBlogWrap > #intro .inner .text-left a {
	display: block;
	font-weight: bold;
	font-size: 20px;
	background-color: black;
	width: 100%;
	border-radius: 10px;
	text-transform: uppercase;
}

#mainBlogWrap > #intro .inner .text-right a {
	display: block;
	font-weight: bold;
	font-size: 20px;
	background-color: black;
	width: 100%;
	border-radius: 10px;
	text-transform: uppercase;
}

#mainBlogWrap > #intro .inner .text-left a:hover,
#mainBlogWrap > #intro .inner .text-right a:hover {
	opacity: 1;
	color: red;
}*/

/* @end inline blog page */

/* @end layout */

/* @group Plugins */



/* @group Custom Scroller */

.customScroll {
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--spinPurple) transparent; /* Match the scrollbar color */
	overscroll-behavior: none;
}

/* Works on Chrome/Edge/Safari */
.customScroll::-webkit-scrollbar-track {
	background: transparent; /* Match the scrollbar track color */
}

.customScroll::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

.customScroll::-webkit-scrollbar-thumb {
	background-color: var(--spinPurple); /* Match the scrollbar thumb color */
	border-radius: 20px;
	transition: all 1s ease-in-out 0s;
}

/* @end custom scroller*/

/* @group Sprkle Effect */

.circle {
	background-color: var(--spinWhite);
	width: 3px;
	height: 3px;
	position: absolute;
	border-radius: 10px;
	box-shadow: 0 0 7px #f82727;
}

/*@keyframes my-sparkle {
  0%   {
    opacity: 0;
    transform: rotate(0deg) scale(0);
  }
  50%  {
    opacity: 1;
    transform: rotate(360deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(720deg) scale(0);
  }
}*/


/* @end sparkle effect */

/* @group Social Media Links */

.fb {
	background-color: #4267b2;
}

.inst {
	background: #d6249f;
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

.linked {
	background-color: #00a0dc;
}

.tumblr {
	background-color: #021A35
}

.email {
	background-color: #4a4242;
}

.print {
	background-color: #4a4242;
}

.share {
	background-color: #4a4242;
}

/* @end social links */

/* @group No Click */

.noClick {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	cursor: wait;
	display: none;
	background-color: rgba(255, 255, 255, 0);
	z-index: 10;
}

/* @end noclick */

/* @group Burger */

.burger {
	width: 3rem;
	height: 2.8rem;
	cursor: pointer;
	position: relative;
	top: .6rem;
}

.burger span {
	display: block;
	position: absolute;
	height: 2px;
	width: 50%;
	opacity: 1;
	transform: rotate(0deg);
	transition: .25s ease-in-out;
	background-color: #00586c;
}

.burger.open span {
	background-color: var(--spinWhite);
}

.burger span:nth-child(even) {
	left: 50%;
	border-radius: 0 9px 9px 0;
}

.burger span:nth-child(odd) {
	left: 0px;
	border-radius: 9px 0 0 9px;
}

.burger span:nth-child(1), .burger span:nth-child(2) {
	top: 0px;
}

.burger span:nth-child(3), .burger span:nth-child(4) {
	top: 8px;
}

.burger span:nth-child(5), .burger span:nth-child(6) {
	top: 16px;
}

.burger.open span:nth-child(1), .burger.open span:nth-child(6) {
	transform: rotate(45deg);
}

.burger.open span:nth-child(2), .burger.open span:nth-child(5) {
	transform: rotate(-45deg);
}

.burger.open span:nth-child(1) {
	left: 5px;
	top: 7px;
}

.burger.open span:nth-child(2) {
	left: calc(50% - 5px);
	top: 7px;
}

.burger.open span:nth-child(3) {
	left: -50%;
	opacity: 0;
}

.burger.open span:nth-child(4) {
	left: 100%;
	opacity: 0;
}

.burger.open span:nth-child(5) {
	left: 5px;
	top: 12px;
}

.burger.open span:nth-child(6) {
	left: calc(50% - 5px);
	top: 12px;
}

/* @end burger */

/* @group Promo Wrap */

.promoWrap {
	height: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.promoWrap .promos {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: flex-start;
	align-content: flex-start;
}

.promoWrap .promos .promo {
	flex: 1;
	border-radius: 5px;
	background-color: #edecec;
	align-self: stretch;
	display: flex;
	flex-flow: column nowrap;
	max-width: 30rem;
	margin-right: 1rem;
	margin-left: 1rem;
}

.promoWrap .promos .promo .promoSubTitle {
	min-height: 10rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	text-align: center;
	margin: 0em 0em 1em;
	background-color: var(--spinPurple);
	border-radius: 5px 5px 0 0;
	position: relative;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	width: 100%;
}

.promoWrap .promos .promo .promoSubTitle h4 {
	margin: -1rem 1rem 0;
	width: 100%;
	font-size: 2.3rem;
	color: white;
	line-height: 2.5rem;
}

.promoWrap .promos .promo .promoSubTitle span {
	font-size: 1.3rem;
	display: block;
	color: #f0efef;
	font-weight: normal;
	font-style: normal;
	position: absolute;
	bottom: 0;
	line-height: 1.2rem;
	text-align: center;
}

.promoWrap .promos .promo ul {
	
}

.promoWrap .promos .promo ul li {
	list-style: none;
	margin: 1rem;
	border-bottom: 1px dashed var(--spinPurple);
	padding-bottom: 2rem;
	font-size: 1.5rem;
}

.promoWrap .promos .promo ul li:last-child {
	border-bottom-style: none;
}

.promoWrap .promos .promo ul li strong {
	display: block;
	font-size: 2rem;
	margin-bottom: .2rem;
	font-weight: bold;
	color: var(--spinPurple);
}

.promoWrap .promos .promo .readMore {
	display: block;
	width: 100%;
	align-self: flex-end;
	flex: 1;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: flex-end;
}

.promoWrap .promos .promo .readMore a {
	text-align: center;
	border-radius: 0 0 5px 5px;
	background-color: var(--spinPurple);
	display: block;
	width: 100%;
	padding-top: .5rem;
	padding-bottom: .5rem;
	color: white;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
}

.promoWrap .promos .promo .readMore a:hover {
	text-decoration: underline;
	background-color: var(--spinPurple);
}

/* @end promo wrap */

/* @group Custom Scrollbar */

/* The emerging W3C standard
   that is currently Firefox-only */
body {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Works on Chrome/Edge/Safari */
body::-webkit-scrollbar {
  width: 15px;
}
body::-webkit-scrollbar-track {
  background: #e0f6fe;
}
body::-webkit-scrollbar-thumb {
  background-color: var(--spinPurple);
  border-radius: 20px;
  border: 3px solid #e0f6fe;
}

/* @end */

/* @group Price Calculator */

.hidePricingCalc #calculator form,
.hidePricingCalc #calculator .divider,
.hidePricingCalc #calculator .calcIntro,
.hidePricingCalc .finalPriceWrap {
	display: none!important;
}

.hidePricingCalc .priceFaqBox {
	padding-bottom: 2rem;
}

.rangeBox{
    height: 15px;
    width: 100%;
    background: #e6e6e6;
    position: relative;
    display: block;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    cursor: pointer;
    margin: 35px 0 20px;
}
.rangeBox .rangeFill{
    background: #e96232;
    position: absolute;
    height: 15px;
    border-radius: 10px;
    transition: all .2s;
}
.rangeBox .rangeHandle{
    background: white;
    border: 1px solid #ccc;
    cursor: pointer;
    display: inline-block;
    width: 30px;
    height: 30px;
    position: absolute;
    background-size: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    top: -9px;
    touch-action: pan-y;
    -ms-touch-action: pan-y;
    transition: all .2s;
}
.rangeBox .rangeHandle:after{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.23), rgba(255, 255, 255, 0));
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.rangeBox .rangeHandle span{
    position: absolute;
    top: -22px;
    background: #e96232;
    color: #f6f6f6;
    font-weight: bold;
    border-radius: 10px;
    padding: 2px 6px 1px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 30px;
    text-align: center;
    white-space: nowrap;
}
.rangeBox .rangeBoxMinText{
    left: 0px;
    top: -31px;
    background: #e6e6e6;
    position: absolute;
    color: #5e5e5e;
    font-weight: bold;
    border-radius: 10px;
    padding: 2px 6px 1px;
    min-width: 30px;
    text-align: center;
    white-space: nowrap;
}
.rangeBox .rangeBoxMaxText{
    right: 0px;
    top: -31px;
    background: #e6e6e6;
    position: absolute;
    color: #5e5e5e;
    font-weight: bold;
    border-radius: 10px;
    padding: 2px 6px 1px;
    min-width: 30px;
    text-align: center;
    white-space: nowrap;
}
.swichBox{
    position: relative;
    background-color: #e6e6e6;
    background-size: contain;
    width: 52px;
    height: 24px;
    border-radius: 72px;
    padding: 3px;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
    transition: all .3s;
    top: 10px;
    margin-left: 10px;
}
.swichBox .swichHandle{
    right: 30px;
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--spinWhite);
    transition: all .3s;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.swichBox .swichHandle:after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
    border-radius: 50%;
}
.swichBox.add{
    background-color: #e96232;
    transition: all .3s;
}
.swichBox.add .swichHandle{
    right: 4px;
    transition: all .3s;
}
.customSelect{
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 8px 10px;
    cursor: pointer;
    outline: none;
    margin-left: 10px;
    font-size: initial;
}
.customSelect.selected{
    color: #ffffff;
    background: #e96232;
}
.customRadioBox{
    position: relative;
    margin-bottom: 10px;
    padding-bottom: 40px;
    cursor: pointer;
}
.customRadioBox:after{
    content: '';
    width: 100%;
    height: 6px;
    display: block;
    position: absolute;
    bottom: 15px;
    border: 1px solid #b9b9b9;
    border-radius: 3px;
    background: #e6e6e6;
    box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3);
}
.customRadioBox .customRadioState{
    display: inline-block;
    text-align: center;
    font-weight: bold;
    position: relative;
}
.customRadioBox .customRadioState.current > div{
    background: #e96232;
    color: #f6f6f6;
    font-weight: bold;
    border-radius: 10px;
    padding: 2px 6px 1px;
    text-align: center;
    white-space: nowrap;
    display: inline-block;
}
.customRadioBox .customRadioState:before{
    content: '';
    width: 6px;
    height: 6px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -25px;
    border-radius: 10px;
    z-index: 100;
    background: rgba(181, 181, 181, 0.65);
}
.customRadioBox .customRadioState:after{
    content: '';
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -30px;
    border-radius: 10px;
    z-index: 99;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #626262;
    background: #e6e6e6;
    box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3);
}
.customRadioBox span{
    border: 1px solid #ccc;
    cursor: pointer;
    display: inline-block;
    width: 30px;
    height: 30px;
    position: absolute;
    background-size: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    bottom: 3px;
    touch-action: pan-y;
    -ms-touch-action: pan-y;
    transition: all .2s;
    background: #e96232;
    z-index: 99999;
}
.customRadioBox span:after{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.23), rgba(255, 255, 255, 0));
    border-radius: 50%;
}
.dropDownMultiSelect{
    margin: 15px 0 15px 10px;
    display: inline-block;
}
.dropDownMultiSelect .customMultiSelectTitle{
    padding: 10px 30px 10px 15px;
    appearance: none;
    background-origin: content-box;
    background-size: 9px 6px;
    border: 1px solid #ccc;
    border-radius: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    background-size: 9px 6px;
    min-width: 150px;
    display: inline-block;
    box-sizing: border-box;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    position: relative;
}
.dropDownMultiSelect .customMultiSelectTitle:after{
    content: '\02c6';
    font-weight: bold;
    transform: rotate(180deg);
    position: absolute;
    right: 14px;
    font-size: 22px;
    top: 1px;
}
.dropDownMultiSelect ul{
    list-style: none;
    position: absolute;
    background-color: #fefefe;
    border: 1px solid #ccc;
    border-top: none;
    padding: 6px;
    margin: -1px 0 0px 0;
    z-index: 10;
    list-style-type: none;
    display: none;
    overflow-y: auto;
    max-height: 400px;
    box-sizing: border-box;
}
.dropDownMultiSelect ul.open{
    display: block;
}
.dropDownMultiSelect ul li{
    cursor: pointer;
    padding: 5px 0;
    display: table;
    width: 100%;
}
.listMultiSelect{
    margin: 15px 0;
    display: block;
}
.listMultiSelect .listMultiSelectTitle{
    
}
.listMultiSelect ul{
    list-style: none;
    background-color: #fefefe;
    border: 1px solid #ccc;
    padding: 6px;
    margin: 10px 0;
    z-index: 10;
    list-style-type: none;
    box-sizing: border-box;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.listMultiSelect ul li{
    display: inline-block;
    /*margin: 2px 0px;*/
    cursor: pointer;
    padding: 6px 8px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.listMultiSelect ul li span{
    user-select: none;
}
.customMultiSelect li input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.customMultiSelect li span {
    position: relative;
    display: inline-block;
    padding: 0 0 0 24px;
    height: 1.5em;
    line-height: 1.5;
    cursor: pointer;
    border-radius: 100%;
    color: aliceblue;
    border: 2px solid #b9b9b9;
    margin-right: 6px;
}
.customMultiSelect li span::before,
.customMultiSelect li span::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
}
.customMultiSelect li span::before {
    content: " ";
    border-radius: 100%;
}
/* Checkbox */
.customMultiSelect li input[type="checkbox"] + span::after {
    content: "\2714";
    line-height: 26px;
    text-align: center;
}
/* :checked */
.customMultiSelect li input[type="checkbox"]:checked + span {
    background: #e96232;
    border-color: #e96232;
    box-shadow: 0px 0px 2px 0px black;
}
.customMultiSelect li input[type="checkbox"] + span::after{
    transform: scale(0);
}
.customMultiSelect li input[type="checkbox"]:checked + span::after {
    transform: scale(1);
}
/* Transition */
.customMultiSelect li span::before,
.customMultiSelect li span::after {
    transition: .25s all ease;
}
.customMultiSelect li label{
    position: relative;
    bottom: 8px;
    user-select: none;
    cursor: pointer;
}
.customMultiSelect li input[type="checkbox"]:checked ~ label{
    opacity: 0.7;
}
.customMultiSelect li:hover label{
    opacity: 0.7;
}
.customMultiSelect li:hover input[type="checkbox"] + span::after {
    content: "\2714";
    line-height: 26px;
    text-align: center;
    opacity: 0.5;
    transform: scale(0.7);
}
.customMultiSelect li:hover input[type="checkbox"]:checked + span::after {
    opacity: 1;
    content:"\00d7"; 
    /*font-size: 22px;*/
    transform: scale(1);
}
.customMultiSelect li:hover input[type="checkbox"]:checked + span.currentAdded::after {
    opacity: 1;
    content:"\2714"; 
    font-size: initial;
    animation-name: checked;
    animation-duration: 0.25s;
}

@keyframes checked {
    from {
        transform: scale(0.7);
    }
    to {
        transform: scale(1.5);
    }
}

/* @end price calculator */

/* @group Ellipsis Animation */

@keyframes ellipsis {
  to {
    width: 1.25em;    
  }
}

.elipAnim::after {
	overflow: hidden;
	display: inline-block;
	vertical-align: bottom;
	animation: ellipsis steps(4,end) 900ms infinite;
	content: "\2026"; /* ascii code for the ellipsis character */
	width: 0px;
}

/* @end elipsis animation */

/* @group Hover Title */

/* @group Hover Title */

.hoverTitleBall {
	display: flex;
	width: 2.7rem;
	height: 2.7rem;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	box-shadow: 0 1px 2px black;
	border-radius: 20px;
	position: relative;
}

.hoverTitle:hover {
	color: white;
}

.hoverTitle[title]:hover::after {
	content: attr(title);
	position: absolute;
	background-color: red;
	display: inline-block;
	width: 16rem;
	text-align: center;
	border-radius: 10px;
	padding: 0.5rem;
	box-shadow: 0 1px 2px black;
	z-index: 2;
	padding: 1.2rem;
}

.extraBottom .hoverTitle[title]:hover::after {
	width: 14rem;
	border-radius: 0 20px 20px 0;
	padding: 0.5rem;
	box-shadow: 7px 1px 5px rgba(0, 0, 0, 0.4);
	padding: .2rem;
	left: 5.3rem;
	top: .4rem;
	background-image: linear-gradient(to right, var(--spinPurple) 0%, var(--spinGreen) 100%);
	font-size: 1.5rem;
	text-transform: uppercase;
	text-shadow: 0 1px 2px black;
	letter-spacing: 1px;
}

.inExtraArea .extraBottom .hoverTitle[title]:hover::after,
.touchevents .noMobileHover.hoverTitle::after {
	display: none!important;
}

/* @end hover title */

/* @end hover title */

/* @group Radio Button */

input.mod[type="radio"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: var(--spinWhite);
  /* Not removed via appearance */
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  display: grid;
  place-content: center;
}

input.mod[type="radio"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--spinPurple);
  /* Windows High Contrast Mode */
  background-color: var(--spinWhite);
}

input.mod[type="radio"]:checked::before {
  transform: scale(1);
}

input.mod[type="radio"]:focus {
  outline: max(2px, 0.15em) solid currentColor;
  outline-offset: max(2px, 0.15em);
}

/* @end radio button */

/* @group Privacy Notice */

.shopPrivacy .centered {
	margin-right: 10rem;
	margin-left: 10rem;
}

.shopPrivacy h2 {
	margin-top: 1rem;
}

.shopPrivacy h3 {
	margin-top: 5rem!important;
}

.shopPrivacy h4 {
	margin-top: 2rem !important;
	color: var(--spinGreen);
}

/* @end privacy */

/* @end plugins */

/* @group Reusable Modules */

/* @group Loading */

.loadingWrap {
	z-index: 100000;
	border-radius: 10px;
	background-color: #6810aa;
	position: fixed;
	left: 50%;
	margin-left: -10rem;
	top: -8rem;
	width: 20rem;
	height: 7rem;
	box-shadow: 0 1px 10px black;
}

.loadingDec,
.loading {
	border-radius: 10px;
	background-color: #6810aa;
	box-shadow: 0 1px 10px black;
	position: absolute;
	inset: .5rem;
}

.loading {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	background-color: var(--spinGreen);
}

.loading p {
	font-weight: bold;
	font: 4rem var(--logoFont);
	color: white;
	text-transform: lowercase;
	letter-spacing: 2px;
	margin-bottom: 3rem;
}

.loading img {
	width: 4rem;
	margin-top: .5rem;
}

/* @end loading */

/* @group Loading Cover */

.loadCover {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--spinWhite);
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	z-index: 11;
	visibility: hidden;
	opacity: 0;
}

.loadCover img {
	max-width: 80rem;
	width: calc(100% - 8rem)
}

/* @end loading cover*/

/* @group Image Quote */

.centerQuote {
	width: 100%;
	position: relative;
	margin: 3rem 0;
}

.centerQuote img {
	width: 100%;
	display: block;
	mask-image: url(../img/graphics/masks/horizontalSmoothEdgeLarge.webp);
	mask-position: center center, bottom right;
	mask-repeat: no-repeat, no-repeat;
	mask-size: 100% 100%, 100% 100%;
	mask-composite: add;
	-webkit-mask-image: url(../img/graphics/masks/horizontalSmoothEdgeLarge.webp);
	-webkit-mask-position: center center, bottom right;
	-webkit-mask-repeat: no-repeat, no-repeat;
	-webkit-mask-size: 100% 100%, 100% 100%;
	-webkit-mask-composite: source-over;
}

.centerQuote figcaption {
	position: absolute;
	bottom: 0rem;
	background-color: var(--spinGreen);
	color: white;
	max-width: 75%;
	padding: 1rem 2rem 1rem 1rem;
	border-radius: 0px 2rem 2rem 0px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: center;
	border: .2rem solid white;
}

.centerQuote figcaption > span {
	display: block;
}

.centerQuote figcaption .figSpider {
	width: 7rem;
	margin: -2rem 2rem -2rem -4rem;
	background: url(../img/graphics/spin/650/spin.webp) center center no-repeat #e6ddeb;
	background-size: 90%;
	border-radius: 100%;
	border: .3rem solid white;
}

.centerQuote figcaption .figText {
	flex: 1;
}

/* @end image quote */

/* @group StyledList */

.styledList {
	color: var(--spinPurple);
}

.styledList li {
	color: var(--spinGreen);
	position: relative;
	list-style: none;
	margin-bottom: 2rem;
	margin-left: 3.5rem;
	font-weight: 200;
	margin-right: 10rem;
}

.styledList li::before {
	content: "";
	color: black;
	width: 2.5rem;
	height: 2.5rem;
	background: url(../img/graphics/shapes/spinSide/spinSide.webp) no-repeat;
	background-size: contain;
	display: block;
	position: absolute;
	left: -3.5rem;
	top: .3rem;
}

/* @end */

/* @group Quote Box */

.quoteBox {
	width: 60%;
	max-width: 50rem;
	position: relative;
	margin-top: .5rem;
	margin-bottom: 1rem;
}

.quoteBox.left {
	float: left;
	margin-left: 0rem;
	margin-right: 5rem;
}

.quoteBox.right {
	float: right;
	margin-left: 5rem;
	margin-right: 0rem;
}

.quoteBox::before,
.quoteBox::after {
	position: absolute;
	color: white;
	font-size: 3rem;
	text-shadow: 0 0 5px #000000;
	z-index: 1;
} 

.quoteBox::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f10d";
	top: 1rem;
	left: 1rem;
}

.quoteBox::after {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f10e";
	bottom: 1rem;
	right: 1rem;
}

/* @end quote box */

/* @group Inline News */

main .mainContentWrap .banner.contentHolder {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-end;
	align-items: center;
	align-content: center;
	margin-bottom: 10rem;
	padding-right: 5vw;
	padding-left: 5vw;
}

main .mainContentWrap .banner.contentHolder > div {
	width: 100%;
	border-radius: 10px;
	margin: 25rem 0 -5rem;
	position: relative;
	z-index: 1;
	max-width: 80rem;
}

main .mainContentWrap .banner.contentHolder.studioBanner > div {
	margin: 10rem 0 -5rem;
}

.inlineNews p {
	margin: 1rem 0 0;
	font: 4rem var(--subLogoFont);
	line-height: 3.5rem;
	text-transform: capitalize;
}

.inlineNews h2 {
	margin-top: 1rem;
	margin-bottom: 0;
}

.inlineNews .datesWrap {
	padding: 2rem;
}

.inlineNews .datesWrap .dates {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	margin-top: 1rem;
	margin-bottom: 1rem;
	background-color: var(--linkHighlight);
	padding: 1rem;
	border-radius: 10px;
}

.inlineNews .datesWrap .dates:hover {
	background-color: var(--linkHighlightHover);
}

.inlineNews .datesWrap .dates br {
	display: none;
}

.inlineNews .datesWrap .dates span {
	flex: 1;
}

.inlineNews .datesWrap .workDateTop {
	text-align: right;
	color: #333c3c;
}

.inlineNews .datesWrap .workDateBottom {
	text-align: left;
	padding-left: 2rem;
	color: var(--spinGreen);
}

/* @end inline news */

/* @group Feature List */

/* @group Frame */

.featureListWrap {
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	padding-top: 2rem;
	padding-bottom: 4rem;
	position: relative;
}

.featureListWrap .featureList {
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}

.featureListWrap .feature {
	flex: 1;
	height: 60vh;
	background-color: gray;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-end;
	align-items: center;
	align-content: center;
	text-align: center;
	margin: 0 .5rem;
	border: 2px solid var(--spinGreen);
	border-radius: 10px;
	transition: all .5s ease-in-out 0s;
	overflow: hidden;
	position: relative;
}

.kindergrimePage .featureListWrap .feature {
	height: 30vh;
}

.featureListWrap img {
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	object-fit: cover;
	object-position: top center;
	width: 100%;
}

.featureListWrap .feature .featureText {
	background: var(--lightVerticalGradient);
	opacity: 1;
	font-family: var(--HFont);
	text-align: center;
	font-size: 1.7rem;
	line-height: 2rem;
	color: white;
	margin-top: 0;
	display: block;
	padding: 20rem 1rem 0rem;
	min-width: 100%;
	position: relative;
	
}

.featureListWrap .feature .featureText strong {
	text-align: center;
	font: 3rem var(--logoFont);
	color: var(--spinGreen);
	text-shadow: 0 1px 2px black;
	letter-spacing: .2rem;
	margin-bottom: 0rem;
	display: block;
	padding-bottom: 2rem;
	padding-top: 2rem;
}

.featureListWrap .feature .featureText cite {
	/*opacity: 0;*/
	max-width: 50rem;
	display: block;
	margin: 0 auto;
}

.featureListWrap .feature .featureLink {
	background-color: var(--spinBlue);
	width: 100%;
	position: relative;
	padding-top: 1rem;
	color: var(--spinWhite);
	text-transform: uppercase;
	font-family: var(--subLogoFont);
	letter-spacing: .1rem;
	border-radius: 0px 0px 10px 10px;
	max-height: 4rem;
	transition: max-height .3s ease-in-out 0s;
}

.featureListWrap:hover .featureLink::before {
	transition: transform .3s ease-in-out 0s, opacity .5s ease-in-out 0s;
}

.featureLink::before {
	content: "";
	position: absolute;
	right: 10%;
	left: 10%;
	top: -.5rem;
	height: 3px;
	background-color: var(--spinWhite);
	border-radius: 5px;
	z-index: 2;
}

.featureListWrap .feature:nth-child(odd) {
	transform: translateY(2rem);
}

.featureList:hover .feature:nth-child(odd) {
	transform: translateY(0rem);
}

.featureListWrap .featureCover {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	cursor: pointer;
}

/* @end frame */

/* @group Feature Is Active */

.featureList:hover .featureLink::before {
	opacity: 0;
}

.featureList:hover strong {
	transition: opacity .3s ease-in-out 0s;
	opacity: 0;
}

.featureList:hover .feature:hover strong {
	opacity: 1;
}

.featureList:hover .feature {
	filter: grayscale(100%);
}

.featureList:hover .feature:hover {
	filter: grayscale(0%);
}

.featureList:hover .feature {
	margin-left: 0;
	margin-right: 0;
}

.featureList:hover .feature:nth-child(1) {
	border-radius: 10px 0px 0px 10px;
}

.featureList:hover .feature:nth-child(1) .featureLink {
	border-radius: 0px 0px 0px 10px;
}

.featureList:hover .feature:nth-child(2),
.featureList:hover .feature:nth-child(2) .featureLink,
.featureList:hover .feature:nth-child(3),
.featureList:hover .feature:nth-child(3) .featureLink  {
	border-radius: 0px;
}

.featureList:hover .feature:nth-child(4) {
	border-radius: 0px 10px 10px 0px;
}

.featureList:hover .feature:nth-child(4) .featureLink  {
	border-radius: 0px 1px 10px 0px;
}

.featureList:hover .feature .featureLink  {
	max-height: 0;
}



.featureList:hover .feature:hover {
	flex: 5;
	z-index: 2;
}

/* @end feature is active */

/* @end feature list */

/* @group Logo Scroller */


.logosWrap {
	transform: rotate(2deg);
	margin: 7rem 3rem;
	border-radius: 50px;
	padding: 4rem;
	background-color: rgba(242, 241, 241, 0.51);
	box-shadow: 0 1px 200px rgba(19, 137, 0, 0.18);
	border: 1px solid var(--spinPurple);
	overflow: hidden;
}

.logosWrap .logoScroller {
	padding: 2rem 0;
	border-radius: 5px;
	transform: rotate(-2deg);
}

.logosWrap .logoScroller .carouselCell {
	width: 35%;
	height: 25rem;
	margin-right: 3rem;
	border-radius: 5px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	border: 2px solid var(--spinPurple);
	background-color: var(--spinWhite);
	overflow: hidden;
}

.logosWrap .logoScroller .carouselCell img {
	width: 100%;
	height:  100%;
	object-fit: contain;
	object-position: 50% 50%;
	padding: 1.7rem 1rem 1rem;
}

.logosWrap .logoScroller .flickity-prev-next-button {
	width: 30px;
	height: 30px;
}

.logosWrap .logoScroller .flickity-prev-next-button.previous { 
	left: 3rem; 
}

.logosWrap .logoScroller .flickity-prev-next-button.next {
	right: 3rem;
}

.logosWrap blockquote {
	color: var(--spinGreen);
	margin: 0 1rem;
	transform: rotate(-2deg);
	font-size: 2.6rem;
	line-height: 4rem;
}

.logosWrap blockquote strong {
	font-weight: bold;
	color: var(--spinPurple);
}

/* @end logo scroller */

/* @group Switch Box */

/* @group Frame */

.priceFaqBox {
	border: 0px solid var(--spinGreen);
	border-radius: 0px;
	border-top-style: none;
	border-bottom: 2px solid var(--spinGreen);
	padding-bottom: 7rem;
	margin-top: 7rem;
	margin-bottom: 5rem;
}

.priceFaqBox nav {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	padding: 0 .4rem 0;
}

/* @end frame */

/* @group Nav */

.priceFaqBox nav a {
	position: relative;
	top: -1.7rem;
	margin-left: 1rem;
	margin-right: 1rem;
	padding: 1.2rem 1.5rem 0;
	border-radius: 10px;
	font: normal 2rem/3.2rem var(--subLogoFont);
	font-weight: normal;
	text-shadow: 0 1px 2px transparent;
	transition: background .3s ease-in-out 0s, color .3s ease-in-out 0s, box-shadow .3s ease-in-out 0s;
	text-transform: none;
	letter-spacing: 1px;
	background-color: var(--purpleHoer);
	color: var(--spinPurple);
}

.priceFaqBox nav i {
	/* removed font- based rules */
    display: inline-block;
    text-rendering: auto;
	text-transform: none;
	text-align: center;
	text-shadow: none;
	font-size: 1.5rem;
	font-variant: normal;
	margin-left: 1rem;
	background-color: var(--spinWhite);
	color: var(--spinPurple);
	padding: .4rem .4rem .4rem .6rem;
	border-radius: 25%;
	position: relative;
	top: -.2rem;
}


.priceFaqBox nav a.current,
.priceFaqBox nav a:hover {
	color: white;
	background-color: var(--spinPurple);
	box-shadow: 0 1px 3px black;
}

.priceFaqBox nav span {
	flex: 1;
	border-top: 2px solid var(--spinGreen);
	height: 40px;
	/*transform: translateY(-.05rem);*/
}

.priceFaqBox nav span:nth-of-type(1) {
	border-radius: 0px 0 0 0;
	margin-left: -5px;
}

.priceFaqBox nav span:last-of-type {
	border-radius: 0 0px 0 0;
	margin-right: -5px;
}

.priceFaqBox .switchBoxContentWrap {
	margin: 3rem 0rem 0rem;
}


/* @end nav */

/* @group Content */

/* @group Frame */

.priceFaqBox .switchBoxContentWrap {
	
}

.priceFaqBox .switchBoxContentWrap .switchBoxContent {
	display: none;
}

.priceFaqBox .switchBoxContentWrap .switchBoxContent.current {
	display: block;
}

.priceFaqBox .switchBoxContentWrap .switchBoxContent.active {
	
}

.priceFaqBox .switchBoxContentWrap .switchBoxContent .sapWrap > div > div {
	background-color: rgba(155, 155, 155, 0.04);
	box-shadow: 0 1px 2px black;
	border-radius: 10px;
	margin-bottom: 3rem;
	padding: 1rem;
}

.priceFaqBox .switchBoxContentWrap .switchBoxContent .sapWrap > div > span {
	color: #7b25ba;
	margin-bottom: 0rem;
	display: block;
	padding: .5rem .5rem .5rem 1rem;
	font-size: 2.1rem;
	letter-spacing: 1px;
}

.priceFaqBox .switchBoxContentWrap .switchBoxContent .divider {
	padding-bottom: 3rem;
	margin-bottom: 5rem;
	border-bottom: 3px solid var(--spinGreen);
	display: block;
}

.priceFaqBox .switchBoxContentWrap .switchBoxContent .extraPricingInfo p b {
	font-weight: bold;
	color: var(--spinGreen);
}

/* @end frame */

/* @group Gallery */

.priceFaqBox .animatiesGal {
	column-gap: 2rem;
	column-count: 3;
	column-fill: initial;
	position: relative;
	width: 100%;
	display: none;
}

.priceFaqBox .animatiesGal::after {
	content: "";
	background: url(../img/graphics/shapes/rainbow/rainbow.webp) center center no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	rotate: 90deg;
	opacity: .2;
	z-index: -1;
}

.priceFaqBox .animatiesGal .brick {
	margin-bottom: 1rem;
	display: inline-block;
	vertical-align: top;
	opacity: 1;
	width: 100%;
}

.priceFaqBox .animatiesGal .brick img {
	transition: all .3s ease-in-out;
	backface-visibility: hidden;/* Remove Image flickering on hover */
	width: 100%;
	border-radius: 10px;
}

/* @end masonry gallery */

/* @group FAQ */

ul.fax {
	
}

ul.faq li {
	list-style: none;
}

ul.faq li:nth-child(odd) {
	color: var(--spinGreen);
	margin-bottom: .5rem;
}

ul.faq li:nth-child(even) {
	margin-bottom: 2.5rem;
}

/* @end faq */

/* @group Calculator */

/* @group Frame */

.finalPriceWrap {
	position: fixed;
	bottom: 2rem;
	width: 0rem;
	display: none;
	flex-flow: row nowrap;
	justify-content: center;
	background-color: silver;
	left: 50%;
}

.finalPriceWrap .finalPrice {
	font-size: 2.5rem;
	color: white;
	background-color: var(--spinGreen);
	border-radius: 10px;
	box-shadow: 0 2px 10px black;
	min-width: 45rem;
	margin-right: 30rem;
	border: 5px solid white;
	position: relative;
	opacity: 0;
	visibility: hidden;
}

.finalPriceWrap .privacyCheck label {
	font-size: 1.7rem;
}

.finalPriceWrap .finalPrice form {
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	padding: 1rem;
	font-size: 2.2rem;
}

.finalPriceWrap .finalPrice form .hiddenElements {
	display: none;
}

/* @end frame */

/* @group Price Text */

.finalPriceWrap .finalPrice form p,
.finalPriceWrap .finalPrice form .privacyCheck,
.finalPriceWrap .finalPrice .thanks  {
	margin: 0;
	font-size: 1.8rem;
}

.finalPriceWrap .finalPrice form strong {
	font-weight: bold;
	font-size: 2.2rem;
	text-shadow: 0 1px 2px black;
}

/* @end price text */

/* @group Form */

/* @group Frame */

.finalPriceWrap .finalPrice form .wrapFormElements {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	background-color: #216402;
	padding: 0 1rem;
	border-radius: 10px;
	margin-top: 1rem;
	min-width: 40rem;
}

.finalPriceWrap .finalPrice form .wrapFormElements input {
	background-color: transparent;
	border-style: none;
	color: white;
	font-size: 1.8rem;
	text-shadow: 0 1px 2px black;	
}

.finalPriceWrap .finalPrice form .wrapFormElements input#email,
.finalPriceWrap .finalPrice form .wrapFormElements .sendWrap {
	padding: .8rem 0 .8rem .0rem;
}

.finalPriceWrap .finalPrice form .wrapFormElements input#email {
	padding-right: 4rem;
	cursor: pointer;
	transition: background .3s ease-in-out 0s;
	transform: translateY(-0.1rem)
}

.finalPriceWrap .finalPrice form .wrapFormElements .sendWrap {
	position: relative;
	line-height: 1.6rem;
}

.finalPriceWrap .finalPrice .closePrice {
	position: absolute;
	top: -1.5rem;
	right: -1.5rem;
	width: 3rem;
	height: 3rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	border-radius: 50%;
	cursor: pointer;
}

.finalPriceWrap .finalPrice .closePrice i {
	border-radius: 50%;
	background-color: red;
}

.finalPriceWrap .finalPrice .closePrice:hover i {
	border-radius: 50%;
	transform: scale(1.2);
}

/* @end frame */

/* @group Form Email */

/* @end form email */

/* @group Form Send Button */

.finalPriceWrap .finalPrice form .wrapFormElements .sendWrap:hover input {
	text-decoration: underline;
}

.finalPriceWrap .finalPrice form .wrapFormElements .sendWrap::after {
	content: "";
	position: absolute;
	left: 0;
	width: 2px;
	background-color: var(--spinWhite);
	bottom: .5rem;
	top: .5rem;
}

.finalPriceWrap .finalPrice form .wrapFormElements .sendWrap input {
	cursor: pointer;
	transition: background .3s ease-in-out 0s;
	transform: translateY(-0.1rem);
	padding-left: 1rem;
	padding-right: 3rem;
}

.finalPriceWrap .finalPrice form .wrapFormElements .sendWrap i {
	font-size: 1.4rem;
	transform: translateY(-1px);
	position: absolute;
	right: 0;
	top: 1rem;
}

/* @end form send button */

/* @group Privacy */

.privacyCheck {
	padding-top: .5rem;
}

.privacyCheck label a {
	color: #efecec;
}

.privacyCheck label a:hover {
	text-decoration: underline;
}

.privacyCheck input {
	margin-left: .5rem;
}


/* @end privacy */

/* @end form */

/* @group Thanks */

.thanks {
	display: none;
	opacity: 0;
}

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

.thanks p {
	margin: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	padding: 10px;
}

 .thanks p strong.elipAnim {
	width: 2rem;
	display: inline-block;
}

.thanks h4 {
	text-align: center;
	font-size: 2.5rem;
	color: white;
	margin: 1rem 0 0;
}

/* @end thanks*/

/* @end calculator */

/* @end content */

/* @end switch box */


/* @group Multi Content Promo Banner */

.multiContent {
	margin-bottom: 15rem;
	margin-top: 5rem;
}

.multiContent .multiContentWrapper {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}

.multiContent .multiContentWrapper > div {
	width: 30%;
	max-width: 30rem;
	position: relative;
	margin: 10rem 1vw -8rem;
	padding: 10px; 
	align-self: stretch;
	background-color: rgba(40, 136, 0, 0.59);
}

.multiContent .multiContentWrapper > div > article {
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.91);
}

.multiContent > div h3 {
	margin: 0;
	position: relative;
	z-index: 0;
	font: 3rem var(--subLogoFont);
	color: var(--spinGreen);
}

.multiContent > div p {
	position: relative;
	text-align: center;
	font-weight: normal;
	font-style: normal;
	font-size: 1.7rem;
	line-height: 2.5rem;
	color: #5c0a6a;
	margin-top: .5rem;
}


/* @end inline multi content banner */


/* @group Inline Gallery */

.inlineGalleryWrap {
	margin-top: 5rem;
	margin-bottom: 5rem;
	background: url(../img/graphics/shapes/yellowSplash/700/yellowSplash.webp) 0 center no-repeat;
	background-size: 100%;
}

.inlineGalleryWrap .inlineGallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	grid-template-rows: 1fr;
	grid-gap: 2rem;
	padding: 2rem;
}

.inlineGallery a {
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding-top: 1rem;
	padding-bottom: 1rem;
	border-radius: 1rem;
	/*filter: brightness(90%);*/
	transition: filter .3s ease-in-out 0s;
}
	
.inlineGallery a img {
	display: block;
	object-fit: cover;
	object-position: 50% 50%;
	/*border-radius: 20rem;*/
	-webkit-mask-image: url(../img/graphics/masks/colourBlockMaskMedium.webp);
	-webkit-mask-position: center center, bottom right;
	-webkit-mask-repeat: no-repeat, no-repeat;
	-webkit-mask-size: 100% 100%, 100% 100%;
	-webkit-mask-composite: source-over;
	width: 100%;
	height: 100%;
}

.inlineGallery a:hover {
	background-color: var(--linkHighlightHover);
	/*filter: brightness(110%);*/
}
	
.inlineGallery .item {
	display: flex;
	position: relative;
}
	
.inlineGallery .item:before {
	content: "";
	display: block;
	height: 0;
	width: 0;
	padding-bottom: calc(9/16 * 100%);
	/*padding-bottom: calc(9/16 * 100%); Monitor Resolution*/
}

.inlineGalleryWrap p {
	text-align: center;
	font-weight: bold;
	letter-spacing: 1px;
	color: var(--spinPurple);
}
	

/* @end inline gallery */


/* @group Image Fade */

.imageFade {
	height: 40vh;
	position: relative;
	-webkit-mask-image: url(../img/graphics/masks/horizontalSmoothEdgeLarge.webp);
	-webkit-mask-position: center center, bottom right;
	-webkit-mask-repeat: no-repeat, no-repeat;
	-webkit-mask-size: 100% 100%, 100% 100%;
	-webkit-mask-composite: source-over;
	will-change: transform, filter;
}

.imageFade div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0%;
}

.imageFade .topImage {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	z-index: 1;
	
}

.imageFade .bottomImage {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	filter: grayscale(100%);
}

.imageFade p {
	position: absolute;
	bottom: 0rem;
	right: 0rem;
	left: 0rem;
	color: white;
	margin: 0;
	padding: 2rem 1rem 3rem;
	font-size: 4rem;
	font-weight: bold;
	text-align: center;
	z-index: 2;
	line-height: 4rem;
	text-shadow: 0 0 5px #000000;
	text-transform: lowercase;
}

/*.imageFade p > div:nth-of-type(1) {
	color: #591abf;
}

.imageFade p > div:nth-of-type(2) {
	color: #3ba4fe;
}

.imageFade p > div:nth-of-type(3) {
	color: #50d09a;
}

.imageFade p > div:nth-of-type(4) {
	color: #a0e531;
}

.imageFade p > div:nth-of-type(5) {
	color: #daf831;
}

.imageFade p > div:nth-of-type(6) {
	color: #f9dd18;
}

.imageFade p > div:nth-of-type(7) {
	color: #f5a500;
}

.imageFade p > div:nth-of-type(8) {
	color: #f84707;
}*/

/* @end image fade */

/* @group Box Out Left */

.boxOut {
	padding: 1rem;
	border-radius: 10px;
	border: 5px double var(--spinPurple);
	position: relative;
}

.boxOut ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}

.boxOut ul li {
	color: var(--spinPurple);
	margin-bottom: .2rem;
	list-style: none;
	font-size: 2rem;
}

.boxOut ul li b {
	font-weight: bold;
	display: block;
}

.boxOut h4 {
	text-align: center;
	color: var(--spinGreen);
	margin: 1.5rem 0 2rem;
	text-transform: uppercase;
	font-size: 2.5rem;
	border-bottom: 1px solid var(--spinPurple);
	padding-bottom: 1rem;
}

/* @end box out left */

/* @group Main Book */

.mainBook {
	text-align: center;
	color: white;
	font: 3rem/4rem var(--subLogoFont);
	position: relative;
	margin: 4rem 2rem;
}

.mainBook a {
	color: white;
	background-color: red;
	background-color: var(--spinPurple);
	display: block;
	padding: 2rem 0 0;
	margin: 0;
	line-height: 3rem;
	border-radius: 10px;
	position: relative;
	text-shadow: 0 1px 2px black;
}

.mainBook::before {
	content: "";
	color: white;
	background-color: var(--spinGreen);
	display: block;
	padding: 2rem 0 0;
	margin: 0;
	line-height: 3rem;
	border-radius: 10px;
	position: absolute;
	bottom: -.5rem;
	right: 1rem;
	left: 1rem;
	top: -.5rem;
	transition: all .3s ease-in-out 0s;
}

.mainBook:hover::before {
	background-color: var(--purpleHover);
	top: -.2rem;
	bottom: -.2rem;
}

.mainBook:hover a {
	color: #f0f0ef;
}

/*.mainBook::before {
	content: "\f719";
 	font: normal normal 5.5rem "Font Awesome\ 5 Pro";
}

.mainBook::after {
	content: "sdfs";
}*/

/* @end main book */


/* @group Images Offset Gal */

.imagesOffsetGal {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: flex-start;
	align-content: center;
	height: 15rem;
	width: 100%;
	background: url(../img/graphics/shapes/blotch/626/blotch.webp) 0 50% repeat-x;
	background-size: contain;
	margin-top: 5rem;
	margin-bottom: 5rem;
}

.imagesOffsetGal span {
	height: 100%;
	margin-right: 1rem;
	margin-left: 1rem;

	position: relative;
	width: 12rem;
}

.imagesOffsetGal span::before {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.imagesOffsetGal span img {
	object-fit: cover;
	object-position: center center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	border-radius: 5px;
}

.imagesOffsetGal span:nth-of-type(1) img {
	transform: rotate(-5deg);
}

.imagesOffsetGal span:nth-of-type(2) img {
	transform: rotate(2deg);
}

.imagesOffsetGal span:nth-of-type(3) img {
	transform: rotate(-3deg);
}

.imagesOffsetGal span:nth-of-type(4) img {
	transform: rotate(6deg);
}

.imagesOffsetGal span:nth-of-type(5) img {
	transform: rotate(-7deg);
}

/* @end images offset gal*/


/* @group Spotlight Pic Floated */

.spotlightPic {
	width: 40%;
	margin-bottom: 2rem;
	margin-top: 2rem;
	max-width: 40rem;
}

.spotlightPic.right {
	float: right;
	margin-left: 5rem;
}

.spotlightPic.left {
	float: left;
	margin-right: 5rem;
}

.spotlightPic img {
	width: 100%;
}

/* @end spotlight pic floated */


/* @group Promo Blocks */

/* @group Frame */

.promoBlocks {
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
}

.promoBlocks > div {
	position: relative;
}

.promoBlocks .left {
	flex: 1;
}

.promoBlocks .right {
	flex: 1.3;
	align-self: stretch;
}

.promoBlocks > div .promo {
	border-style: solid;
	border-color: var(--spinGreen);
}

.promoBlocks .left .promo {
	position: relative;
	height: 50%;
	margin-bottom: 1rem;
	margin-right: 1rem;
}

.promoBlocks .right .promo {
	position: relative;
	margin-right: 0;
	height: calc(100% - 2rem);
}

/* @end frame */

/* @group Content */

.promoBlocks .promo .content {
	position: relative;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.78);
	padding: 2rem;
}

.promoBlocks .promo .content .promoContentPic .promoContentPicBack {
	width: calc(100% + 4rem);
	margin-left: -2rem;
	margin-top: -2rem;
	height: 30rem;
	object-fit: cover;
	-webkit-mask-image: -webkit-gradient(linear, left 0%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
}

.promoBlocks > div .promo .content h2 {
	margin: -3rem 0 0;
	font-size: 3rem;
	line-height: 3.7rem;
}

.promoBlocks .right .promo .content {
	background-color: var(--spinPurple);
}

.promoBlocks .right .promo .content h2 {
	color: white;
	text-align: center;
	margin-top: 1rem;
}

.promoBlocks .right .promo .promoContentPic {
	position: relative;
}

.promoBlocks .right .promo .promoContentPic .promoContentPicInline {
	position: absolute;
	top: 50%;
	width: 80%;
	height: 80%;
	margin-top: -25%;
	left: 50%;
	margin-left: -40%;
	border-style: solid;
	z-index: 1;
}

.promoBlocks .right .promo .content p {
	color: white;
}

/* @end content */

/* @group Image Wrap */

.promoBlocks > div .promo .imgWrap {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: var(--spinWhite);
}

.promoBlocks .right .promo .imgWrap {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: -1rem;
	background-color: var(--spinWhite);
}

.promoBlocks > div .imgWrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	filter: blur(1px) brightness(2) opacity(0.3);
}

/* @end image wrap */

/* @end promo blocks */

/* @group Simple Float Wrap */

.floatWrap img {
	shape-margin: 3rem;
	shape-image-threshold: 0.30;
	display: block;
}

.floatWrapRight img {
	width: 45%;
	float: right;
	shape-outside: url(../img/kindergrime-workshops/halloween/450/girls.webp);
	margin-left: 3rem;
}

.floatWrapLeft img {
	width: 15%;
	float: left;
	shape-outside: url(../img/kindergrime-workshops/head/150/head.webp);
	margin-right: 5rem;
}

/* @end simple float wrap */

/* @group Banner - Inline Promo */

.banner {
	position: relative;
}

.banner .inlinePromo {
	position: relative;
	z-index: 2;
	transform-style: preserve-3d;
	transform: translateZ(10px);/*Fix for safari dissapear behind elements*/
}

.banner .inlinePromo h2 {
	margin: -12rem 0 0;
}

.banner .inlinePromo h2 img {
	width: 60%;
}

.banner .inlinePromo p {
	font-weight: normal;
	font-style: normal;
	color: black;
}

.banner .inlinePromo p a {
	font-weight: bold;
}

/* @end banner - inline feature */


/* @group Studio Scroller */

.studioScrollerWrap {
	position: absolute!important;
	right: 0;
	left: 0;
	bottom: 7rem;
	width: 100%;
	max-width: 100%!important;
}

.studioScroller {
	width: 100%;
}

.studioScroller .carouselCell {
	width: 16rem;
	height: 16rem;
	margin-right: 3rem;
	background: #ffffff;
	border-radius: 5px;
	counter-increment: carousel-cell;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	border: 2px solid #138900;
	overflow: hidden;
}

.studioScroller .carouselCell picture {
	height: 100%;
	width: 100%;
}

.studioScroller .carouselCell img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	vertical-align: bottom;
	display: block;
}

.studioScroller .flickity-viewport {
	overflow: hidden;
	position: relative;
	height: 100%;
}

.studioScroller .flickity-slider {
	position: absolute;
	width: 100%;
	height: 100%;
}

.studioScroller .flickity-prev-next-button {
	display: none;
}

/* @end studio scroller */

/* @group Workshops Accordion */

/* @group Frame */

.accordion {

}

.accordion .accordionElem {
	margin-bottom: 3rem;
}

.accordion .accordLink {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
}

.accordion .accordContent {
	 /*Stops the paragraph margin from pushing entire element*/
	height: 0;
	overflow: hidden;
	position: relative;
}

.accordion .accordContent {
	height: 0;
}

.accordion .accordContent.active {
	height: auto;
}

/* @end frame */

/* @group Link */

/* @group Frame */

.workshopAccordion .accordLink > div {
	width: 100%;
} 

.workshopAccordion .accordLink .top {
	background-color: var(--spinPurple);
	flex: 1;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
	padding: 2rem;
	border-radius: 10px;
	position: relative;
	cursor: pointer;
}

.workshopAccordion #beginnersWorkshopAccord .accordLink div:first-of-type {
	border-radius: 10px 10px 0px 0px;
}

.workshopAccordion .accordLink .bottom {
	background-color: var(--spinGreen);
	border-radius: 0px 0px 10px 10px;
}

/* @end frame */

/* @group Top */

.workshopAccordion .accordLink .top > div {
	position: relative;
}

.workshopAccordion .accordLink .top > div:first-of-type {
	flex: 1;
}

.workshopAccordion .accordLink .top > div:last-of-type {
	border-radius: 10px;
	overflow: hidden;
	margin-top: -2rem;
	margin-right: -2rem;
	margin-bottom: -4rem;
}

.workshopAccordion .accordLink .top > div:last-of-type img {
	-webkit-mask-image: url(../img/kindergrime-workshops/shape1.webp);
	-webkit-mask-position: center center, bottom right;
	-webkit-mask-repeat: no-repeat, no-repeat;
	-webkit-mask-size: 100% 100%, 100% 100%;
	-webkit-mask-composite: source-over;
	width: 35rem;
	margin-top: -5rem;
	margin-right: -5rem;
	opacity: 0.3;
}

.workshopAccordion .accordLink .top .title {
	flex: 2.2;
	align-self: stretch;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	font: 5rem var(--logoFont);
	color: white;
	transition: letter-spacing .3s ease-in-out 0s;
	text-shadow: 0 1px 5px black;
	margin: 0;
}

.workshopAccordion .accordLink .top .topSubtitle {
	color: rgba(255, 255, 255, 0.89);
	font: normal normal 1.8rem var(--HFont);
	margin-top: 1rem;
	line-height: 2.5rem;
}

.workshopAccordion .accordLink .top:hover .title,
.workshopAccordion .accordLink.active .top .title {
	letter-spacing: 2px;
	text-shadow: 0 1px 10px black;	
}

.workshopAccordion .accordLink.active .top {
	background-color: var(--spinGreen);
}

.workshopAccordion .accordLink.active .bottom {
	background-color: var(--spinPurple);
}

/* @end top */

/* @group Bottom */

.workshopAccordion .accordLink .bottom p {
	margin: 0;
	color: white;
	padding: .5rem 1rem;
}

.workshopAccordion .accordLink .bottom p strong {
	font-weight: bold;
	
}

/* @end bottom */

/* @end link */

/* @group Content */

.workshopAccordion .beginnersworkshopFormAccord .accordContent .accordContentInner .mason > div > div {
	background-size: cover;
}

.workshopAccordion .accordContent .accordContentInner {
	margin-top: 0;
	border-radius: 0 0 10px 10px;
	padding-top: 1px; /*Stops the paragraph margin from pushing entire element*/
}

.workshopAccordion .accordContent h3 {
	margin: 1rem 0rem 2rem;
	font: 2.5rem / 4rem var(--subLogoFont);
	color: var(--spinPurple);
}

.workshopAccordion .accordContent p {
	
}

.workshopAccordion .accordContent .masonInner.pic {
	padding: 0!important;
}

.workshopAccordion .accordContent .masonInner.pic img {
	border-radius: 10px;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* @group Two Column List */

.workshopAccordion .accordContent ul.twoColmumnList {
	column-count: 2;
	column-gap: 1rem;
	margin-top: 2rem;
	margin-bottom: 2rem;
	background-image: none;
}

.workshopAccordion .accordContent ul.twoColmumnList li {
	list-style: none;
	color: var(--spinGreen);
	margin-left: 2rem;
	text-align: left;
}

/* @end two column list */

/* @group Lined Title */

.linedTitle {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: flex-start;
	margin-top: 4rem;
	margin-bottom: 1rem;
}

.linedTitle .right {
	flex: 1;
	height: 2px;
	background-color: var(--spinGreen);
	position: relative;
	margin-right: 3rem;
}

.linedTitle .center {
	margin-right: 2rem;

}

.linedTitle .center h3 {
	font: 3.5rem var(--subLogoFont);
	color: var(--spinPurple);
	margin-top: 2.2rem;
	letter-spacing: 1px;
}

.linedTitle .right {
	flex: 5;
	margin-right: 3rem;
}

.linedTitle .right::after {
	content: "";
	position: absolute;
	right: 0;
	width: 2rem;
	height: 2rem;
	background: url(../img/graphics/shapes/spinSide/spinSide.webp) center center no-repeat white;
	background-size: 70%;
	border-radius: 10px;
	top: -1rem;
	border: 1px solid var(--spinGreen);
}

/* @end lined title */

/* @group Workshop Pricing */

.workshopPricing {
	
}

.workshopPricing p strong {
	font-weight: bold;
	color: var(--spinGreen);
}

.workshopPricing .workshopPrices {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	margin-right: -1rem;
	margin-left: -1rem;
}

.workshopPricing .workshopPrices a {
	font-size: 2rem;
	background-color: var(--spinPurple);
	padding: .5rem;
	flex: 1 30rem;
	text-align: center;
	margin: 1rem 1rem 0;
	border-radius: 10px;
	color: white;
	transition: background .3s ease-in-out 0s;
}

.workshopPricing .workshopPrices a:hover {
	background-color: var(--spinGreen);
}

.workshopPricing .workshopPrices a strong {
	margin-right: .5rem;
}


/* @end */

/* @group Masonary Effect */

/* @group Frame */

.mason {
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
}

.mason > div {
	margin-left: -1rem;
	margin-right: -1rem;
}

.mason > div > div {
	padding: 2rem;
	background-color: rgba(192, 192, 192, 0.26);
	margin: 1rem;
	border: 1px solid var(--spinGreen);
	border-radius: 10px;
}

/* @end frame */

/* @group Mason 1 */

.mason1 .mas.left {
	flex: 4;
}

.mason1 .mas.right {
	flex: 1;
	align-self: stretch;
	margin-left: 1rem;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start
}

.mason1 .mas.right div {
	width: calc(100% - 2rem);
	flex: 1;
}

/* @end mason 1 */

/* @group Mason 2 */

.mason2 .mas.left {
	flex: 1;
	align-self: stretch;
}

.mason2 .mas.left div {
	height: calc(100% - 2rem);
}

.mason2 .mas.right {
	flex: 6;
	align-self: stretch;
	margin-left: 1rem;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start
}

.mason2 .mas.right div {

}

/* @end mason 2*/

/* @group Mason 3 */

.mason3 .mas.full {
	flex: 1;
	width: 100%;
}

/* @end mason 3*/

/* @group Mason 4 */

.mason4 .mas.left {
	flex: 2;
}

.mason4 .mas.left div {
	margin-right: 3rem;
}

.mason4 .mas.right {
	flex: 1;
	align-self: stretch;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
}

.mason4 .mas.right div {
	flex: 1;
	height: calc(100% - 2rem);
}

/* @end mason 4*/

/* @end masonry effect */

/* @end content */

/* @end workshops accordion */

/* @group Animaties */

/* @group Nav */

.animatiesWrap {
	min-height: 100vh;
}

.animaties {
	padding-top: 2rem;
	padding-bottom: 2rem;
	border-right-style: none;
	border-left-style: none;
}

.animaties h2 {
	text-align: left;
	margin: 0;
}

.animaties nav {
	position: relative;
}

.animaties nav div {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: flex-start;
	align-content: flex-start;
}

.animaties nav div a {
	position: relative;
	display: block;
	width: calc(33.3% - 0rem);
	margin-top: 2rem;
	margin-bottom: 1rem;
	perspective: 500px;
}

.animaties nav div a img {
	width: 100%;
	-webkit-mask-image: url(../img/graphics/masks/colourBlockMaskMedium.webp);
	-webkit-mask-position: center center, bottom right;
	-webkit-mask-repeat: no-repeat, no-repeat;
	-webkit-mask-size: 100% 100%, 100% 100%;
	-webkit-mask-composite: source-over;
	mask-image: url(../img/graphics/masks/colourBlockMaskMedium.webp);
	mask-position: center center, bottom right;
	mask-repeat: no-repeat, no-repeat;
	mask-size: 100% 100%, 100% 100%;
	mask-composite: source-over;
	z-index: 1;
	position: relative;
}

.animaties nav div a span {
	font: 1.8rem/3rem var(--swirlyFont);
	letter-spacing: 2px;
	color: var(--spinPurple);
	display: block;
	text-align: center;
	/*background-color: #f4f4f4;*/
	padding-top: 1rem;
	position: relative;
	z-index: 5;
	margin-right: 2rem;
	margin-left: 3.6rem;
	padding-bottom: 1rem;
	border-top-width: 1px;
	border-top-style: dashed;
}

.animaties nav:hover div a span,
.animaties nav:hover div a span > * {
	will-change: transform, filter;
}

.animaties nav div a:hover img {
	will-change: filter, opacity;
}

/* @group Nav Slider Buttons*/

.animaties .navSlider {
	background-color: var(--spinPurple);
	border-radius: 100%;
	width: 3rem;
	height: 3rem;
	display: block;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	color: white;
	font-weight: bold;
	position: absolute;
	z-index: 2;
	box-shadow: 0 0 5px black;
	top: .2rem;
	cursor: pointer;
	opacity: 0;
	transform-origin: 50% 100%;
	border-style: solid;
}

.animaties .navSlider:hover {
	background-color: var(--spinGreen);
}

.animaties .navSlider:active {
	background-color: var(--spinGreenDark);
}

.animaties .navSlider.navLeft {
	left: 1rem;
}

.animaties .navSlider::after {
	content: "";
	position: absolute;
	width: 2rem;
	height: 6rem;
	top: -1.6rem;
	background-color: var(--spinWhite);
	border-radius: 100%;
}

.animaties .navSlider.navLeft::after {
	left: 3rem;
	/*background: linear-gradient(to right, #ffffff 8.3%, #ffffff 21.9%, rgba(255, 255, 255, 0.8) 48.8%, rgba(255, 255, 255, 0) 100%);*/
	box-shadow: 10px 0 5px rgba(0, 0, 0, 0.20);
}

.animaties .navSlider.navRight::after {
	right: 3rem;
	box-shadow: -10px 0 5px rgba(0, 0, 0, 0.20);
}

.animaties .navSlider.navRight {
	right: 1rem;
}

/* @end nav slider buttons */

/* @end nav */

/* @group Nav On */

.navOn.animaties nav div {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	overflow-x: scroll;
	overflow-y: hidden;
	width: calc(100% - 12rem);
	white-space: nowrap;
	margin-left: 6rem;
	padding-bottom: 2rem;
	-webkit-overflow-scrolling: touch;
	scroll-snap-points-y: repeat(300px);
	scroll-snap-points-x: repeat(300px);
	scroll-snap-type: both mandatory;
}

/*.navOn.animaties nav div::after {
	content: "";
	background-color: var(--spinWhite);
	height: 1rem;
	position: absolute;
	bottom: -.1rem;
	left: 0;
	right: 0;
	transition: all .3s ease-in-out 0s;
}*/

.navOn.animaties:hover nav div::after {
	opacity: 0;
	transform: translateY(1rem);
}

.navOn.animaties nav div a {
	width: auto;
	height: auto;
	min-width: auto;
	box-shadow: 0 0 0px rgba(0, 0, 0, 0);
	padding: 1rem 2rem 0;
	white-space: nowrap;
	display: inline-block;
	transition: box-shadow .3s ease-in-out 0s;
	perspective: none;
	border-radius: 10px;
	margin: 0 1rem;
	will-change: filter;
	scroll-snap-stop: normal;
	scroll-snap-align: start;
	scroll-snap-type: both mandatory;
}

.navOn.animaties nav div a:first-child {
	margin-left: 2rem!important;
}

.navOn.animaties nav div a:last-child::after {
	display: inline-block;
	width: 10rem;
}

.navOn.animaties nav div a span {/*important is an easy fix for a FLIP problem*/
	font: 2rem/1.2rem var(--swirlyFont)!important;
	color: var(--spinPurple);
	display: inline;
	margin: 0;
	border-top-style: none;
	padding: 0;
	will-change: transform;
}

.navOn.animaties nav div a:active:not(.current) {
	background-color: var(--spinDarkPurple);
}

.navOn.animaties nav div a:hover:not(.current) {
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

.navOn.animaties nav div a.current {
	background-color: var(--spinPurple);
	box-shadow: 0 3px 15px rgba(0, 0, 0, 0.23);
}

.navOn.animaties nav div a.current span {
	color: white;
}

.navOn.animaties nav div a:first-of-type {
	margin-left: 0;
}

.navOn.animaties nav div a img {
	opacity: 0;
	display: none;
}

.navOn.animaties nav div a span {
	font: 2rem/3rem var(--swirlyFont);
	letter-spacing: 1px;
	position: static;
	padding: 1.6rem 0rem 1rem;
	flex-flow: row nowrap;
	color: var(--spinPurple);
	text-shadow: 0 0 rgba(0, 0, 0, 0);
}

.navOn.animaties nav a span b {
	font: 2rem/3rem var(--swirlyFont);
	margin-left: .7rem;
	margin-top: 0;
	margin-bottom: 0;
}

.firstChange,
.navOn.animaties .firstChange {
	order: -1!important;
}



/* @end nav on */

/* @group Animatie Page */

/* @group Studio Scroller */

.animatiesBanner {
	
}

.loadIntoAnim .byeSpin {
	display: none;
}

.animatieGalleryWrap {
	margin-bottom: 5rem;
	margin-top: 2rem;
}

.animatieGalleryWrap .animatieGallery {

}

.animatieGalleryWrap .animatieGallery .carouselCell {
	margin-right: 2rem;
	overflow: hidden;
	border-radius: 20px;
	width: 70rem;
	height: 40rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	background: url(../img/graphics/shapes/blotch/626/blotch.webp) #138900;
	background-size: cover;
	background-color: var(--spinGreen);
	background-blend-mode: multiply;
}

.animatieGalleryWrap .animatieGallery .carouselCell .cellInner {
	width: calc(100% - 5rem);
	height: calc(100% - 5rem);
	overflow: hidden;
	border-radius: 20px;
}

.animatieGalleryWrap .animatieGallery .carouselCell .cellInner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: 20px;
	display: block;
}

/* @end studio scroller */

/* @group Animatie Act Content */

.animatieSub .content h2:first-of-type {
	float: left;
	margin: -.3rem 1rem -2rem 0;
	font: 2.5rem var(--subLogoFont);
	color: var(--spinPurple);
}

.singleEntry .hideIfSolo {
	display: none;
}

.singleEntry .extraPricingInfo {
	border-bottom-style: none!important;
	padding-bottom: 0!important;
}

/* @end animatie act content */

/* @end animatie page */

/* @group Other Acts */

.otherActsRotate {
	transform: rotate(-3deg);
	margin-top: 5rem;
	margin-bottom: 5rem;
	padding-top: 1px;
	padding-bottom: 1px;
}

.otherActsRotate .otherActsTop h2 {
	margin: 0;
	text-align: center;
	width: 100%;
	padding-right: 5rem;
	padding-left: 5rem;
}

.otherActsRotate .otherActsBack {
	background-color: silver;
	margin-bottom: -8rem;
}

.otherActsRotate .flickity-button {
	box-shadow: 0 1px 2px black;
	background-color: white;
	margin-top: 5%;
}

.otherActsRotate .flickity-button.next {
	right: 5rem;
}

.otherActsRotate .flickity-button.previous {
	left: 5rem;
}

.otherActsRotate .otherActsBack .otherActsScroller .carouselCell {
	width: 30%;
	margin-right: 2rem;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: stretch;
	padding-bottom: 4rem;
	padding-top: 4rem;
	min-height: 25rem;
}

.otherActsRotate .otherActsBack .otherActsScroller .carouselCell div {
	flex: 1;
	align-self: stretch;
	width: 90%;
	background-color: #f7f7f7;
	padding: 2rem 7rem 2rem 2rem;
	border-radius: 10px;
	border: 1px solid #e9e8e8;
	position: relative;
	overflow: hidden;
}

.otherActsRotate .otherActsBack .otherActsScroller .carouselCell:nth-of-type(odd) div {
	transform: rotate(3deg);
}

.otherActsRotate .otherActsBack .otherActsScroller .carouselCell:nth-of-type(even) div {
	transform: rotate(-3deg);
}

.otherActsRotate .otherActsBack .otherActsScroller .carouselCell div:hover strong i {
	color: var(--spinGreen);
}

.otherActsRotate .otherActsBack .otherActsScroller .carouselCell div strong {
	color: var(--spinGreen);
	display: block;
	margin-bottom: 1rem;
	margin-left: 0rem;
	font-size: 2.2rem;
}

.otherActsRotate .otherActsBack .otherActsScroller .carouselCell div strong i {
	color: #e6e4e4;;
	border-radius: 100%;
	font-size: 2.8rem;
	background-color: var(--spinWhite);
	position: absolute;
	top: -2rem;
	right: -2rem;
	width: 8rem;
	height: 8rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	padding: 1rem 1rem 0 0;
	transition: color .3s ease-in-out 0s;
}

/* @end */

/* @end animaties */

/* @group Pic Quote */

.picQuote {
	width: calc(100% - 10rem);
	background-color: silver;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	margin-top: 5rem;
	margin-bottom: 5rem;
	margin-left: 5rem;
}

.picQuote > div {
	flex: 1;
}

.picQuote .pic {
	width: 100%;
	background-color: red;
	margin: 0!important;
	padding: 0!important;
	border-right: 5px solid white;
	align-self: stretch;
}

.picQuote .pic img {
	width: 100%;
	height: 100%;
	min-height: 40rem;
	margin: 0!important;
	padding: 0!important;
	display: block;
	object-fit: cover;
	object-position: center center;
}
			
.picQuote .quote {
	flex: .7;
	align-self: stretch;
	background-color: green;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	position: relative;
	border-right: 1rem solid #247f00;
}

.picQuote .quote::before {
	content: "";
	position: absolute;
	top: -1rem;
	right: -1rem;
	width: 10rem;
	height: 10rem;
	background-color: var(--spinDarkGreen);
	border: 1rem solid var(--spinPurple);
	border-left-style: none;
	border-bottom-style: none;
}

.picQuote .quote p {
	display: block;
	width: 70%;
	color: white;
	font: 3rem var(--HFont);
	line-height: 4rem;
	text-align: left;
	text-shadow: 0 1px 2px black;
}

/* @end pic quote */

/* @group Tag Box */

/* @group Frame */

.tagBox {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: flex-start;
	align-content: flex-start;
	height: 100%;
}

.tagBox > div {
	
}

.tagBox .left {
	flex: 1;
}

.tagBox .middle {
	
}

.tagBox .right {
	
}

/* @end frame */

/* @group Left */

.tagBox .left.content {
	align-self: stretch;
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.tagBox .left.content h4 {
	background-color: var(--spinPurple);
	display: block;
	color: white;
	margin: 0;
	text-align: left;
	padding: 4rem 2rem 2rem;
	font: 3rem var(--swirlyFont);
	border-radius: 20px;
}

.tagBox .left.content p {
	margin-left: 3rem;
	margin-right: 3rem;
}


/* @end left*/

/* @group Middle */

.tagBox .middle.strip {
	align-self: stretch;
	width: 5rem;
	margin-right: 2rem;
	margin-left: 2rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.tagBox .middle.strip .line {
	background-color: var(--spinPurple);
	width: .5rem;
	align-self: stretch;
	margin-bottom: 1.5rem;
	margin-top: 1rem;
	position: relative;
}

.tagBox .middle.strip .line::before,
.tagBox .middle.strip .line::after {
	content: "";
	width: 2rem;
	height: 2rem;
	position: absolute;
}

.tagBox .middle.strip .line::before {
	background-color: var(--spinPurple);
	border-radius: 100%;
	left: -.75rem;
	top: -1rem;
}

.tagBox .middle.strip .line::after {
	background: url(../img/graphics/shapes/spinSide/spinSide.webp) center center no-repeat;
	background-size: contain;
	width: 5rem;
	height: 5rem;
	left: -2.2rem;
	bottom: -3rem;
}

/* @end middle */

/* @group Right */

.tagBox .right.tags {
	align-self: stretch;
	margin-top: 3rem;
	margin-bottom: 3rem;
/*	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(5, 1fr);
	grid-column-gap: 1rem;
	grid-row-gap: 1rem; */
}

.tagBox .right.tags a {
	background-color: var(--spinPurple);
	color: white;
	display: inline-block;
	border-radius: 50%;
	min-width: 5rem;
	min-height: 5rem;
	color: white;
	text-align: center;
	line-height: 1;
	box-sizing: content-box;
	white-space: nowrap;
	padding: 2rem;
	font-size: 2rem;
	font-weight: bold;
}

.tagBox .right.tags a:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	padding-top: 100%;
	height: 0;
}

.tagBox .right.tags a span {
	display: inline-block;
	vertical-align: middle;
}

/* @end right */

/* @end tag box */



/* @group Features */

/* @group Frame */

.bulletList {
	
}

.bulletList > div {
	
}

.bulletList > div .bulletListWrap {
	margin: 0 3rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-end;
}



/* @end frame */


/* @group Feature Title */

.bulletList > div .bulletListTitle > div {

}

/* @end feature title */

/* @group Feature Content */

.bulletList > div ul {
	flex: 1;
	margin: 3rem 0rem;
	position: relative;
	display: grid; 
	grid-template-columns: repeat(2, 1fr); 
	grid-template-rows: repeat(6, 1fr); 
	grid-column-gap: 3rem;
	grid-row-gap: 3rem; 
}

.bulletList > div ul li {
	list-style: none;
	background-color: #f7f7f7;
	padding: 2rem 7rem 2rem 2rem;
	border-radius: 10px;
	position: relative;
	border: 1px solid #e9e8e8;
}

.bulletList > div ul li:hover strong i {
	color: var(--spinGreen);
}

.bulletList > div ul li strong {
	color: var(--spinGreen);
	display: block;
	margin-bottom: 1rem;
	margin-left: 0rem;
	font-size: 2.2rem;
}

.bulletList > div ul li strong i {
	color: #e6e4e4;;
	border-radius: 100%;
	font-size: 2.8rem;
	background-color: var(--spinWhite);
	position: absolute;
	top: -2rem;
	right: -2rem;
	width: 8rem;
	height: 8rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	padding: 1rem 1rem 0 0;
	transition: color .3s ease-in-out 0s;
}


/* @end feature content*/

/* @end features */

/* @group Full Link Boxes */

.fullLinkBoxes {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}

.fullLinkBoxes p {
	flex: 1;
	text-align: center;
	font-weight: bold;
	color: white;
	text-shadow: 0 1px 2px black;
	font-size: 2.2rem;
	border-radius: 10px;
	background-color: #288800;
	padding-top: 1rem;
	margin-right: 1rem;
	margin-left: 1rem;
}

.fullLinkBoxes p a {
	display: block;
	text-shadow: none;
	background-color: var(--spinPurple);
	color: white;
	padding: 1rem;
	margin-top: 1rem;
	font-size: 1.7rem;
	text-transform: uppercase;
	border-radius: 0 0 10px 10px;
}

.fullLinkBoxes p a:hover {
	background-color: var(--spinPurpleDark);
}

/* @end full link boxes */

/* @group Grid Promo */

.gridPromo {
	display: grid; 
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(3, 1fr); 
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	margin-bottom: 2rem;
	height: 40rem;
	margin-top: 0rem;
}

.gridPromo div {
	border: 5px solid var(--spinGreen);
	position: relative;
}

.gridPromo div img {
	width: 100%;
	height: 100%;
}

.gridPromo div p {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	right: 1rem;
	background-color: var(--spinGreen);
	border-radius: 10px;
	padding: 1rem;
	margin: 0;
	color: white;
	text-align: center;
	border: 3px solid white;
}

.gridPromo div:nth-of-type(1) {
	grid-area: 1 / 1 / 4 / 4; 
}

.gridPromo div:nth-of-type(2) {
	grid-area: 1 / 4 / 3 / 7; 
}

.gridPromo div:nth-of-type(2) p {
	right: 20rem;
	text-align: right;
}

.gridPromo div:nth-of-type(3) {
	grid-area: 3 / 4 / 4 / 5;
}

.gridPromo div:nth-of-type(4) {
	grid-area: 3 / 5 / 4 / 6
}

.gridPromo div:nth-of-type(5) {
	grid-area: 3 / 6 / 4 / 7; 
}

/* @end grid promo */

/* @group Mix Box */

.mixBox.right {
	float: right;
}

.mixBox { 
	display: grid; 
	grid-template-columns: repeat(3, 1fr); 
	grid-template-rows: repeat(10, 1fr); 
	grid-column-gap: 10px;
	grid-row-gap: 10px; 
	width: 50%;
	height: 50rem;
	margin-left: 5rem;
	margin-bottom: 5rem;
}

.mixBox > div {
	border: 5px solid var(--spinGreen);
	position: relative;
	display: none;
}

.mixBox div img {
	width: 100%;
	height: 100%;
}

.mixBox div p {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	right: 1rem;
	background-color: var(--spinGreen);
	border-radius: 10px;
	padding: 1rem;
	margin: 0;
	color: white;
	text-align: center;
	border: 3px solid white;
}

.mixBox div:nth-of-type(1) {
	grid-area: 1 / 1 / 7 / 4;
	display: block;
} 

.mixBox div:nth-of-type(2) {
	grid-area: 7 / 1 / 11 / 2;
	display: block;
}

.mixBox div:nth-of-type(3) {
	grid-area: 7 / 2 / 9 / 3;
	display: block;
}

.mixBox div:nth-of-type(4) {
	grid-area: 7 / 3 / 9 / 4;
	display: block;
}

.mixBox div:nth-of-type(5) {
	grid-area: 9 / 2 / 11 / 4;
	display: block;
}

/* @end mix box */

/* @group Middle Line Title */

.middleLineTitle {
	margin: -1rem -3rem 0rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: flex-start;
	border-radius: 10px 10px 0 0;
}

.middleLineTitle .line {
	align-self: stretch;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}

.middleLineTitle .line::after {
	content: "";
	background-color: var(--spinPurple);
	height: .3rem;
	width: 100%;
	border-radius: 2rem;
}

.middleLineTitle .left {
	flex: 1;
}

.middleLineTitle .middle {
	margin: 1rem 2rem 0;
}

.middleLineTitle .middle h2 {
	will-change: transform;
	margin: .8rem 0 0;
	color: var(--spinPurple);
}

.middleLineTitle .middle h2::after {
	display: none!important;
}

.middleLineTitle .right {
	flex: 1;
}

/* @end middle line title*/

/* @group Typical Course */

.typicalCourse span {
	color: var(--spinGreen);
}

.typicalCourse span b {
	font-weight: 800;
}

/* @end typical course */

/* @group Bye Spin */

.byeSpin {
	width: 100%;
	text-align: center;
	margin-top: 10rem;
	margin-bottom: 10rem;
}

.byeSpin img {
	margin-right: auto;
	margin-left: auto;
	width: 100%;
}

/* @end bye spin */

/* @group Cookie */
 	
 	.cc-window{opacity:1;-webkit-transition:opacity 1s ease;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{-webkit-transition:transform 1s ease;-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease}.cc-animate.cc-revoke.cc-top{-webkit-transform:translateY(-2em);transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{-webkit-transform:translateY(2em);transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-top{-webkit-transform:translateY(0);transform:translateY(0)}.cc-animate.cc-revoke.cc-active.cc-bottom{-webkit-transform:translateY(0);transform:translateY(0)}.cc-revoke:hover{-webkit-transform:translateY(0);transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;-webkit-transition:max-height 1s;transition:max-height 1s}
 	.cc-revoke,.cc-window{position:fixed;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Helvetica,Calibri,Arial,sans-serif;font-size:16px;line-height:1.5em;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;z-index:9999}.cc-window.cc-static{position:static}.cc-window.cc-floating{padding:2em;max-width:24em;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner{padding:1em 1.8em;width:100%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.cc-revoke{padding:.5em}.cc-revoke:hover{text-decoration:underline}.cc-header{font-size:18px;font-weight:700}.cc-btn,.cc-close,.cc-link,.cc-revoke{cursor:pointer}.cc-link{opacity:.8;display:inline-block;padding:.2em;text-decoration:underline}.cc-link:hover{opacity:1}.cc-link:active,.cc-link:visited{color:initial}.cc-btn{display:block;padding:.4em .8em;font-size:.9em;font-weight:700;border-width:2px;border-style:solid;text-align:center;white-space:nowrap}.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-close{display:block;position:absolute;top:.5em;right:.5em;font-size:1.6em;opacity:.9;line-height:.75}.cc-close:focus,.cc-close:hover{opacity:1}
 	.cc-revoke.cc-top{top:0;left:3em;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em}.cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em}.cc-revoke.cc-left{left:3em;right:unset}.cc-revoke.cc-right{right:3em;left:unset}.cc-top{top:1em}.cc-left{left:1em}.cc-right{right:1em}.cc-bottom{bottom:1em}.cc-floating>.cc-link{margin-bottom:1em}.cc-floating .cc-message{display:block;margin-bottom:1em}.cc-window.cc-floating .cc-compliance{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.cc-window.cc-banner{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.cc-banner.cc-top{left:0;right:0;top:0}.cc-banner.cc-bottom{left:0;right:0;bottom:0}.cc-banner .cc-message{display:block;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;max-width:100%;margin-right:1em}.cc-compliance{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between}.cc-floating .cc-compliance>.cc-btn{-webkit-box-flex:1;-ms-flex:1;flex:1}.cc-btn+.cc-btn{margin-left:.5em}
 	@media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-top{top:0}.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner,.cc-window.cc-floating,.cc-window.cc-left,.cc-window.cc-right{left:0;right:0}.cc-window.cc-banner{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner .cc-compliance{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.cc-window.cc-floating{max-width:none}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{-webkit-box-align:unset;-ms-flex-align:unset;align-items:unset}.cc-window.cc-banner .cc-message{margin-right:0}}
 	.cc-floating.cc-theme-classic{padding:1.2em;border-radius:5px}.cc-floating.cc-type-info.cc-theme-classic .cc-compliance{text-align:center;display:inline;-webkit-box-flex:0;-ms-flex:none;flex:none}.cc-theme-classic .cc-btn{border-radius:5px}.cc-theme-classic .cc-btn:last-child{min-width:140px}.cc-floating.cc-type-info.cc-theme-classic .cc-btn{display:inline-block}
 	.cc-theme-edgeless.cc-window{padding:0}.cc-floating.cc-theme-edgeless .cc-message{margin:2em;margin-bottom:1.5em}.cc-banner.cc-theme-edgeless .cc-btn{margin:0;padding:.8em 1.8em;height:100%}.cc-banner.cc-theme-edgeless .cc-message{margin-left:1em}.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn{margin-left:0}
 	
 	/*<div class="cc_css_reboot cc_dialog light headline nl"><div><h1 class="cc_dialog_headline">Wij gebruiken cookies</h1><div><p class="cc_dialog_text">Wij maken gebruik van cookies en andere tracking-technologieën om uw surfervaring op onze website te verbeteren, om gepersonaliseerde inhoud en advertenties te tonen, om onze website trafiek te analyseren en om te begrijpen waar onze bezoekers vandaan komen. <br></p></div><div><button class="cc_b_ok">Ik ga akkoord</button><button class="cc_b_cp">Wijzig mijn voorkeuren</button></div></div></div>*/
 	
 	.cc_dialog {
 		position: fixed!important;
 		right: 10px!important;
 		max-width: 400px!important;
 		bottom: 10px!important;
 		border: 1px solid black!important;
 		border-radius: 20px!important;
 		box-shadow: 0 1px 5px black;
 		background-color: white!important;
 		color: red;
 	}
 	
 	.cc_dialog h5 {
	 	font: 3rem!important;
	 	color: red!important;
 	}
 	/*
 .extra	.extraBottom {
 		opacity: 0!important;
 		visibility: hidden!important;
 	}*/
 	
 	/* @end cookie*/

/* @end reusable modules*/

/* @group Large Screens */

/*Bits that sort the trasnform in place of width tween*/
/*Min Width: Greater than or equal to
Max Width: Width is between 0 and ###px*/

@media screen and (max-width: 1600px) {
		
	main {
		width: calc(100% - 40rem);
	}
	
	.banner {
		width: calc(100% + 10vw);
		margin-left: -5vw;
	}
	
	.multiContentWrapper {
		margin-right: 4vw;
		margin-left: 4vw;
	}
		
}

@media screen and (max-width: 1300px) {
		
	main {
		width: calc(100% - 40rem);
	}
		
}

@media screen and (max-width: 1200px) {
		
	main {
		width: calc(100% - 6rem)!important;
	}
		
}

@media screen and (min-width: 2500px) {
		
	
		
}

/* @end large screens */

/* Styles for print */

@media print {
  
  /* General styles for all elements when printing */
  
  body {
  	font-family: Arial, sans-serif;
    font-size: 12pt;
    color: black;
    background: white;
  }
  
  main .mainContentWrap h2.inline {
  	font: normal normal 1.8rem / var(--textFont);
  	float: left;
  	margin: 0 .5rem 0 0;
  	color: var(--spinPurple);
  }

main .mainContentWrap > article:nth-of-type(1) > h2.inline {
	float: none;
	margin: 0;
	font: 25pt var(--subLogoFont);
	text-align: center;
}

main .mainContentWrap > article:nth-of-type(1) > h2.inline::last-letter {
	display: none;
}


html {
	font: 8pt/10pt "Lucida Grande", Lucida, Verdana, sans-serif;
	color: var(--spinBlack);
	overflow-x: hidden!important;
	/*scroll-behavior: smooth;*/
}

body {
	font: 1.8rem / 3rem var(--textFont);
	font-weight: 100;
}

.bodyUndercover {
	background: url(../img/graphics/shapes/rep/800/rep.webp) -150px top repeat #acfbc5;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 50rem;
}

h1 {
	font: 3rem/2rem var(--logoFont);
	color: var(--spinGreen);
	text-transform: uppercase;
	text-shadow: .1rem .1rem 0rem var(--spinPurple);
	letter-spacing: 0.2rem;
}

h2, h3, h4, h5 {
	font: bold 3rem;
	margin-top: 7rem;
	margin-bottom: 1rem;
	color: var(--spinPurple);
}

p,
h2.inline {
	margin: 2rem 0;
}

ul li {
	
}

a {
	text-decoration: none;
	color: var(--spinPurple);
}

a:hover {
	color: var(--spinGreen);
}

a:active {
	
}

.atop {
	position: relative;
	z-index: 1;
}

.noTopMargin {
	margin-top: 0;
}

.centered {
	text-align: center;
}

  /* Hide elements that are not needed for print */
  
  .noPrint {
    display: none!important;
  }

  /* Page break settings */
  .page-break {
    page-break-before: always;
  }

  /* Specific styles for headers */
  h1, h2, h3, h4, h5, h6 {

    page-break-after: avoid;
  }

  /* Table styles */
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid black;
    padding: 5px;
  }


}