/*!
Theme Name: Alula
Theme URI: https://www.squarebird.co.uk
Author: Squarebird
Author URI: https://www.squarebird.co.uk
Description: A Squarebird Framework
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v3 or later
License URI: LICENSE
Text Domain: alula
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/*--------------------------------------------------------------
- Global Variables
--------------------------------------------------------------*/
/* Uncomment out when developing */

:root {

	/* Colors */
	--color-yellow: #FFC84E;
	--color-dark-yellow: #685222;
	--color-blue: #00E0FF;
	--color-dark-blue: #015e6b;
	--color-teal: #06F1CA;
	--color-dark-teal: #015b4c;
	--color-pink: #F2E7F7;
	--color-dark-purple: #2B0037;
	--color-dark-purple2: #56006E;
	--color-purple: #AB00DC;
	--color-white: #ffffff;
	--color-light-grey: #ccc;

	/* Font Family */
	--font-primary: 'Open Sans', sans-serif;

	/* Font Size */
	--font-size-body: 1rem;

	/* Line Height */
	--line-height-body: 1.5;

	/* Letter Spacing */
	/* Buttons */
	/* Transition */
	--transition: all 0.5s;
	--transition-speed: 0.5s;

	/* Padding */
	--padding-1: 1rem;
	--padding-2: 4rem;
	--padding-3: 5rem;
	--padding-4: 7rem;
	--padding-5: 10rem;
	--padding-side-1: clamp(1.5rem, 2vw, 100vw);
	--padding-side-2: 3vw;
	--padding-side-3: 4vw;
	--padding-side-4: 5vw;
	--padding-side-5: clamp(4rem, 7vw, 100vw);

	/* Margins */
	--margin-1: 1rem;
	--margin-2: 4rem;
	--margin-3: 5rem;
	--margin-4: 7rem;
	--margin-5: 8rem;
	--margin-side-1: clamp(1rem, 2vw, 100vw);
	--margin-side-2: 3vw;
	--margin-side-3: 4vw;
	--margin-side-4: 5vw;
	--margin-side-5: clamp(4rem, 7vw, 100vw);
	
	/* Height */
	--vh: 100%;
	--vh-set: 100%;

}

@media(max-width: 900px) {
	:root {
		/* Padding */
		--padding-2: 2.5rem;
		--padding-3: 3rem;
		--padding-4: 4rem;
		--padding-5: 5rem;
		--padding-side-2: clamp(1rem, 6vw, 100vw);
		--padding-side-5: clamp(1rem, 6vw, 100vw);

		/* Margins */
		--margin-2: 2.5rem;
		--margin-3: 3rem;
		--margin-4: 4rem;
		--margin-5: 5rem;
		--margin-side-5: clamp(1rem, 6vw, 100vw);
	}
}



/* Load additional CSS Files */
/* @import url("css/NAME.css"); */


/*--------------------------------------------------------------
- Typography
--------------------------------------------------------------*/


/* Webfonts
--------------------------------------------- */
/* @import url('URL'); */


/* Base
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--color-dark);
	font-family: var(--font-primary);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
}

html {
	font-size: clamp(16px, 1vw, 100vw);
	scroll-behavior: smooth;
	background: var(--color-pink);
}

body {
	transition: var(--transition);
	margin: 0;
	color: var(--color-dark-purple2);
}

/* Selection */
::selection {
	background: var(--color-purple);
	color: var(--color-white);
}
   
::-moz-selection {
	background: var(--color-purple);
	color: var(--color-white);
}

a::selection {
	color: var(--color-blue);
}

a::-moz-selection {
	color: var(--color-blue);
}


/* Titles
--------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-family: var(--font-primary);
	margin: 0;
	color: var(--color-purple);
	max-width: 100%;
}

h1, .h1 {
	font-size: 2rem;
	font-weight: 400;
}
h2, .h2 {
	font-size: 5.2rem;
	letter-spacing: -0.03em;
	font-weight: 500;
	line-height: 1.1;
	margin-left: -0.09em;
}
h3, .h3 {
	font-size: 5rem;
	letter-spacing: -0.03em;
}
h4, .h4 {
	font-size: 3rem;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.03em;
}
h5, .h5 {
	font-size: 4.6875rem;
}
h6, .h6 {
	font-size: 2.875rem;
}

p {
	font-family: var(--font-primary);
	font-size: 1rem;
	line-height: 1.9;
	margin-top: 0 !important;
	color: var(--color-dark-purple2);
}

p:last-child {
	margin-bottom: 0 !important;
}

.lowercase {
	text-transform: lowercase;
}

.site-footer h5 {
	font-size: clamp(2rem, 3vw, 2.8rem);
	font-weight: 600;
}

.site-footer h5 a {
	transition: 0;
}

.bold {
	font-weight: 900 !important;
}

.regular {
	font-weight: 500 !important;
}

.italic {
	transform: skewX(-10deg);
}

.small-font {
	font-size: 1.3rem !important;
}












/* Elements
--------------------------------------------- */

.grid {
	display: -ms-grid;
	display: grid;
}

.block {
	display: block;
}

.flex {
	display: flex;
}

.align-items-start {
	align-items: start !important;
}

.align-items-center {
	align-items: center !important;
}

.align-items-end {
	align-items: end !important;
}

.justify-items-start {
	justify-items: start !important;
}

.justify-items-center {
	justify-items: center !important;
}

.justify-items-end {
	justify-items: end !important;
}

section {
	overflow: hidden;
	position: relative;
}














/* Menu
--------------------------------------------- */


#masthead.sticky .menu-top-menu-container {
	display: none;
}

#masthead.hide-menu .site-branding,
#masthead.hide-menu .main-menu  {
	top: -4rem !important; 
}

#masthead .row,
.fullscreen-menu ul,
.fullscreen-menu .sub-menu {
	transition: var(--transition);
}

#masthead #logo-text {
	transition-duration: calc(var(--transition-speed) * 2);
}

#masthead #site-navigation .sub-menu {
	position: absolute;
	top: 0;
	left: 50%;
	background: var(--color-white);
	border-radius: 1rem;
	transform: translate(-50%, 3rem);
	transition: var(--transition);
	opacity: 0;
	z-index: -99;
	box-shadow: 0 0 1rem 0.5rem rgba(0,0,0,0.2);
	padding: var(--padding-1) calc(var(--padding-side-1) / 1.5);
}

#masthead #site-navigation li:hover .sub-menu {
	transform: translate(-50%, 2rem);
	opacity: 1;
	z-index: 99;
}

#masthead #site-navigation li .sub-menu:before {
	content: '';
	bottom: 100%;
	left: 0;
	right: 0;
	display: block;
	height: 3rem;
	position: absolute;
}

#masthead #site-navigation .menu-item-has-children > a:after {
	content: "";
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	background-size: auto 0.8em;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(img/button-arrow.svg);
	transform: rotate(90deg);
	float: right;
	margin-left: 0.3em;
}

#masthead #site-navigation .sub-menu a {
	color: var(--color-purple);
	text-align: center;
	white-space: nowrap;
	padding: calc(var(--padding-1) / 2) 0;
	display: block;
	line-height: 1.2 !important;
}

#masthead #site-navigation .sub-menu a:hover {
	font-weight: 900 !important;
	transform: skew(-10deg);
}

#masthead #site-navigation .sub-menu a:not(:last-of-type) {}
	margin-bottom: calc(var(--padding-1) / 2);
}

.main-navigation {
	z-index: 9;
}

.main-navigation ul {
	list-style: none;
}

#masthead {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999999;
    transform: translateY(0);
}

.menu-button .menu-icon span {
	height: 1.5px; 
	background: var(--color-white);
	width: 50%;
	display: block;
	position: absolute;
}

.menu-button .menu-icon span:nth-of-type(1) {
	top: 33%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: background-color var(--transition-speed) 0s, transform var(--transition-speed) 0.3s, width var(--transition-speed);
}

.menu-button .menu-icon span:nth-of-type(2) {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: background-color var(--transition-speed) 0s,transform var(--transition-speed) 0.4s, width var(--transition-speed);
}

.menu-button .menu-icon span:nth-of-type(3) {
	top: 67%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: background-color var(--transition-speed) 0s,transform var(--transition-speed) 0.5s, width var(--transition-speed);
}

.menu-button .menu-icon:hover span:nth-of-type(1),
.menu-button .menu-icon:hover span:nth-of-type(3) {
	width: 45% !important;
}

.menu-button .menu-icon:hover span:nth-of-type(2) {
	width: 65% !important;
}

.menu-button .menu-icon span:nth-of-type(4) {
	width: 60% !important;
	position: absolute !important;
	bottom: 120%;
	right: 120%;
	transform: translate(50%, 100%) rotate(45deg);
	transition: bottom var(--transition-speed), right var(--transition-speed);
	background: var(--color-purple) !important;
}

.menu-button .menu-icon span:nth-of-type(5) {
	width: 60% !important;
	position: absolute !important;
	bottom: 120%;
	left: 120%;
	transform: translate(-50%, 100%) rotate(-45deg);
	transition: left var(--transition-speed), bottom var(--transition-speed);
	background: var(--color-purple) !important;
}

.overlayMenu .menu-button .menu-icon span:nth-of-type(1) {
	transform: translate(-230%, 0%);
	opacity: 0;
}

.overlayMenu .menu-button .menu-icon span:nth-of-type(2) {
	transform: translate(-230%, 0%);
	opacity: 0;
}

.overlayMenu .menu-button .menu-icon span:nth-of-type(3) {
	transform: translate(-230%, 0%);
	opacity: 0;
}

