:root {
	/* //////////////////////////////////////////////////////////// */
	--text-colour              : #000;
	/* //////////////////////////////////////////////////////////// */
	--colour-1                 : #B30A00;
	--colour-1-darker          : #52000F;
	--colour-1-lighter         : #FF99AD;
	--colour-2                 : #DCD5D1;
	--colour-2-darker          : #B9ACA3;
	--colour-2-lighter         : #EAE6E3;
	--colour-3                 : #F5F3F1;
	--colour-3-darker          : #000;
	--colour-3-lighter         : #000;
	--colour-4                 : #000;
	--colour-4-darker          : #000;
	--colour-4-lighter         : #000;
	--colour-5                 : #000;
	--colour-5-darker          : #000;
	--colour-5-lighter         : #000;
	--colour-6                 : #000;
	--colour-6-darker          : #000;
	--colour-6-lighter         : #000;
	/* /////////////////////////////////// */
	--preloader-bg             : #690207;
	--preloader-circle         : rgba(30, 30, 30, 0.1);
	/* /////////////////////////////////// */
	--form-error               : #690207;
	--form-accent-colour       : #000;
	--input-label              : #000;
	--input-color              : #000;
	--input-placeholder        : #000;
	--input-bg                 : white;
	--input-borders            : grey;
	/* /////////////////////////////////// */
	--swiper-theme-color       : var(--colour-1);
	--swiper-bullet            : var(--colour-1);
	--swiper-bullet-off        : #000;
	--swiper-bullet-on         : var(--colour-1);
	/* /////////////////////////////////// */
	--nav-large                : 0px;
	--nav-small                : 0px;
	/* /////////////////////////////////// */
	--alt-font                 : Times;
	/* /////////////////////////////////// */
	--popup-bg                 : #000;
	--popup-colour             : #FFF;
	/* /////////////////////////////////// */
	--base-spacing             : var(--base-spacing-temp);
	--base-spacing-temp        : 60px;
	/* /////////////////////////////////// */
	--suggestion-bg            : #efefef;
	--suggestion-colour        : #000;
	--suggestion-border-colour : lightgray;
	/* /////////////////////////////////// */
	--swiper-navigation-size   : 60px;
}

body, html {
	font-family : "ivyjournal", sans-serif;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	font-weight : 500;
	/*font-family : "ivyjournal", sans-serif;*/
}

h1, .h1 {
	margin-bottom : 1.5rem;
}

h2, .h2 {
	margin-bottom : 1.3rem;
}

h3, .h3 {
	margin-bottom : 1.1rem;
	font-family   : "ivyjournal", sans-serif;
}

h4, .h4 {
	margin-bottom : 1rem;
	font-family   : "ivyjournal", sans-serif;
}

.trial,
.ticker,
.intro-text,
.header {
	font-family : 'Rework Text Regular';
}

.header {
	line-height : var(--h4-line-height);
}

.button,
button,
.trial-bold {
	font-family : 'Rework Text Bold';
}

.ivy {
	font-family : "ivyjournal", sans-serif;
	font-weight : 400;
	font-style  : normal;
}

.ivy em,
.ivy_i {
	font-family : "ivyjournal", sans-serif;
	font-weight : 400;
	font-style  : italic;
}

.ivy b,
.ivy strong,
.ivy_b {
	font-family : "ivyjournal", sans-serif;
	font-weight : 700;
	font-style  : normal;
}

.ivy b em,
.ivy strong em,
.ivy_b-i {
	font-family : "ivyjournal", sans-serif;
	font-weight : 700;
	font-style  : italic;
}

/* //////////////////////////////////////////////////////////// */
/* // Header and Main Navigation */
/* //////////////////////////////////////////////////////////// *//* ///////////// */
nav {
	transition : all 0.3s ease-in-out;
}

nav li:hover a,
nav .active {
	color : var(--colour-1-lighter);
}

nav li:hover a:after {
	transform : translate3d(5px, -5px, 0); /* right 5px, up 5px */
}

.downloads ul li:hover a:after {
	transform : translate3d(3px, -3px, 0); /* right 5px, up 5px */
}