.overlayMenu .menu-button .menu-icon span:nth-of-type(4) {
	bottom: 50% !important;
	right: 50% !important;
}

.overlayMenu .menu-button .menu-icon span:nth-of-type(5) {
	bottom: 50% !important;
	left: 50% !important;
}

.overlayMenu .main-menu > div {
	opacity: 0;
	pointer-events: none;
	transition: all 0s;
}

#masthead:not(.overlayMenu) .main-menu > div {
	transition: opacity var(--transition-speed) var(--transition-speed);
}

.menu-button .menu-icon {
	border: 0.1rem solid var(--color-white);
	border-radius: 100%;
	cursor: pointer;
	padding-top: calc(100% - 0.2rem);
	width: auto;
	overflow: hidden;
	position: relative;
	transition: var(--transition);
}

.overlayMenu .menu-button .menu-icon {
	transition: none;
	border-color: var(--color-purple) !important;
}

.fullscreen-menu {
	display: grid;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	height: calc(var(--vh) - (var(--padding-5) * 2));
	background: var(--color-pink);
	transition: var(--transition);
	transform: translateY(-100%);
	transition-timing-function: cubic-bezier(.41,.27,.22,.82);
    align-content: end;
	min-height: calc(var(--vh) - var(--padding-3) - var(--padding-5));
}

.fullscreen-menu.active {
	transform: translateY(0) !important;
}

body:not(.single-news):not(.archive) #masthead:not(.overlayMenu) .site-branding path,
.testimonial .bg-purple svg path,
body[data-body-color="bg-white"] .products li:hover.bg-white div:not(.button) > svg path {
	fill: var(--color-white);
}

.overlayMenu .site-branding path {
	transition-delay: 0 !important;
}

.main-menu ul {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.main-menu .menu > li {
	position: relative;
	margin-right: var(--margin-side-2);
	display: inline-block;
}

body.noScroll {
	max-height: var(---vh);
	height: var(--vh);
	overflow: hidden;
	position: relative;
}






.fullscreen-menu #main, .fullscreen-menu .sub-menu {
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	overflow: scroll;
	max-height: calc(var(--vh) - (var(--padding-5) + var(--margin-3)));
}
.fullscreen-menu #main > li {
	width: calc(33.333% - ((var(--margin-side-3) * 2) / 3));
	float: right;
	clear: both;
}
.fullscreen-menu .sub-menu {
	position: fixed;
	right: calc(33.333% - ((var(--margin-side-3) * 2) / 3) + var(--padding-side-5));
	width: calc(66.666% + ((var(--margin-side-3) * 2) / 3) - (var(--padding-side-5) * 2));
	bottom: var(--padding-3);
	height: clamp(1vw, 27.5rem, 70vh);
}
.fullscreen-menu .sub-menu .sub-menu {
	left: var(--padding-side-5);
	width: calc(33.333% - ((var(--margin-side-3) * 2) / 3) - ((var(--padding-side-5) * 2) / 3)) !important;
}
.fullscreen-menu .sub-menu .sub-menu > ul {
	width: 100% !important;
}
.fullscreen-menu #site-navigation li:last-of-type {
	margin-bottom: var(--padding-1);
}
.fullscreen-menu #site-navigation .sub-menu li:last-of-type {
	margin-bottom: calc(var(--padding-1) * 1.4);
}
.fullscreen-menu .sub-menu > ul {
	min-height: 100%;
	padding: 0;
	position: relative;
	float: right;
	width: calc(50% - ((var(--margin-side-3) * 2) / 3));
	border-right: 1px solid var(--color-purple);
	transition: var(--transition);
	opacity: 0;
}
.menu-item.active > .sub-menu > ul {
	opacity: 1;
}
.menu-item.active > .sub-menu {
	z-index: 99999 !important;
}
.fullscreen-menu #main a {
	color: var(--color-purple);
}

#masthead:before {
	content: "";
	background-color: transparent;
	width: 100%;
	position: fixed;
	top: 100%;
	left: 0;
	height: calc(var(--padding-side-5) * 1.5);
	z-index: 0;
	pointer-events: none;
	transition: all 0s calc(var(--transition-speed) * 0.8);
}

.overlayMenu:before {
	background-color: var(--color-pink) !important;
}

.fullscreen-menu > nav {
	height: clamp(1vw, 27.5rem, 70vh);
	overflow: hidden;
}	

.fullscreen-menu #main > li > a {
	font-size: clamp(1rem, 3.5vw, 4rem);
	font-weight: 600;
}




@media(min-width: 1000px) {
	.menu-item.active > .sub-menu > ul > li {
		animation: menu-item-on var(--transition-speed) forwards;
	}
	@keyframes menu-item-on {
		0% {
			opacity: 0;
			margin-top: 2em;
		}
		100% {
			opacity: 1;
			margin-top: 0;
		}
	}
	.menu-item:not(.active) > .sub-menu > ul > li {
		animation: menu-item-off var(--transition-speed) forwards;
	}
	@keyframes menu-item-off {
		0% {
			opacity: 1;
		}
		30% {
			opacity: 0;
			margin-top: 0;
		}
		100% {
			opacity: 0;
			margin-top: 2em;
		}
	}
	.back-button {
		display: none !important;
	}
}



@media(max-width: 1000px) {
	.fullscreen-menu .sub-menu {
		height: var(--vh) !important;
		top: 0 !important;
		bottom: unset !important;
		max-height: unset !important;
	}
	.fullscreen-menu > nav {
		position: relative;
		height: clamp(27.5rem, 70vh, 100vh);
		overflow: hidden;
		align-items: center !important;
		top: 0 !important;
		display: grid;
	}	
	.fullscreen-menu .sub-menu > ul {
		padding-top: 0 !important;
		display: grid;
		position: relative;
		max-height: unset;
		height: auto;
		align-content: center;
		padding-top: var(--padding-5) !important;
		padding-bottom: var(--padding-5);
	}
	.fullscreen-menu #main > li {
		width: 100% !important;
		float: unset !important;
	}
	.fullscreen-menu {
		padding-left: 0 !important;
		align-content: center !important;
		padding-right: 0 !important;
	}
	.fullscreen-menu #main > li > a {
		font-size: clamp(2rem, 11vw, 3.5rem) !important;
	}
	.fullscreen-menu .contact {
		max-width: 100% !important;
		padding-bottom: var(--padding-1) !important;
		padding-top: var(--padding-1) !important;
	}
	.fullscreen-menu nav ul {
		padding-left: var(--padding-side-5) !important;
		width: 100% !important;
		float: unset !important;
		border: 0 !important;
		padding-right: var(--padding-side-5) !important;
	}
	.fullscreen-menu .sub-menu,
	.fullscreen-menu .sub-menu .sub-menu {
		width: 100% !important;
		left: 100% !important;
	}
	.fullscreen-menu .active > .sub-menu {
		left: 0 !important;
	}
	.fullscreen-menu .menu-slide {
		margin-left: -100% !important;
	}
	.back-button {
		font-size: 1.2rem !important;
		order: 1000;
		text-align: left !important;
	}
	.back-button:before {
		content: "";
		display: inline-block;
		height: 0.8em;
		width: 0.6em;
		transform: translateY(-10%);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		position: relative;
		rotate: 180deg;
		margin-right: calc(var(--margin-side-1) / 2);
		filter: invert(72%) sepia(61%) saturate(7134%) hue-rotate(279deg) brightness(82%) contrast(133%) !important;
		background-image: url(img/button-arrow.svg);
	}
}












.sub-menu::-webkit-scrollbar,
#main.menu::-webkit-scrollbar {
	display: none;
}
  
.sub-menu, #main.menu {
	-ms-overflow-style: none;  
	scrollbar-width: none;  
} 

.fullscreen-menu li > a {
	width: fit-content;
	transition: none;
	display: block;
}

.fullscreen-menu li {
	transition: var(--transition);
	padding: calc(var(--padding-1) / 5) 0;
}

.fullscreen-menu .sub-menu li:not(.back-button) {
	padding: calc(var(--padding-1) / 2) 0;
	font-size: 1.5rem;
}

.fullscreen-menu li > a:before {
	content: "";
	height: 0.1em;
	width: 0;
	transition: var(--transition);
	background: var(--color-purple);
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
}

.fullscreen-menu li.active > a:before {
	width: 100% !important;
	transform: translateX(0.15em) skewX(10deg);
}

.fullscreen-menu #site-navigation li > a:hover,
.fullscreen-menu #site-navigation li.active > a {
	font-weight: 900 !important;
	transform: skewX(-10deg);
}

.fullscreen-menu .contact {
	width: 100%;
	max-width: calc(30vw - var(--padding-side-5));
	background: var(--color-pink);
	position: absolute;
	left: 0;
	z-index: 99;
	padding-left: var(--padding-side-5);
	bottom: 0;
	padding-bottom: var(--padding-3);
	padding-top: var(--padding-1);
}

.fullscreen-menu .contact .social li {
	display: inline-block;
	margin-right: 0.8rem;
}

.fullscreen-menu #main > li > a:after {
	content: ".";
}

.fullscreen-menu .contact .social svg {
	width: auto;
	height: 1.5rem;
}

.fullscreen-menu .contact a {
	font-size: 1.4rem;
	font-weight: 600;
	transition: var(--transition);
	color: var(--color-purple);
}

.fullscreen-menu .contact a:hover {
	color: var(--color-dark-purple);
}

.fullscreen-menu .contact .social li:hover svg path {
	fill: var(--color-dark-purple);
}

.fullscreen-menu .menu-item:not(.active) > .sub-menu {
	pointer-events: none;
	z-index: -999;
}















/* Links
--------------------------------------------- */
main a:not(.button):not(.grid),
footer h5 a:not(.button):not(.grid) {
	color: var(--color-purple);
}

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

a:hover {
	color: var(--color-dark-purple2);
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	transition: none;
	display: block;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
	font-weight: 800;
	color: var(--color-purple);
	font-weight: 900 !important;
	transform: skewX(-10deg);
	text-decoration: none;
}













/* Layout
--------------------------------------------- */

.image-slider-banner .image-slider {
	cursor: none !important;
}

#dragicon {
	position: fixed;
	top: 0;
	left: 0;
	display: grid;
	align-content: center;
	height: 4rem;
	width: 4rem;
	opacity: 0;
	border-radius: 100%;
	z-index: 2147483647;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	pointer-events: none;
	border: 1.5px solid var(--color-white);
	text-align: center;
	font-size: 1rem;
	color: var(--color-white);
	text-transform: lowercase;
	-webkit-box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.4);
	        box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.4);
	font-family: var(--font-primary);
}

#dragicon.active {
	opacity: 1;
}

.menu-anchor {
	position: relative;
	visibility: hidden;
	top: calc(var(--padding-4) - (var(--padding-4) * 2));
}

.faq-filter.stick ul {
	position: fixed;
}

.faq-filter ul:after {
	content: "";
	top: 0;
	left: 0;
	height: 15rem;
	box-shadow: inset 0vw 10rem 4rem 1rem var(--color-white);
	width: 100%;
	position: absolute;
	display: block;
	pointer-events: none;
	z-index: 1;
	transition: var(--transition);
}

.faq-filter ul {
	top: 0;
	width: 100%;
	left: 0;
}

.faq-filter {
	overflow: visible !important;
	position: relative;
	z-index: 99;
}

.faq-filter:not(.stick) ul {
	position: absolute;
}

.faq-filter li a.active {
	font-weight: 900;
	display: block;
	transform: skew(-10deg);
}

.faq-filter li {
	display: inline-block;
	z-index: 9;
	position: relative;
}

.faq-filter li:not(:last-of-type) {
	border-right: 1.5px solid var(--color-purple);
}

.faq-desc img {
	display: block;
	height: 4rem; 
	width: auto;
	margin-bottom: var(--margin-1);
	padding-bottom: var(--padding-1);
}

.faq-desc strong {
	display: block;
	font-size: 1.1rem;
	transform: skew(-10deg);
	padding-bottom: var(--padding-1);
}

.post-share svg {
	height: 1.3rem; 
	width: auto;
}

.post-share li {
	display: inline-block;
	margin-right: 1rem;
}

.post-feed .post-extract {
	display: none;
}

.featured {
	margin-bottom: var(--margin-side-1);
}

.featured article:not(:hover) .post-info,
div:not(.featured) > article:hover .post-info {
	color: var(--color-white) !important;
}
div:not(.featured) > article:hover,
.featured article:not(:hover) {
	background-color: var(--color-purple) !important;
}

.featured article:not(:hover) .post-info h3,
.featured article:not(:hover) .post-info .button,
.featured article:not(:hover) .post-info li,
div:not(.featured) > article:hover .post-info h3,
div:not(.featured) > article:hover .post-info .button,
div:not(.featured) > article:hover .post-info li {
	color: var(--color-white);
}

article:hover .post-info h3,
article:hover .post-info .button,
article:hover .post-info li {
	color: var(--color-purple);
}

.featured article:not(:hover) .post-info path,
div:not(.featured) > article:hover .post-info path {
	stroke: var(--color-white);
}

article .post-info,
article .post-info h3,
article .post-info .button, 
article .post-info li,
article .post-info svg,
article {
	transition: var(--transition);
}

article h3 {
	font-size: 1.5rem !important;
}

article a > div {
	overflow: hidden;
}

article a {
	color: var(--color-dark-purple2);
	position: relative;
	align-content: baseline;
}

article:hover .background-image {
	transform: scale(1.05);
}

.featured article .post-button {
	left: var(--padding-side-2) !important;
}

article .post-button {
	position: absolute;
	bottom: calc(var(--padding-side-1) * 0.8);
	left: var(--padding-side-1);
	width: auto;
	right: var(--padding-side-1);
}

article .background-image {
	height: clamp(10rem, 100vw, 20rem);
}

.single-news #masthead a,
.archive #masthead a {
	color: var(--color-purple);
}

.news-cat-list li {
	display: inline-block !important;
	margin-right: 0.3em;
	font-size: 0.9rem !important;
}

.news-cat-list li:nth-of-type(1) {
	font-weight: 900;
	color: var(--color-purple);
}

.news-cat-list li:not(:last-of-type):not(:nth-of-type(1)):after {
	content: ",";
	display: inline-block;
}

.single-news .news-hero .splide__slide {
	padding-top: 100% !important;
}

.single-news .menu-button .menu-icon,
.archive .menu-button .menu-icon {
	border-color: var(--color-purple);
}

.single-news .menu-button .menu-icon span,
.archive .menu-button .menu-icon span {
	background:  var(--color-purple);
}

.single-news section:not(.news-hero):not(:last-of-type) .py-5 {
	padding-top: var(--padding-2) !important;
	padding-bottom: var(--padding-2) !important;
}

.testimonial p {
	font-size: 1.2rem;
	font-weight: 700;
}

.test-name {
	color: var(--color-purple);
	font-weight: 900;
	transform: skew(-10deg);
	font-size: 1.1rem;
}

.bg-purple .test-name {
	color: var(--color-white) !important;
}

.test-icon svg {
	height: 3rem;
	width: auto;
}

.steps .steps-nav h4 {
	font-size: 1.3rem !important;
	margin-top: 0.3rem;
	padding-right: var(--padding-1);
	transition: var(--transition);
}

.steps .steps-nav li {
	position: relative;
	cursor: pointer;
	padding-right: var(--padding-1);
}

.steps .steps-nav.stick {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	left: var(--padding-side-5);
}

body .steps .steps-nav.stick-bottom {
	position: absolute !important;
	bottom: 0 !important;
	top: unset !important;
	left: var(--padding-side-5);
	transform: unset !important;
}

.steps .steps-nav {
	height: fit-content;
	position: relative;
	max-width: 15rem;
	border-right: 1.5px solid var(--color-purple);
}

.steps .steps-cards li {
	margin-top: var(--padding-5);
}

.steps .steps-cards li:last-of-type {
	margin-bottom: var(--padding-5);
}

.steps-nav li.active-step .step-title {
	font-weight: 900 !important;
}

.steps .steps-nav li.active-step h4 .step-num {
	background: var(--color-purple);
	color: var(--color-white);
}

.step-num {
	width: 2.5rem;
	height: 2.5rem;
	position: absolute;
	right: 0;
	top: calc(50% + 0.9rem);
	display: grid;
	margin: 0 !important;
	align-items: center;
	background: var(--color-white);
	text-align: center;
	border: 1.5px solid var(--color-purple);
	border-radius: 100%;
	font-size: 1.3rem !important;
	transform: translate(50%, -50%);
}

.image-slider-banner li.splide__slide {
	height: clamp(30rem, 100vw, 45rem);
}

.image-slider-banner .splide__pagination {
	bottom: 0 !important;
	width: fit-content;
	right: 0;
	left: unset !important;
	padding: var(--padding-2) var(--padding-side-5) !important;
}

.image-slider-banner li div strong {
	transform: skew(-10deg);
	display: inline-block;
}

.image-slider-banner li div {
	opacity: 0;
	transition: var(--transition);
}

.image-slider-banner li.is-active div {
	opacity: 1 !important;
}

.image-slider-banner li div p {
	font-size: 1.4rem !important;
	line-height: 1.4 !important;
}

.icon-slider svg {
	height: 4rem; 
	width: auto;
}

.icon-slider svg path,
.icon-slider svg line,
.icon-slider svg circle,
.icon-slider svg rect {
	transition: var(--transition);
}

.icon-slider li p {
	line-height: 1.5;
	font-size: 1.3rem;
}

.icon-slider strong {
	transform: skew(-10deg);
	display: inline-block;
}

.app-banner img {
	height: 5rem;
	width: auto;
}

.app-banner h4 {
	font-size: 2rem;
}

body .sticky-fade {
	display: block;
	width: 100vw;
	position: absolute;
	top: 30rem;
	left: 0;
	box-shadow: inset 0vw -51vh 14vh -15vh var(--color-white);
	height: 50vh;
	pointer-events: none;
	transition: var(--transition) !important;
}

.sticky-fade.stick {
	position: fixed !important;
	bottom: 0 !important;
	top: unset !important;
}

.timeline li:last-child .event-content {
	padding-bottom: 0 !important;
}

.timeline {
	overflow: hidden !important;
	position: relative;
}

.timeline ul .event {
	position: relative;
	display: block;
}

.timeline ul li:nth-of-type(1) .event-title:after {
	content: "";
	height: calc(50% - 0.3rem);
	background: var(--color-white);
	position: absolute;
	width: 100%;
	pointer-events: none;
	right: calc(100% - 3px);
	top: 0;
}

.timeline ul li:not(:nth-of-type(1)) .event-title:after {
	content: "";
	height: 100%;
	border-left: 1.5px solid var(--color-purple);
	position: absolute;
	left: 0;
	bottom: 50%;
	transform: translateX(-50%);
}

.timeline ul li:not(:last-of-type):before {
	content: "";
	height: 100%;
	border-left: 1.5px solid var(--color-purple);
	position: absolute;
	left: 0;
	top: 0;
	transform: translateX(-50%);
}