body:not(.nav-open).scrolled nav > div {
	box-shadow : 0px 0px 15px rgba(0, 0, 0, 0.2);
}

body[folder="home"]:not(.scrolled) nav {
	opacity    : 0;
	visibility : hidden;
}

body[folder="home"].scrolled nav {
	opacity    : 1;
	visibility : visible;
}

body:not(.scrolled):not(.nav-open) .header-logo {
	visibility : hidden;
	opacity    : 0;
}


body p {
	text-wrap    : pretty;
}

.header-logo {
	visibility  : visible;
	opacity     : 1;
	height      : 24px;
	width       : fit-content;
	padding-top : 3px;
	transition  : all 0.3s ease-in-out;
}

nav {
	height : 100px;
}

.burger-menu {
	padding : 0;
}

.menu-closed,
.menu-opened {
	visibility : hidden;
	opacity    : 0;
	transition : all 0.3s ease-in-out;
	cursor     : pointer;
}

body:not(.nav-open) .menu-closed,
body.nav-open .menu-opened {
	visibility : visible;
	opacity    : 1;
}

nav .inner {
	background-color : var(--colour-1);
	position         : relative; /* create stacking context for the pseudo element */
	z-index          : 1;
	box-shadow       : 0px 0px 15px rgba(0, 0, 0, 0);
	transition       : all 0.6s ease-in-out;
}

body.nav-open nav .inner {
	box-shadow : 0px 0px 15px rgba(0, 0, 0, 0.2);
}

body nav > div:first-of-type {
	transition : all 0.5s ease-in-out;
}

.pattern::before {
	content               : "";
	position              : absolute;
	top                   : 0;
	right                 : auto;
	left                  : 0;
	height                : 100%;
	width                 : 100%;
	pointer-events        : none;
	background-image      : url(/resources/images/shapes.svg);
	background-repeat     : no-repeat;
	background-position   : left bottom;
	background-size       : auto 100%;
	background-attachment : fixed;
	opacity               : 0.1;
	z-index               : 0;
}

nav .inner::before {
	content               : "";
	position              : absolute;
	top                   : 0;
	right                 : 0;
	left                  : auto;
	height                : 100%;
	width                 : 100%;
	pointer-events        : none;
	background-image      : url(/resources/images/shapes-nav.svg);
	background-repeat     : no-repeat;
	background-position   : right top;
	background-size       : auto 100%;
	background-attachment : fixed;
	opacity               : 0.1;
	z-index               : 0;
}

.level-0 {
	margin-right  : auto !important;
	padding-left  : 2rem !important;
	margin-bottom : auto !important;
	padding-top   : var(--base-spacing);
}

.level-0 > li a {
}

.level-0 > li > a {
	padding  : 3px 5px 3px 0px;
	position : relative;
	/*	background-image: url("/resources/images/arrow-link.svg");
		background-repeat: no-repeat;
		background-position: right center;
		background-size: contain;
		padding-right: 50px;*/
}

.level-0 > li > a:after {
	content             : "";
	position            : absolute;
	top                 : 12px;
	right               : -13px;
	width               : 13px;
	height              : 13px;
	background-image    : url(/resources/images/arrow-link-small.svg);
	background-repeat   : no-repeat;
	background-position : center;
	background-size     : contain;
}

nav li a:after {
	transform   : translate3d(0, 0, 0);
	transition  : transform 200ms ease;
	will-change : transform;
}

/* //////////////////////////////////////////////////////////// */
/* // Content */
/* //////////////////////////////////////////////////////////// */
.generic ul,
.generic ol {
	padding-left : 15px;
}

/* //////////////////////////////////////////////////////////// */
/* // Footer */
/* //////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////// */
/* // Buttons */
/* //////////////////////////////////////////////////////////// */
button {
	text-transform : uppercase;
}

.button-submit,
button[type="submit"] {
	border-radius   : 100%;
	aspect-ratio    : 1 / 1;
	background      : var(--colour-1);
	color           : var(--colour-1-lighter);
	text-transform  : uppercase;
	vertical-align  : middle;
	display         : inline-flex;
	justify-content : center;
	align-items     : center;
	padding-left    : 8px;
	padding-right   : 8px;
}