.timeline ul .event .event-title:before {
	content: "";
	background: var(--color-purple);
	height: 0.6rem;
	width: 0.6rem;
	border-radius: 100%;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(-50%, -50%);
}

.timeline ul .event .event-title {
	position: relative;
	font-size: 2rem;
	line-height: 3rem !important;
	color: var(--color-purple);
}

.timeline h4 span {
	display: inline-block;
}

.four-boxs img {
	max-height: 4.5rem !important;
	width: auto;
}

.four-boxs .social {
	margin: var(--margin-1) 0;
}

.four-boxs .social svg {
  height: 1.3rem;
  width: auto;
}

.four-boxs .social li {
	display: inline-block;
	margin-right: 0.5rem;
}

.toggle-title {
	grid-template-columns: 1fr 4rem;
	grid-column-gap: var(--padding-side-4);
	font-size: 1.5rem;
	cursor: pointer;
	color: var(--color-purple);
	transition: var(--transition);
	-webkit-user-select: none;
  	-ms-user-select: none; 
  	user-select: none;
}

.toggle-title > span {
	position: relative;
	max-width: fit-content;
}

.toggle-content {
	transition: var(--transition);
	overflow: hidden;
	display: block;
}

.toggles > li:last-of-type {
	border: 0 !important;
}

.toggles li.active .toggle-title {
	padding-bottom: 0;
}

.toggles li.toggle-hide:not(.active) .toggle-content {
	height: 0 !important;
}

.toggle-icon svg {
	height: 1.2em;
	width: 1.2em;
	transform: rotate(90deg);
	transition: var(--transition);
}

li.active .toggle-icon svg {
	transform: rotate(270deg);
}

.toggle-icon {
	border: 2px solid var(--color-purple);
	padding: 0;
	margin: -1rem 0;
	height: 4rem !important;
	width: 4rem !important;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	display: flex;
	background: unset !important;
}

a, button {
	outline: none !important;
}

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

.border-bottom {
	border-bottom: 2px solid var(--color-light-grey);
}

.no-list {
	list-style: none;
}

.container {
	position: relative;
}

.container > .row {
	box-sizing: border-box !important;
	max-width: 100% !important;
}

.breadcrumbs span, 
.breadcrumbs span a {
	pointer-events: none;
	color: var(--color-white) !important;
	display: inline-block !important;
	font-size: 1.2rem;
	font-weight: 700;
}

#hero .app-logo img {
	height: 4rem; 
	width: auto;
}

#hero .background-slider:before,
.image-slider-banner .background-slider .splide__track li:before {
	content: "";
	background-image: linear-gradient(90deg, var(--color-dark-purple) 0%, transparent  100%);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	z-index: 9;
	pointer-events: none;
	mix-blend-mode: multiply;
	opacity: 0.8;
}

.image-slider-banner .background-slider .splide__track li:after {
	content: "";
	background-image: linear-gradient(0deg, var(--color-dark-purple) 0%, transparent  100%);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 10rem;
	display: block;
	z-index: 9;
	pointer-events: none;
	mix-blend-mode: multiply;
	opacity: 0.8;
}

#hero .background-slider:after {
	content: "";
	background-image: linear-gradient(180deg, var(--color-dark-purple) 0%, transparent  100%);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 10rem;
	display: block;
	z-index: 9;
	pointer-events: none;
	mix-blend-mode: multiply;
	opacity: 0.8;
}

.underline {
	font-weight: 800 !important;
	font-style: italic;
	position: relative;
}

h4 > span:nth-of-type(1) {
	margin-left: 0 !important;
}

h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
	margin: 0 0.2em 0 0;
}

body .underline:after {
	content: "";
	display: block;
	width: 0;
	transition: var(--transition) !important;
	height: 0.1em;
	background: var(--color-purple);
	position: absolute;
	bottom: 0;
	transform: translateX(-0.041em);
	left: 0;
}

.underline.full:after,
#hero .underline:after,
section:nth-of-type(1) .underline:after {
	width: 100% !important;
}

.white .underline:after {
	background: var(--color-white) !important;
}

.loop {
	position: relative;
	overflow: hidden;
	transition: var(--transition);
	height: 1.3em;
	margin: -0.3em 0;
	display: inline-block;
}

.loop > span {
	position: absolute;
	top: 0; 
	transition: var(--transition);
	left: 0;
}

.loop > span span {
	width: fit-content;
	line-height: 1.3 !important;
}

.z-index-high {
	z-index: 99999 !important;
}

#primary {
	position: relative;
	z-index: 99;
}

.white-change h1,
.white-change h2,
.white-change h3,
.white-change h4,
.white-change h5,
.white-change h6,
.white-change a,
.white-change p,
.white-change,
.white-change *:before,
.white-change *:after,
.white-change path,
.white-change polyline,
.white-change polygon,
.white-change img,
body[data-body-color="bg-white"] .products p,
body[data-body-color="bg-white"] .products h3,
body[data-body-color="bg-white"] .other-pro p,
body[data-body-color="bg-white"] .other-pro h3 {
	transition: opacity var(--transition-speed), right var(--transition-speed), transform var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed), stroke var(--transition-speed), background-color var(--transition-speed), fill var(--transition-speed) !important;
}

body[data-body-color="bg-purple"] main {
	background-color: var(--color-purple);
}

body main {
	transition: var(--transition);
	background-color: var(--color-white);
}

body[data-body-color="bg-purple"] .white-change h1,
body[data-body-color="bg-purple"] .white-change h2,
body[data-body-color="bg-purple"] .white-change h3,
body[data-body-color="bg-purple"] .white-change h4,
body[data-body-color="bg-purple"] .white-change h5,
body[data-body-color="bg-purple"] .white-change h6,
body[data-body-color="bg-purple"] .white-change a:not(.purple),
body[data-body-color="bg-purple"] .white-change p,
body[data-body-color="bg-purple"] .white-change,
body[data-body-color="bg-purple"] .white-change *:before,
body[data-body-color="bg-purple"] .white-change *:after,
body[data-body-color="bg-purple"] .white-change button,
body[data-body-color="bg-purple"] .menu-icon,
body[data-body-color="bg-purple"] input,
body[data-body-color="bg-purple"] textarea,
body[data-body-color="bg-purple"] select,
body[data-body-color="bg-purple"] .gform_footer,
body[data-body-color="bg-purple"] .white-change a.purple,
body[data-body-color="bg-purple"] .white-change a.purple:hover,
body[data-body-color="bg-purple"] ::placeholder,
body[data-body-color="bg-purple"] .steps-nav,
body[data-body-color="bg-purple"] .step-num,
body[data-body-color="bg-white"] .products li:hover.bg-white p,
body[data-body-color="bg-white"] .products li:hover.bg-white h3,
body[data-body-color="bg-white"] .products li:hover.bg-white .button,
body[data-body-color="bg-white"] .other-pro li:hover.bg-white p,
body[data-body-color="bg-white"] .other-pro li:hover.bg-white h3,
body[data-body-color="bg-white"] .other-pro li:hover.bg-white .button {
	color: var(--color-white) !important;
	border-color: var(--color-white) !important;
}

body[data-body-color="bg-purple"] .sticky-fade {
	box-shadow: inset 0vw -38vh 6vh -15vh var(--color-purple);
}

body[data-body-color="bg-purple"] .faq-filter ul:after {
	box-shadow: inset 0vw 10rem 4rem 1rem var(--color-purple) !important;
}

body[data-body-color="bg-purple"] .white-change a.purple,
body[data-body-color="bg-purple"] .active-step .step-num {
	color: var(--color-purple) !important;
}

body[data-body-color="bg-purple"] .timeline ul li:not(:last-of-type)::before,
body[data-body-color="bg-purple"] .faq-filter li {
	border-color: var(--color-white) !important;
}

body[data-body-color="bg-white"] .menu-icon {
	border-color: var(--color-purple) !important;
}

body[data-body-color="bg-white"] .menu-icon span,
body[data-body-color="bg-purple"] .step-num,
body[data-body-color="bg-white"] .products .bg-white,
body[data-body-color="bg-white"] .other-pro li.bg-white {
	background-color: var(--color-purple) !important;
}

body[data-body-color="bg-purple"] .white-change .underline:after,
body[data-body-color="bg-purple"] .menu-icon span,
body[data-body-color="bg-purple"] .cust-list .white-change:before,
body[data-body-color="bg-purple"] .timeline ul .event .event-title::before,
body[data-body-color="bg-purple"] .active-step .step-num {
	background: var(--color-white) !important;
}

body[data-body-color="bg-white"] .site-branding path {
	fill: var(--color-purple) !important;
}

body[data-body-color="bg-purple"] .white-change .button path,
body[data-body-color="bg-purple"] .white-change button line,
body[data-body-color="bg-purple"] .white-change button path,
body[data-body-color="bg-purple"] .icon-slider .white-change svg path,
body[data-body-color="bg-purple"] .icon-slider .white-change svg circle,
body[data-body-color="bg-purple"] .icon-slider .white-change svg line,
body[data-body-color="bg-purple"] .icon-slider .white-change svg rect,
body[data-body-color="bg-purple"] .icon-slider .white-change svg polyline,
body[data-body-color="bg-white"] .products li:hover.bg-white a svg path,
body[data-body-color="bg-white"] .other-pro li:hover.bg-white a svg path,
body[data-body-color="bg-purple"] .icon-slider .white-change svg polygon {
	stroke: var(--color-white);
}

body[data-body-color="bg-purple"] main .white-change img[src*="Community-Logo.svg"],
body[data-body-color="bg-purple"] main .white-change img[src*="Acorre-Logo.svg"] {
	filter: brightness(0) invert(1) !important;
}

.hide {
	opacity: 0 !important;
}

#hero .container {
	min-height: calc(var(--vh) + (var(--padding-4) * 0.6));
}

#hero .background-slider {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	z-index: -1;
}

.image-slider, .splide__track, .splide__slide {
	height: 100%;
	width: 100%;
}

.background-image {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transition: var(--transition);
	background-blend-mode: multiply;
}

.white h1,
.white h2,
.white h3,
.white h4,
.white h5,
.white a,
.white p,
.white {
	color: var(--color-white);
	border-color: var(--color-white);
}

.white path {
	stroke: var(--color-white);
}

svg path {
	transition: var(--transition);
}

.cst-slider, .image-slider, .splide__track, .splide__slide {
	height: 100%;
	width: 100%;
}

.noPagi {
	pointer-events: none;
}

.noPagi .splide__pagination,
.noPagi .splide__arrows {
	display: none !important;
}

.splide__pagination {
	bottom: 1rem !important;
	padding: 0 1rem !important;
	display: block !important;
}

.splide__pagination button {
	border: 1.5px solid var(--color-white);
	background: transparent !important;
	border-radius: 1.2rem !important;
	height: 1rem !important;
	opacity: 1 !important;
	transform: unset !important;
	transition: var(--transition) !important;
	width: 1rem !important;
	display: block !important;
	margin: 0 !important;
}

.splide__pagination li {
	margin: 3px !important;
	transition: var(--transition);
	width: fit-content !important;
	display: inline-block !important;
}

.splide__pagination button:hover,
.splide__pagination button:focus,
.splide__pagination button:active {
	border-color: var(--color-white) !important;
}

body .splide__pagination button.is-active {
	transform: unset !important;
	width: 3rem !important;
}

.programmes .button span,
.products .button span {
	transition: var(--transition);
}

.programmes li {
	opacity: 1 !important;
}

@media(min-width: 900px) {
	.programmes .imageBox a {
		right: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		transition: right calc(var(--transition-speed) * 2) !important;
		display: block;
		animation: imgslide calc(var(--transition-speed) * 2);
	}
	.programmes .imageBox {
		padding-top: 100%;
	}
	.programmes .is-visible .imageBox a {
		right: 0 !important;
		animation: unset !important;
	} 
	@keyframes imgslide {
		0% {
			right: 0;
		}
		99.999% {
			right: -100%;
		}
		100% {
			right: 100%;
		}
	}
	.programmes .textBox img,
	.programmes .textBox h3, 
	.programmes .textBox p,
	.programmes .textBox a {
		opacity: 0;
		transform: translateX(-1rem) !important;
	}
	.programmes .is-visible .textBox img,
	.programmes .is-visible .textBox h3, 
	.programmes .is-visible .textBox p,
	.programmes .is-visible .textBox a {
		opacity: 1 !important;
		transform: translateX(0) !important;
	}
	.programmes .is-visible .textBox img {
		transition: opacity calc(var(--transition-speed) * 2), transform calc(var(--transition-speed) * 2) !important;
	}
	.programmes .is-visible .textBox h3 {
		transition: opacity calc(var(--transition-speed) * 2) 0.2s, transform calc(var(--transition-speed) * 2) 0.2s !important;
	}
	.programmes .is-visible .textBox p {
		transition: opacity calc(var(--transition-speed) * 2) 0.4s, transform calc(var(--transition-speed) * 2) 0.4s !important;
	}
	.programmes .is-visible .textBox a {
		transition: color var(--transition-speed), opacity calc(var(--transition-speed) * 2) 0.6s, transform calc(var(--transition-speed) * 2) 0.6s !important;
	}
}

.programmes img {
	width: 15rem;
}

.programmes .splide__arrows button,
.box-slider .splide__arrows button {
	background: transparent;
	bottom: 0 !important;
	top: unset !important;
	transform: unset !important;
	height: 4rem !important;
	width: 4rem !important;
	overflow: hidden;
	border-radius: 100%;
	transition: var(--transition);
	border: 2px solid var(--color-purple);
}

.box-slider .splide__arrows .splide__arrow--prev {
	left: 0 !important;
}

.box-slider .splide__arrows .splide__arrow--next {
	right: 0 !important;
}

.products svg {
	height: auto;
	width: 3.3rem;
}

.card-slider img {
	height: 3.5rem;
	width: auto;
}

.page-id-37 .products .button.outline,
.page-id-39 .programmes .button.outline {
	display: none !important;
}

.products h3 {
	font-size: 2.5rem !important;
	font-weight: 600 !important;
}

.other-pro h3 {
	font-size: 2.2rem !important;
	font-weight: 600 !important;
}

.other-pro li:hover > a {
	background: transparent;
}

.card-slider h3,
.card-slider h3 span {
	font-size: 1.8rem !important;
	font-weight: 500 !important;
	letter-spacing: -0.02em !important;
}

.card-slider h3 .bold, .products li:hover .button span {
	transform: skew(-10deg);
	font-weight: 900 !important;
	display: inline-block;
}

.products .cst-slider > .splide,
.card-slider .cst-slider > .splide {
	overflow: hidden !important;
	width: calc(100vw + (var(--padding-side-5) * 2));
	right: var(--padding-side-5);
}

.products .splide__arrows button,
.card-slider .splide__arrows button,
.other-pro .splide__arrows button,
.icon-slider .splide__arrows button {
	top: calc(100% + 1rem) !important;
	transform: unset !important;
	border: 2px solid var(--color-purple);
	padding: 0;
	height: 4rem !important;
	width: 4rem !important;
	background: unset !important;
	top: 1rem !important;
}

#apps .splide__arrows button {
	top: calc(100% + 1rem) !important;
	transform: unset !important;
	border: 2px solid var(--color-white) !important;
	padding: 0;
	height: 4rem !important;
	width: 4rem !important;
	background: unset !important;
	top: 1rem !important;
}

.image-slider-banner .splide__arrows button {
	top: 50% !important;
	transform: translateY(-50%) !important;
	border: 2px solid var(--color-white) !important;
	padding: 0;
	height: 4rem !important;
	width: 4rem !important;
	background: unset !important;
}

#apps .button {
	pointer-events: none;
}

#apps .splide__arrows button {
	top: 50% !important;
	transform: translateY(-50%) !important;
}

@media(min-width: 900px) {
	#apps .splide__arrow {
		opacity: 0 !important;
	}
}

.products .splide__arrows,
.card-slider .splide__arrows,
.other-pro .splide__arrows,
.icon-slider .splide__arrows {
	position: relative;
	height: 5rem;
	left: var(--padding-side-5);
	width: calc(100vw - (var(--padding-side-5) * 2));
}

.other-pro .splide__arrows,
.icon-slider .splide__arrows {
	left: 0 !important;
}

.other-pro .slider .button {
	text-align: left !important;
}

.products .splide__track,
.card-slider .splide__track {
	left: var(--padding-side-5);
	overflow: visible !important;
	width: calc(100vw - (var(--padding-side-5) * 2));
}

.products .splide__arrow--prev,
.card-slider .splide__arrow--prev,
.other-pro .splide__arrow--prev {
	left: 0 !important;
}

.image-slider-banner .splide__arrow--prev {
	left: var(--padding-side-5) !important;
} 

.image-slider-banner .splide__arrow--next {
	right: var(--padding-side-5) !important;
} 

.products .splide__arrow--next,
.card-slider .splide__arrow--next,
.other-pro .splide__arrow--next {
	right: 0 !important;
}

.products .slider li > div,
.products .slider li > div > a,
.card-slider .slider li > div {
	height: calc(100% - (var(--padding-1) * 2));
	transition: var(--transition);
}

.products .slider li:hover > div > a,
.other-pro .slider li:hover > div {
	background-color: transparent !important;
}

.products .slider li > div,
.other-pro .slider li > a:not(.step-image):not(.step-content) {
	height: 100%;
	transition: var(--transition);
}

.other-pro .slider li > a > div {
	height: auto;
}

.other-pro .slider li .button {
	position: absolute;
	bottom: var(--padding-1);
}

.other-pro .slider li > a > div > div:not(.button) > svg {
	height: 5rem !important;
	width: auto !important;
}

.other-pro .other-programmes .slider li > a > div > div:not(.button) > svg {
	height: 4rem !important;
	width: auto !important;
}

.other-pro .other-programmes li div > svg path,
.other-pro .other-programmes li div > svg rect,
.other-pro .other-programmes li div > svg circle {
	transition: var(--transition);
}

.other-pro .other-programmes li:hover div:not(.button) > svg path,
.other-pro .other-programmes li:hover div:not(.button) > svg rect,
.other-pro .other-programmes li:hover div:not(.button) > svg circle {
	fill: var(--color-white);
}

.products .slider li.splide__slide,
.card-slider .slider li.splide__slide,
.other-pro .slider li.splide__slide {
	height: unset !important;
}

.border-radius {
	overflow: hidden;
	border-radius: 1rem !important;
}

body .bg-pink {
	background: var(--color-pink);
}

body .bg-purple {
	background: var(--color-purple);
}

body .bg-teal {
	background: var(--color-teal);
}

body .bg-yellow {
	background: var(--color-yellow);
}

body .bg-blue {
	background: var(--color-blue);
}

body .bg-dark-purple {
	background: var(--color-dark-purple2);
}

body .bg-white {
	background: var(--color-white);
}

#apps .container,
.banner-title.container {
	animation: colors 15s infinite;
	background-attachment: fixed;
}

#apps li {
	display: inline-block;
	font-size: 1.3rem;
}

#apps img {
	height: 6rem;
	width: auto;
}