/* //////////////////////////////////////////////////////////// */
/* // Forms */
/* //////////////////////////////////////////////////////////// */
.form-grid {
	grid-template-columns : 1fr !important;
	grid-gap              : 0px 20px;
}

.fl-form .fl-wrap-select:after {
	display : none;
}

select {
	background-image    : url("/resources/images/select-down.svg?v=2");
	background-repeat   : no-repeat;
	background-size     : 16px 16px;
	background-position : calc(100%) 5px;
}

/* //////////////////////////////////////////////////////////// */
/* // Custom */
/* //////////////////////////////////////////////////////////// */
body:not([folder="news-event"]) .excerpt p {
	font-size   : inherit;
	line-height : inherit;
}

.news-top .date,
.news-grid .date,
.news-items .date {
	margin-top    : calc(var(--base-spacing) * 0.4) !important;
	margin-bottom : 0 !important;
}

.news-top .h3,
.news-grid h4.h5,
.news-items .swiper-slide .h5 {
	margin-top : 0.5rem !important;
}

.news-top .excerpt a {
	text-decoration : underline;
}

.go-pink {
	filter : brightness(0) saturate(100%) invert(67%) sepia(9%) saturate(1819%) hue-rotate(300deg) brightness(103%) contrast(102%);
}

.swiper-slide > div {
	height : 100%;
}

.swiper-wrapper {
	align-items : stretch !important;
}

.slider-3-way .swiper-button-next,
.slider-3-way-auto .swiper-button-next,
.slider-3-way .swiper-button-prev,
.slider-3-way-auto .swiper-button-prev {
	bottom : -17px;
	top    : auto;
	cursor : pointer;
}

.slider-3-way .swiper-button-prev,
.slider-3-way-auto .swiper-button-prev {
	left  : 20px;
	right : auto;
}

/*div.type-2 > .slider-3-way .swiper-button-prev {
	left: 0px;
	right: auto;
}*/
.slider-3-way .swiper-button-next,
.slider-3-way-auto .swiper-button-next {
	left  : 60px;
	right : auto;
}

/*div.type-2 > .slider-3-way .swiper-button-next {
	left  : 40px;
	right : auto;
}*/
.swiper-button-next:after,
.swiper-button-prev:after {
	content : '';
}

.slider-3-way,
.slider-3-way-auto {
	padding-bottom : 75px;
}

.slider-3-way .h1,
.slider-3-way-auto .h1 {
	margin : 1rem 0 -1rem 0;
}

.type-1 {
	border-left : 1px solid var(--colour-1-lighter);
}

.type-2 {
}

.dev-grid a div,
.block-grid a div {
	line-height : 1.3em;
	z-index     : 1;
}

.dev-grid div.img-grow img.main-image,
.dev-grid a img.main-image,
.block-grid a img {
	opacity : 0.7 !important;
}

.block-grid a .h4:after {
	content             : "";
	width               : 14px;
	height              : 14px;
	background-image    : url(/resources/images/arrow-link-small-white.svg);
	background-repeat   : no-repeat;
	background-position : center;
	background-size     : contain;
	display             : inline-block;
	position            : relative;
	transition          : transform 0.3s ease-in-out;
}

.dev-grid > div {
	border-bottom : 1px solid #000;
}

.dev-grid > div h4 {
	border-top  : 1px solid #000;
	padding-top : 1rem;
	margin-top  : 10px;
}

.circle-bg {
	border-radius : 100%;
	aspect-ratio  : 1 / 1;
	/*background    : var(--colour-1);*/
	/*border: 2px solid var(--colour-1);*/
}

#content-area {
	margin-top : 0 !important;
	opacity    : 1;
}

.border-fix {
	border-bottom  : 1px solid var(--colour-1-lighter);
	padding-bottom : 2px;
}

.colour-1 .border-fix {
	border-color : var(--colour-1);
}