@keyframes colors {
	0% {
		background-color: var(--color-dark-purple2);
	}
	15% {
		background-color: var(--color-dark-blue);
	}
	48.333% {
		background-color: var(--color-dark-teal);
	}
    81.666% {
		background-color: var(--color-dark-yellow);
	}
	100% {
		background-color: var(--color-dark-purple2);
	}
}

.cust-list li:before {
	content: "";
	background: var(--color-purple);
	border-radius: 100%;
	height: 0.5em;
	width: 0.5em;
	margin-right: 1em;
	display: inline-block;
}

.cust-list li {
	font-size: 1.1rem;
	color: var(--color-purple);
}

.container:not(.news-image-text) .imageBox > div {
	width: calc(100% + var(--padding-side-5));
	position: relative;
	right: var(--padding-side-5);
}

body:not(.single-news) .imageBox .splide__slide {
	height: auto !important;
	padding-top: 100% !important;
}

section > div:not(.lay-tl) .imageBox .splide__pagination li {
	float: right;
}

.imageBox .splide__track,
.programmes .imageBox {
	border-radius: 0 1rem 1rem 0;
	overflow: hidden;
}

.textBox {
	align-content: center;
}

.center-text .splide__slide {
	height: 28rem;
}































/* Responsive
--------------------------------------------- */

@media(min-width: 1080px) {
	.col-5 {
		grid-template-columns: repeat(5, 1fr);
		grid-column-gap: 1%;
	}
	.col-3 {
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: 1%;
	}
	.col-4 {
		grid-template-columns: repeat(4, 1fr);
		grid-column-gap: 2%;
	}
	.steps li.col-2 {
		grid-template-columns: 30% 1fr !important;
		grid-column-gap: 5% !important;
	}
	.menu-button .menu-icon {
		width: calc((var(--padding-side-5) / 2) - 0.2rem) !important;
	}
	#masthead.sticky:not(.overlayMenu) .main-menu {
		right: calc(var(--padding-side-5) / 4) !important;
	}
	#masthead.sticky:not(.overlayMenu) .site-branding {
		left: calc(var(--padding-side-5) / 4) !important;
	}
	.site-branding svg {
		width: auto;
		height: calc(var(--padding-side-5) / 2) !important;
	}
}

@media(min-width: 901px) and (max-width: 1080px) {
	.col-4 {
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 1%;
	}
	.cust-list {
		column-count: 3;
	}
	.steps li.col-2 {
		grid-template-columns: 100% !important;
		grid-column-gap: 0 !important;
	}
	.steps li.col-2 .step-image {
		display: none;
	}
}

@media(min-width: 901px) {
	.cust-list {
		column-count: 4;
	}
	.cust-list.list-animation li {
		opacity: 0;
		transform: translateY(1rem);
	}
	.cust-list.list-animation.list-animation-active li {
		animation: cust-list 0.8s cubic-bezier(.21,.42,.42,1.5) forwards;
	}
	@keyframes cust-list {
		0% {
			opacity: 0;
			transform: translateY(1rem);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
	.menu-button .menu-icon {
		width: calc((var(--padding-side-5) / 1.6) - 0.2rem);
	}
	.underline {
		white-space: nowrap;
	}
	#masthead .site-branding a {
		display: block;
	}
	#masthead .site-branding {
		position: absolute;
		top: calc(var(--padding-2) * 0.7);
		transition: var(--transition);
		left: var(--padding-side-5);
	}
	#masthead .main-menu {
		position: absolute;
		top: calc(var(--padding-2) * 0.7);
		transition: var(--transition);
		right: var(--padding-side-5);
	}
	.site-branding svg {
		width: auto;
		height: calc(var(--padding-side-5) / 1.6);
	}
	#masthead.sticky .site-branding a {
		width: 4rem;
	}
	#masthead.sticky:not(.overlayMenu) .main-menu {
		right: calc(var(--padding-side-5) / 4.5);
	}
	#masthead.sticky:not(.overlayMenu) .site-branding {
		left: calc(var(--padding-side-5) / 4.5);
	}
	.sticky:not(.overlayMenu) #logo-text {
		transform: translateX(-100%);
		opacity: 0;
	}
	/*.sticky .site-branding:hover #logo-text {
		transform: translateX(0) !important;
		opacity: 1 !important;
	}*/
	.display-none-lg {
		display: none !important;
	}
	.col-2 {
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 8%;
	}
	.form-container .col-2 {
		grid-template-columns: 1fr 14rem !important;
		grid-column-gap: 4% !important;
	}
	.steps .row > .col-2 {
		grid-template-columns: 15rem 1fr !important;
		grid-column-gap: 8% !important;
	}
	.steps .steps-nav:before {
		content: "";
		display: block;
		pointer-events: none;
		position: absolute;
		padding: var(--padding-5) 0;
		height: auto;
		bottom: 0;
		left: 3px;
		width: 100%;
		transform: rotate(180deg);
		transition: var(--transition);
		box-shadow: inset 0vw calc(var(--padding-5) * 1.7) var(--padding-3) calc(var(--padding-1) - (var(--padding-2) * 2)) var(--color-white);
	}
	.steps .steps-nav:after {
		content: "";
		display: block;
		pointer-events: none;
		position: absolute;
		padding: var(--padding-5) 0;
		height: auto;
		transition: var(--transition);
		top: 0;
		left: 3px;
		width: 100%;
		box-shadow: inset 0vw calc(var(--padding-5) * 1.7) var(--padding-3) calc(var(--padding-1) - (var(--padding-2) * 2)) var(--color-white);
	}
	.products .col-2,
	.programmes .col-2:not(.splide__slide),
	.card-slider .col-2 {
		grid-template-columns: 1fr 30% !important;
	}
	.col-3 {
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: var(--margin-side-1);
		grid-row-gap: var(--margin-side-1);
	}
	#masthead .row.col-2 {
		grid-template-columns: 14rem 1fr !important;
		grid-column-gap: 0 !important;
	}	
	#masthead .main-menu.col-2 {
		grid-template-columns: 1fr 4rem !important;
		grid-column-gap: 0 !important;
	}	
	.lay-tl .imageBox {
		position: relative;
		order: 5;
	}
	.lay-tl .imageBox > div {
		right: unset !important;
		left: 0 !important;
	}
	.programmes.lay-il .textBox {
		position: relative;
		order: 5;
	}
	.programmes.lay-tl .slider li {
		padding-left: var(--padding-side-5);
	}
	.programmes.lay-il .slider li {
		padding-right: var(--padding-side-5);
	}
	.lay-tl .imageBox .splide__track,
	.programmes.lay-tl .imageBox {
		border-radius: 1rem 0 0 1rem;
		overflow: hidden;
	}
	.lay-tl.programmes .splide__arrow--prev {
		left: var(--padding-side-5);
	}
	.lay-tl.programmes .splide__arrow--next {
		left: calc(var(--padding-side-5) + 6rem);
	}
	.site-footer .copyright .col-2 {
		grid-template-columns: 15rem 1fr !important;
	}
	.site-footer img {
		width: 100%;
		max-width: 15rem;
	}
	.app-banner .row .col-2 {
		grid-template-columns: 70% 1fr !important;
	}
	.app-banner .row .col-2 .col-2 {
		grid-template-columns: 4rem 1fr !important;
		grid-column-gap: 6% !important;
	}
	.featured article a {
		grid-template-columns: 50% 50%;
	}
	.featured article a .post-button {
		width: calc(50% - (var(--margin-side-2) * 2));
		right: unset !important;
	}
	.featured article a > div:not(.post-info) {
		order: 5;
	}
	.featured article a > .post-info {
		padding-left: var(--padding-side-2);
		padding-right: var(--padding-side-2);
	}
	.featured > article .background-image {
		height: 100%;
	}
	.max-width {
		max-width: 55rem;
		width: 100%;
	}
}

@media(max-width: 900px) {
	.max-width {
		max-width: 100%;
	}
	.toggle-title {
		align-items: center !important;
	}
	#hero .button:not(.outline) {
		padding-bottom: 0 !important;
	}
	#hero .app-logo .button {
		padding: 0 !important;
	}
	#hero .row {
		padding-bottom: var(--padding-5) !important;
	}
	.lay-tl.programmes .splide__arrow--next,
	.icon-slider .splide__arrow--next {
		right: 0 !important;
	}
	.lay-tl.programmes .splide__arrow--prev,
	.icon-slider .splide__arrow--prev {
		left: 0 !important;
	}
	.products .splide__arrows {
		margin-top: 0 !important;
	}
	.products .splide__track {
		padding-bottom: 0 !important;
	}
	#apps .container, .banner-title.container {
		background-attachment: unset !important;
	}
	#hero .loop {
		display: block !important;
		margin-top: 0 !important;
	}
	#hero .container {
		min-height: calc(var(--vh-set) + var(--padding-3)) !important;
	}
	#hero .app-logo {
		display: grid;
		grid-template-columns: 5rem 1fr;
		align-items: center;
	}
	#hero .app-logo .button {
		text-align: left !important;
	}
	#hero .background-slider:before,
	.image-slider-banner .background-slider .splide__track li:before {
		background-image: linear-gradient(0deg, var(--color-dark-purple) 30%, transparent  100%) !important;
	}
	.post-share .max-width {
		width: 100%;
	}
	article .post-info .col-2 {
		grid-template-columns: 50% 50% !important;
	}
	article .post-info {
		padding-bottom: var(--padding-5) !important;
	}
	article .post-info .col-2 .button {
		text-align: left !important;
	}
	.news-hero {
		margin-top: var(--margin-2);
	}
	.steps .step-image {
		height: 50vw;
	}
	.steps li {
		align-content: space-between;
	}
	.image-slider-banner li.splide__slide {
		padding-bottom: var(--padding-5) !important;
	}
	.image-slider-banner .splide__pagination {
		right: unset !important;
		left: 0 !important;
	}
	.app-banner .grid {
		display: block !important;
		text-align: center;
		width: 100%;
		justify-items: center !important;
	}
	.app-banner h4 {
		margin: var(--margin-1) 0;
	}
	.other-pro .other-programmes li div > svg path {
		fill: var(--color-white) !important;
	}
	.other-programmes li > a,
	.other-products .bg-white {
		background: transparent !important;
	}
	.other-programmes li > a > div > svg path {
		fill: var(--color-purple) !important;
	}
	.products .splide__slide .button {
		text-align: left !important;
	}
	.programmes .splide__track,
	.products .splide__track {
		padding-bottom: var(--margin-1);
	}
	.underline {
		display: inline-block;
	}
	.main-navigation {
		display: grid;
		align-items: center;
	}
	#masthead:before {
		top: 0 !important;
	}
	.programmes .imageBox {
		display: none !important;
	}
	#masthead .site-branding, #masthead .main-menu {
		display: inline-block;
	}
	#masthead .main-menu {
		float: right;
	}
	#masthead .row {
		padding: 0.5rem var(--padding-side-5);
		background: var(--color-pink);
	}
	.site-branding svg path {
		fill: var(--color-purple) !important;
	}
	.site-branding svg {
		width: 14rem;
		max-width: 57vw;
	}
	.menu-button .menu-icon {
		width: clamp(1rem, 3.2rem, 15vw);
	}
	#masthead .menu-icon {
		border-color: var(--color-purple) !important;
	}
	#masthead .menu-button span {
		background-color: var(--color-purple) !important;
	}
	.programmes .cst-slider {
		padding-left: var(--padding-side-5);
		padding-right: var(--padding-side-5);
		width: calc(100% - (var(--padding-side-5) * 2));
	}
	#hero .container:not(.hero2) h1:not(.small-font) {
		font-size: clamp(1rem, 6vw, 3rem) !important;
	} 
	#hero .hero2 {
		padding-top: var(--padding-2);
	}
	h1 {
		font-size: clamp(2rem, 6vw, 3rem) !important;
	} 
	h2 {
		font-size: clamp(2rem, 12vw, 5.2rem) !important;
	} 
	h3, h4 {
		font-size: 2.3rem !important;
	} 
	h5 {
		font-size: 2rem !important;
	}
	.imageBox li.splide__slide {
		height: 30rem;
	}
	.imageBox {
		margin-top: var(--margin-2);
		order: 9 !important;
	}
	.button, .gform_footer {
		display: block !important;
		margin-left: 0 !important;
		width: auto !important;
	}
	.display-none-sm {
		display: none !important;
	}
	.main-menu #site-navigation {
		display: none;
	}
	.footer-logos {
		display: none;
	}
	.cust-list {
		column-count: 2;
	}
	.mob-cent {
		text-align: center;
	}
	.col-4 {
		grid-template-columns: repeat(2, 1fr) !important;
		grid-column-gap: 2% !important;
	}
	.copyright {
		text-align: center;
	}
	.copyright img {
		width: 12rem; 
		margin-bottom: var(--margin-1);
	}
}

@media(max-width: 500px) {
	article .post-button > div:not(.button) {
		display: none;
	}
	.footer-widgets .col-5 {
		display: block;
	}
	.cust-list {
		column-count: 1;
	}
	.col-4 {
		grid-template-columns: 100% !important;
		grid-column-gap: 0 !important;
	}
	footer h5 {
		padding: 0 !important;
	}
}



















/* Buttons
--------------------------------------------- */

.button:not(.gform_button), .gform_footer {
	padding: calc(var(--padding-1) * 1.2) 0;
	text-align: center;
	display: inline-block;
	transition: transform var(--transition-speed), color var(--transition-speed);
	background: transparent;
	width: fit-content;
	border-width: 1.5px;
	border-radius: 0.3rem;
	text-transform: lowercase;
	color: var(--color-purple);
	overflow: hidden;
	position: relative;
	font-weight: 500;
	height: fit-content;
}

.button ~ .button {
	padding: calc(var(--padding-1) * 1.2) var(--padding-side-1) !important;
}

.button.purple, .gform_footer {
	border-style: solid;
	border-color: var(--color-purple);
	color: var(--color-white);
	padding: calc(var(--padding-1) * 1.2) var(--padding-side-1) !important;
}

.button.purple:before,
.gform_footer:after {
	right: 0 !important;
}

body[data-body-color="bg-purple"] .white-change .button.outline:hover span,
body:not([data-body-color="bg-purple"]) .button.purple:hover span,
body[data-body-color="bg-purple"] .gform_footer .gform_button {
	color: var(--color-purple) !important;
}

body[data-body-color="bg-purple"] .steps .steps-nav:before,
body[data-body-color="bg-purple"] .steps .steps-nav:after {
	box-shadow: inset 0vw calc(var(--padding-5) * 1.7) var(--padding-3) calc(var(--padding-1) - (var(--padding-2) * 2)) var(--color-purple) !important;
}

.button.purple:hover:before,
.gform_footer:hover:after {
	right: -100% !important;
}

.white .button:before,
body[data-body-color="bg-purple"] .white-change .button:before,
body[data-body-color="bg-purple"] .gform_footer:after {
	background: var(--color-white) !important;
}

.button:not(.back-button):before, .gform_footer:after {
	content: "";
	pointer-events: none;
	background: var(--color-purple);
	width: 100%;
	height: 100%;
	position: absolute;
	right: 100%;
	bottom: 0;
	top: 0;
	display: block;
	transition: var(--transition);
	z-index: 1;
}

.gform_footer::after {
	z-index: -1 !important;
}

.button.outline {
	border-style: solid;
	padding: calc(var(--padding-1) * 1.2) var(--padding-side-1) !important;
	border-color: var(--color-purple);
}

.button svg path,
.button.purple:hover svg path,
body[data-body-color="bg-purple"] main .white-change .button.outline:hover svg path,
body[data-body-color="bg-purple"] .white-change a.purple svg path {
	stroke: var(--color-purple);
}

.button.purple svg path,
body[data-body-color="bg-purple"] main .white-change .button.purple:hover svg path,
.button.outline:hover svg path {
	stroke: var(--color-white);
}

.button.outline:hover,
body[data-body-color="bg-purple"] .gform_footer:hover .gform_button {
	color: var(--color-white) !important;
}

.app-banner a:hover .button.outline:before,
.button.outline:hover:before {
	right: 0 !important;
}

.button svg {
	height: 0.8em;
	width: auto;
	transform: translateY(10%);
	transition: var(--transition);
	margin-right: calc(var(--margin-side-1) / 4);
}

.white .button.outline {
	color: var(--color-white);
	border-color: var(--color-white);
}

body .app-banner a:hover .button.outline,
body .white .button.outline:hover,
.gform_footer:hover .button {
	color: var(--color-purple) !important;
}

.white .button path, .white svg line,
body[data-body-color="bg-purple"] .white-change a.purple:hover svg path {
	stroke: var(--color-white);
}

.white .button.outline:hover path,
.app-banner a:hover .button.outline path {
	stroke: var(--color-purple);
}

.white .button:not(.outline):not(.purple) {
	color: var(--color-white);
}

.button:not(.outline):not(.purple):not(.gform_button):hover,
#apps li:hover .button,
article:hover .button,
.products li:hover .button,
.other-pro li:hover .button {
	transform: translateX(1rem);
}

.button:not(.outline):not(.purple):not(.gform_button):hover span,
#apps li:hover .button span,
article:hover .button span,
.other-pro li:hover .button span {
	transform: skewX(-10deg);
	font-weight: 900;
	display: inline-block;
}

.button span,
.button svg {
	z-index: 99;
	position: relative;
}












/* Footer
--------------------------------------------- */

.site-footer {
	z-index: 99;
	position: relative;
}

.site-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-footer .sqb {
	font-weight: 900;
	transform: skew(-10deg);
	display: inline-block;
	color: var(--color-white) !important;
}

.site-footer .sqb:hover:after {
	width: 100%;
}

.site-footer .menu li a {
	color: var(--color-dark-purple2);
}

.site-footer ul li a {
	color: var(--color-dark-purple2);
	display: block;
	font-weight: 500;
	margin-top: 1.5rem;
	font-size: 1.1rem !important;
	transition: transform var(--transition-speed);
}

.site-footer .footer-logos img {
	transition: var(--transition);
}

.site-footer .footer-logos li:hover img {
	transform: scale(1.03);
}

.site-footer div:not(.footer-logos) > ul:not(.social) li a:hover {
	color: var(--color-purple) !important;
	transform: skew(-10deg);
	font-weight: 900;
}

.site-footer .social {
	width: 100%;
	max-width: 9rem;
}

.site-footer .social svg {
	height: 1.3rem;
	width: auto;
}

.site-footer .social svg path {
	fill: var(--color-dark-purple2);
}

.site-footer .social li:hover svg path {
	fill: var(--color-purple) !important;
}

.site-footer .social li {
	width: fit-content;
	margin-right: 0.5rem;
	display: inline-block;
}

.site-footer .widget-title {
	display: none;
}

.copyright .sep {
	margin: 0 1em;
	display: inline-block;
}















/* Forms
--------------------------------------------- */

.gform_fields > div {
	margin-top: var(--margin-1);
}

.gform_footer {
	margin-top: 3rem !important;
	display: block !important;
	padding: 0 !important;
	position: relative;
}