.social-circle {
	display         : flex;
	aspect-ratio    : 1 / 1;
	padding         : 3px;
	border          : 1px solid var(--colour-1-lighter);
	width           : 32px;
	border-radius   : 100%;
	line-height     : 1.3em;
	transition      : opacity 0.23s ease-in-out;
	align-items     : center;
	justify-content : center;
}

h4.trial,
.h4.trial {
	line-height : 1.3em;
}

.button-top {
	/* Define the base styles */
	bottom     : 2rem;
	z-index    : 20;
	position   : absolute;
	left       : 50%;
	transform  : translateX(-50%);
	background : #fff;
	color      : var(--colour-1);
	/* --- THIS IS THE KEY CHANGE --- */
	/* The transition property should be on the base class */
	/* It tells the browser how to animate these properties WHENEVER they change */
	/*opacity    : 1;
	visibility : visible;*/
	transition : opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.colour-1-darker-bg .swiper .swiper-button-prev,
.colour-1-darker-bg .swiper .swiper-button-next {
	filter : brightness(100);
}

.social-circle:hover {
	border : 1px solid #fff;
	color  : #fff;
}

#content-area {
	padding    : 0px;
	margin-top : -180vh;
}

#scroll-spacer {
	bottom     : 0vh;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,b30a00+82,b30a00+82,b30a00+82,b30a00+100&0+0,0+81,1+82,1+100 */
	background : linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(177, 10, 0, 0) 81%, rgba(179, 10, 0, 1) 82%, rgba(179, 10, 0, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

/* Adjust content-area margin-top in landscape orientation to prevent gap under footer */
@media (orientation : landscape) {
	#content-area {
		/*margin-top : -140vh;*/
	}
}

/*.sp1 {
	padding-right : 190px;
}*/
/* --- General Setup (mostly the same) --- */
.intro-logo {
	width     : 500px;
	max-width : 80%;
}

.intro-logo img {
	width  : 100%;
	height : auto;
}

/* --- DEFINE THE ANIMATIONS --- */
@keyframes fadeIn {
	from {
		opacity : 0;
	}
	to {
		opacity : 1;
	}
}

@keyframes slideInFromLeft {
	from {
		opacity   : 0;
		transform : translateX(-5vw); /* Use transform for better performance */
	}
	to {
		opacity   : 1;
		transform : translateX(0);
	}
}

@keyframes slideInFromRight {
	from {
		opacity   : 0;
		transform : translateX(5vw);
	}
	to {
		opacity   : 1;
		transform : translateX(0);
	}
}

/* --- APPLY THE ANIMATIONS WHEN THE BODY CLASS IS PRESENT --- */
/* The elements start hidden by default, no special rules needed */
body.ani-start .logo-ani-1 {
	animation-name            : fadeIn;
	animation-duration        : 1s;
	animation-timing-function : ease-in-out;
	animation-fill-mode       : forwards; /* IMPORTANT */
}

body.ani-start .logo-ani-2 {
	animation-name            : slideInFromLeft;
	animation-duration        : 1s;
	animation-timing-function : ease-in-out;
	animation-delay           : 1s; /* Stagger the start */
	animation-fill-mode       : forwards;
}

body.ani-start .logo-ani-3 {
	animation-name            : slideInFromRight;
	animation-duration        : 1s;
	animation-timing-function : ease-in-out;
	animation-delay           : 2s; /* Stagger the start */
	animation-fill-mode       : forwards;
}

#animation-container {
	height : 100vh;
}

/* Initially hide all animating parts to prevent any flash */
.logo-ani-1,
.logo-ani-2,
.logo-ani-3 {
	opacity : 0;
}

#element-b img {
	/*transition : opacity 0.5s ease-in-out;*/
}

.intro-text {
	font-size  : 36px;
	transition : all 0.3s ease-in-out;
}

#element-b-1 .intro-text {
	opacity : 0;
	left    : 5vw;
	top     : calc(100vh);
}

/*body.ani-2 #element-a,
body.ani-3 #element-a {
	opacity: 1 !important;
}*/
body.ani-2 #element-b,
body.ani-3 #element-b {
	opacity : 1 !important;
}

body.ani-2 #element-b-1 .intro-text,
body.ani-3 #element-b-1 .intro-text {
	opacity : 1;
	top     : calc(100vh - 10%);
}

#element-b-2 .intro-text {
	opacity : 0;
	left    : 5vw;
	top     : calc(100vh);
}

body.ani-3 #element-b-2 .intro-text {
	opacity : 1;
	top     : calc(100vh - 10%);
}

body.ani-2 img.image-1,
body.ani-2 img.graphic-1,
body.ani-3 img.image-1,
body.ani-3 img.graphic-1 {
	opacity : 0 !important;
}

.ticker-holder {
	height   : 77px;
	padding  : 20px 0px;
	/*margin   : 0 -1.5rem;
	width    : calc(100% + 3rem) !important;*/
	position : relative;
}

.ticker img {
	display : inline;
	height  : 2.6rem;
	width   : auto;
	margin  : -4px -3px 0 0;
}

.ticker .holder {
	position : relative;
	display  : inline-block;
	padding  : 0 60px 0 0;
}

.footer-logo {
	width  : auto;
	height : 30px;
	margin : inherit;
}

.top-line:before {
	content          : "";
	display          : block;
	width            : 100%;
	height           : 1px;
	background-color : var(--colour-1);
	/*margin-bottom    : var(--base-spacing);*/
}

section:has(.slider-full) .swiper-pagination {
	left       : 0;
	top        : calc(100% + 10px);
	height     : 10px;
	text-align : left;
	display    : block;
	width      : 100%;
}

section:has(.slider-full) .swiper-pagination-bullet {
	float         : left;
	width         : 10px;
	height        : 10px;
	/*display       : inline-block;*/
	border-radius : 50%;
	background    : transparent;
	opacity       : 1;
	border        : 1px solid var(--colour-1);
}

section:has(.slider-full) .swiper-pagination-bullet-active.swiper-pagination-bullet {
	background : var(--colour-1);
}

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

.downloads ul li {
	list-style    : none;
	padding       : 0;
	margin        : 0;
	position      : relative;
	border-bottom : 1px solid #fff;
}

.downloads ul li a {
	padding : 15px 0 6px 0;
	margin  : 0;
	display : block;
}

.downloads ul li a:after {
	content             : "";
	position            : absolute;
	top                 : 14px;
	right               : 0;
	width               : 14px;
	height              : 14px;
	background-image    : url(/resources/images/arrow-link-small-white.svg);
	background-repeat   : no-repeat;
	background-position : center;
	background-size     : contain;
	transition          : all 0.2s ease-in-out;
}

.circled {
	border-radius : 100%;
}

.generic ul li > ul {
	list-style-type : "- ";
	padding         : 0;
	margin          : 0 0 5px 0;
}

.generic ul li > ul > li {
	padding : 0 0 0 5px;
}

/*
.swiper-pagination-clickable .swiper-pagination-bullet {
	cursor: pointer;
}

.swiper-pagination-bullet {
	width         : 10px;
	height        : 10px;
	display       : inline-block;
	border-radius : 50%;
}
*/
@media (min-width : 1600px) {
}

@media (min-width : 1280px) {
	.fix-4 {
		padding-right : 112px;
	}
}

@media (min-width : 1024px) {
}

@media (min-width : 1024px) {
}