.gform_footer:before {
	content: "";
	display: inline-block;
	height: 0.8em;
	width: 0.6em;
	transform: translateY(15%);
	transition: filter 0s calc(var(--transition-speed) / 2) !important;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	left: var(--padding-side-1);
	margin-right: -0.8em;
	background-image: url(img/button-arrow.svg);
}

body .gform_footer:hover:before,
body[data-body-color="bg-purple"] .gform_footer:before {
	transition-delay: 0s !important;
	filter: invert(72%) sepia(61%) saturate(7134%) hue-rotate(279deg) brightness(82%) contrast(133%) !important;
}

body[data-body-color="bg-purple"] .gform_footer:hover:before {
	filter: none !important;
}

.gform_button {
	display: inline-block !important;
	margin: 0 !important;
	padding: calc(var(--padding-1) * 1.2) var(--padding-side-1) calc(var(--padding-1) * 1.2) calc((var(--padding-side-1) + 0.8em) + (var(--margin-side-1) / 3 )) !important;
	border: 0 !important;
	font-weight: 500;
	text-transform: lowercase !important;
	background: unset !important;
	transition: var(--transition);
}

/* Form Fields */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
	color: var(--color-purple);
	font-size: 1.1rem !important;
	border-top: none;
	border-left: none;
	outline: none;
	border-right: none;
	border-radius: 0 !important;
	background: none;
	border-bottom: 2px solid var(--color-purple);
	margin-top: var(--margin-1) !important;
	padding: 8px 0 !important;
}
 
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.ginput_container_select {
	position: relative;
}

.ginput_container_select:before {
	content: "";
	height: 1rem;
	width: 1rem;
	position: absolute;
	top: 50%;
	right: 0;
	transform: rotate(90deg);
	pointer-events: none;
	background-size: auto 0.8em;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(img/button-arrow.svg);
	filter: invert(72%) sepia(61%) saturate(7134%) hue-rotate(279deg) brightness(82%) contrast(133%) !important;
}

body[data-body-color="bg-purple"] .ginput_container_select:before {
	filter: none !important;
}


body:not([data-body-color="bg-purple"]) input[type="text"]:focus,
body:not([data-body-color="bg-purple"]) input[type="email"]:focus,
body:not([data-body-color="bg-purple"]) input[type="url"]:focus,
body:not([data-body-color="bg-purple"]) input[type="password"]:focus,
body:not([data-body-color="bg-purple"]) input[type="search"]:focus,
body:not([data-body-color="bg-purple"]) input[type="number"]:focus,
body:not([data-body-color="bg-purple"]) input[type="tel"]:focus,
body:not([data-body-color="bg-purple"]) input[type="range"]:focus,
body:not([data-body-color="bg-purple"]) input[type="date"]:focus,
body:not([data-body-color="bg-purple"]) input[type="month"]:focus,
body:not([data-body-color="bg-purple"]) input[type="week"]:focus,
body:not([data-body-color="bg-purple"]) input[type="time"]:focus,
body:not([data-body-color="bg-purple"]) input[type="datetime"]:focus,
body:not([data-body-color="bg-purple"]) input[type="datetime-local"]:focus,
body:not([data-body-color="bg-purple"]) input[type="color"]:focus,
body:not([data-body-color="bg-purple"]) textarea:focus,
body:not([data-body-color="bg-purple"]) select:focus {
	border-color: var(--color-dark-purple2);
	color: var(--color-dark-purple2);
}

body[data-body-color="bg-purple"] .gform_fields input:focus::placeholder,
body[data-body-color="bg-purple"] .gform_fields textarea:focus::placeholder {
	color: var(--color-white) !important;
}

input:-webkit-autofill {
	background: var(--color-purple) !important;
}

input:autofill {
  background: var(--color-purple) !important;
}

.gform_fields input:focus::placeholder,
.gform_fields textarea:focus::placeholder {
	color: var(--color-dark-purple2) !important;
}

::placeholder {
	color: var(--color-purple);
	opacity: 1 !important;
}

textarea {
	height: 200px !important;
	width: 100%;
	margin-top: var(--margin-1) !important;
}



/*--------------------------------------------------------------
 - IE Styles
--------------------------------------------------------------*/

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    /* IE10+-specific styles go here */
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="range"],
	input[type="date"],
	input[type="month"],
	input[type="week"],
	input[type="time"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="color"] {
		height: 36px !important;
	}
}







/* Padding
--------------------------------------------- */

.p-0 {
	padding: 0;
}

.ps-0 {
	padding-left: 0;
}

.ps-1 {
	padding-left: var(--padding-side-1);
}

.ps-2 {
	padding-left: var(--padding-side-2);
}

.ps-3 {
	padding-left: var(--padding-side-3);
}

.ps-4 {
	padding-left: var(--padding-side-4);
}

.ps-5 {
	padding-left: var(--padding-side-5);
}

.pe-0 {
	padding-right: 0;
}

.pe-1 {
	padding-right: var(--padding-side-1);
}

.pe-2 {
	padding-right: var(--padding-side-2);
}

.pe-3 {
	padding-right: var(--padding-side-3);
}

.pe-4 {
	padding-right: var(--padding-side-4);
}

.pe-5 {
	padding-right: var(--padding-side-5);
}

.px-0 {
	padding-right: 0;
	padding-left: 0;
}

.px-1 {
	padding-right: var(--padding-side-1);
	padding-left: var(--padding-side-1);
}

.px-2 {
	padding-right: var(--padding-side-2);
	padding-left: var(--padding-side-2);
}

.px-3 {
	padding-right: var(--padding-side-3);
	padding-left: var(--padding-side-3);
}

.px-4 {
	padding-right: var(--padding-side-4);
	padding-left: var(--padding-side-4);
}

.px-5 {
	padding-right: var(--padding-side-5);
	padding-left: var(--padding-side-5);
}

.py-0 {
	padding-top: 0;
	padding-bottom: 0;
}

.py-1 {
	padding-top: var(--padding-1);
	padding-bottom: var(--padding-1);
}

.py-2 {
	padding-top: var(--padding-2);
	padding-bottom: var(--padding-2);
}

.py-3 {
	padding-top: var(--padding-3);
	padding-bottom: var(--padding-3);
}

.py-4 {
	padding-top: var(--padding-4);
	padding-bottom: var(--padding-4);
}

.py-5 {
	padding-top: var(--padding-5);
	padding-bottom: var(--padding-5);
}

.pt-0 {
	padding-top: 0;
}

.pt-1 {
	padding-top: var(--padding-1);
}

.pt-2 {
	padding-top: var(--padding-2);
}

.pt-3 {
	padding-top: var(--padding-3);
}

.pt-4 {
	padding-top: var(--padding-4);
}

.pt-5 {
	padding-top: var(--padding-5);
}

.pb-0 {
	padding-bottom: 0;
}

.pb-1 {
	padding-bottom: var(--padding-1);
}

.pb-2 {
	padding-bottom: var(--padding-2);
}

.pb-3 {
	padding-bottom: var(--padding-3);
}

.pb-4 {
	padding-bottom: var(--padding-4);
}

.pb-5 {
	padding-bottom: var(--padding-5);
}






/* Margin
--------------------------------------------- */

.m-0 {
    margin: 0;
}

.ms-0 {
    margin-left: 0;
}

.ms-1 {
    margin-left: var(--margin-side-1);
}

.ms-2 {
    margin-left: var(--margin-side-2);
}

.ms-3 {
    margin-left: var(--margin-side-3);
}

.ms-4 {
    margin-left: var(--margin-side-4);
}

.ms-5 {
    margin-left: var(--margin-side-5);
}

.me-0 {
    margin-right: 0;
}

.me-1 {
    margin-right: var(--margin-side-1);
}

.me-2 {
    margin-right: var(--margin-side-2);
}

.me-3 {
    margin-right: var(--margin-side-3);
}

.me-4 {
    margin-right: var(--margin-side-4);
}

.me-5 {
    margin-right: var(--margin-side-5);
}

.mx-0 {
    margin-right: 0;
    margin-left: 0;
}

.mx-1 {
    margin-right: var(--margin-side-1);
    margin-left: var(--margin-side-1);
}

.mx-2 {
    margin-right: var(--margin-side-2);
    margin-left: var(--margin-side-2);
}

.mx-3 {
    margin-right: var(--margin-side-3);
    margin-left: var(--margin-side-3);
}

.mx-4 {
    margin-right: var(--margin-side-4);
    margin-left: var(--margin-side-4);
}

.mx-5 {
    margin-right: var(--margin-side-5);
    margin-left: var(--margin-side-5);
}

.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.my-1 {
    margin-top: var(--margin-1);
    margin-bottom: var(--margin-1);
}

.my-2 {
    margin-top: var(--margin-2);
    margin-bottom: var(--margin-2);
}

.my-3 {
    margin-top: var(--margin-3);
    margin-bottom: var(--margin-3);
}

.my-4 {
    margin-top: var(--margin-4);
    margin-bottom: var(--margin-4);
}

.my-5 {
    margin-top: var(--margin-5);
    margin-bottom: var(--margin-5);
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: var(--margin-1);
}

.mt-2 {
    margin-top: var(--margin-2);
}

.mt-3 {
    margin-top: var(--margin-3);
}

.mt-4 {
    margin-top: var(--margin-4);
}

.mt-5 {
    margin-top: var(--margin-5);
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: var(--margin-1);
}

.mb-2 {
    margin-bottom: var(--margin-2);
}

.mb-3 {
    margin-bottom: var(--margin-3);
}

.mb-4 {
    margin-bottom: var(--margin-4);
}

.mb-5 {
    margin-bottom: var(--margin-5);
}