@media (min-width : 1024px) {
	.pin-selector {
		height : 425px;
	}

	.map-nav {
		width     : 350px;
		min-width : 350px;
	}

	.swiper-slide {
		overflow : visible; /* or auto depending on layout */
	}

	/*.has-scroller .swiper-slide ul:first-of-type {
		overflow-y    : scroll;
		max-height    : 230px;
		padding-right : 5px;
	}

	!* Webkit browsers (Chrome, Safari, Edge) *!
	.has-scroller .swiper-slide ul:first-of-type::-webkit-scrollbar {
		width         : 8px;
		border-radius : 0px;
	}

	.has-scroller .swiper-slide ul:first-of-type::-webkit-scrollbar-thumb {
		background-color : var(--colour-2); !* your color *!
		border-radius    : 0px;
	}

	.has-scroller .swiper-slide ul:first-of-type::-webkit-scrollbar-track {
		background    : #f0f0f0; !* track color *!
		border-radius : 0px;
	}

	!* Firefox *!
	.has-scroller .swiper-slide ul:first-of-type {
		scrollbar-width : thin;
		border-radius   : 0px;
		scrollbar-color : var(--colour-2) #f0f0f0; !* thumb track *!
	}*/
	.img-grow img {
		transition : transform 0.3s ease-in-out;
	}

	a.img-grow:hover .h4:after {
		transform : translate(3px, -3px); /* right 3px, up 3px */
	}

	div.img-grow:hover img:last-of-type,
	a.img-grow:hover img:last-of-type {
		transform : scale(1.05);
	}

	section:has(.slider-3-way) .swiper-button-prev,
	section:has(.slider-3-way-auto) .swiper-button-prev {
		left : 0px;
	}

	section:has(.slider-3-way) .swiper-button-next,
	section:has(.slider-3-way-auto) .swiper-button-next {
		left : 40px;
	}

	section:has(.slider-full) > div {
		max-width : calc(100% - 8rem);
	}

	section:has(.slider-full) .swiper-button-prev {
		left : -60px;
	}

	section:has(.slider-full) .swiper-button-next {
		right : -60px;
	}
}

@media (min-width : 768px) {
	.type-2 {
		padding-right : var(--base-spacing);
	}
}

@media (max-width : 1400px) {
}

@media (max-width : 1200px) {
}

@media (max-width : 1024px) {
	/*footer > div > div.padding {
		padding : 2rem;
	}*/
	.padding .padding {
		padding : 0px;
	}
}

@media (max-width : 768px) {
	.gap-12 {
		gap : calc(var(--spacing) * 12) 0;
	}

	.level-0 {
		padding-top : calc(var(--base-spacing) * 3) !important;
	}

	section:has(.slider-full) .swiper-button-next,
	section:has(.slider-full) .swiper-button-prev {
		filter : brightness(100);
	}

	.slider-3-way,
	.slider-3-way-auto {
		padding-top : 1.5rem;
	}

	.slider-3-way .swiper-slide,
	.slider-3-way-auto .swiper-slide {
		padding-left  : 2rem;
		padding-right : 2rem;
	}

	.type-1 {
		border-left : 0px;
		padding     : 0px;
	}

	.level-0 > li > a:after {
		top    : 11px;
		right  : -14px;
		width  : 14px;
		height : 14px;
	}
}

@media (max-width : 640px) {
	.intro-text {
		font-size : 28px;
	}

	nav .inner::before {
		top                 : 0;
		right               : 0;
		left                : auto;
		height              : 100%;
		width               : 100%;
		background-position : bottom;
		background-size     : 100% auto;
	}
}

/* /////////////////////////////////////////////////// */
@media (min-width : 481px) {
	.fix-2 {
		display : none;
	}

	.fix-3 {
		display : block;
	}
}

@media (max-width : 480px) {
	.fix-2 {
		display : block;
		opacity : 0.3;
	}

	.fix-3 {
		display : none;
	}

	.fix-1 {
		object-position : 70%;
	}

	.ticker-holder {
		height : 50px;
	}
}

/* /////////////////////////////////////////////////// */
/* --- Swiper Responsive Widths --- */
/* Default (Mobile: 1 slide) */
.slider-3-way .swiper-slide {
	width : 100%;
}

/* Tablet (>= 768px: 2 slides) */
@media (min-width : 768px) {
	.slider-3-way .swiper-slide {
		/* (100% container - 1 gap) / 2 slides */
		width : calc((100% - 20px) / 2);
	}

	.slider-3-way .swiper-slide.double-width {
		/* This slide should take up the whole view */
		width : 100%;
	}
}

/* Desktop (>= 1024px: 3 slides) */
@media (min-width : 1024px) {
	.slider-3-way .swiper-slide {
		/* (100% container - 2 gaps) / 3 slides */
		width : calc((100% - 40px) / 3);
	}

	.slider-3-way .swiper-slide.double-width {
		/* (Width of 2 slides) + (1 gap in between) */
		width : calc(((100% - 40px) / 3) * 2 + 20px);
	}
}