:root {
  --background-old: rgba(228,217,186,1);
  --background-old-2: rgba(242,192,65,1);
  
  --background-1: rgba(255,255,255,1);
  
  --colour-1: rgba(227,86,54,1);
  --colour-2: rgba(242,192,65,1);
  --colour-3: rgba(215,238,244,1);
  --colour-4: rgba(102,63,50,1);
  
  --gradient-1: radial-gradient(rgba(249,185,0,1), rgba(220,110,20,1));
  	
  --colour-light: rgba(255,255,255,1);
  --colour-medium: rgba(180,180,180,1);
  --colour-dark: rgba(242,192,65,1);
  
  --text-light: rgba(255,255,255,1);
  --text-dark: rgba(30,40,60,1);
  --text-coloured: rgba(150,150,150,1);
  
  --page-width: 100vw;
}

@font-face {
	font-family: standard;
	font-style: normal;
	src: url('../fonts/HelveticaNeueLt.ttf');
}
@font-face {
	font-family: links;
	font-style: normal;
	src: url('../fonts/HelveticaNeueMed.ttf');
}
@font-face {
	font-family: display;
	font-style: normal;
	src: url('../fonts/HelveticaNeue.ttf');
}
@font-face {
	font-family: titles;
	font-style: normal;
	src: url('../fonts/HelveticaNeueBd.ttf');
}
@font-face {
	font-family: standard-medium;
	font-style: normal;
	src: url('../fonts/HelveticaNeue.ttf');
}
@font-face {
	font-family: handwriting;
	font-style: normal;
	src: url('../fonts/RumRaisin-Regular.ttf');
}
@font-face {
	font-family: italics;
	font-style: normal;
	src: url('../fonts/BerkshireSwash-Regular.ttf');
}

html {
	font-size: 17px;
}
@media (max-width: 900px) {
	html {
		font-size: 16px;
	}
}
@media (max-width: 600px) {
	html {
		font-size: 15px;
	}
}

body {
	margin: 0;
	background-color: var(--background-1);
	background-position: top;
	background-size: cover;
	font-family: standard;
	overflow-X: hidden;
}

/* Scroll bar */
/* width */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
/* Track */
::-webkit-scrollbar-track {
	background: rgba(200,200,200,0);
}
/* Handle */
::-webkit-scrollbar-thumb {
	background-color: rgba(100,100,100,1);
	border-radius: 0px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background-color: rgba(50,50,50,1);
}
::-webkit-scrollbar-button {
	display: none;
}
p, li, a {
	font-family: standard;
	font-size: 1rem;
	color: var(--text-dark);
	font-weight: normal;
	text-decoration: none;
	letter-spacing: -0.02em;
}
h1, h2, h3, h4, h5, h6 {
	font-family: titles;
	font-weight: normal;
	color: var(--text-dark);
	letter-spacing: -0.04em;
}

h1 {font-size: 3rem; line-height: 3.2rem; margin: 1rem 0;}
h2 {font-size: 2.8rem; line-height: 3rem; margin: 1rem 0;}
h3 {font-size: 2.6rem; line-height: 2.8rem; margin: 1rem 0;}
h4 {font-size: 2.4rem; line-height: 2.6rem; margin: 1rem 0;}
h5 {font-size: 2.2rem; line-height: 2.4rem; margin: 1rem 0;}
h6 {font-size: 1.4rem; line-height: 1.6rem; margin: 1rem 0;}
p {font-size: 1rem; line-height: 1.2rem; margin: 0.5rem 0;}

.handwriting {font-family: handwriting; font-weight: normal; letter-spacing: 0;}
.italics {font-family: italics; font-weight: normal; letter-spacing: 0;}
.bubbled {-webkit-text-stroke-width: 1.125rem; -webkit-text-stroke-color: rgba(217,81,48,1); paint-order: stroke fill;}
.fontColour1 {color: rgba(186,197,228,1);}
.fontColour2 {color: rgba(96,130,159,1);}
.fontColour3 {color: rgba(242,192,65,1);}

/*==============================*/
/* Header and logo              */
/*==============================*/
header {
	position: fixed;
	padding: 0px 20px;
	box-sizing: border-box;
	top: 10px;
	left: 10px;
	height: 60px;
	width: calc(100% - 20px);
	background-color: rgba(255,255,255,0);
	border-radius: 40px;
	transition: 0.2s all ease-in-out;
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	z-index: 99999;
	
	&::before {
		content: '';
		position: absolute;
		opacity: 0;
		left: 50%;
		transform: translateX(-50%);
		top: 0;
		display: block;
		width: 0%;
		height: 100%;
		border-radius: 0px;
		background-color: rgba(0,0,0,1);
		transition: 0.2s all linear;
	}
	&:hover::before {
		width: 100%;
	}
	
}
header.fix {
	height: 60px;
	background-color: rgba(255,255,255,0);
	
	&::before {
		opacity: 1;
		width: 100%;
		border-radius: 40px;
	}
}
header.account {
	position: fixed;
	padding: 0px 20px;
	box-sizing: border-box;
	top: 0px;
	left: 0px;
	height: 60px;
	width: 100%;
	background-color: rgba(255,255,255,0);
	border-radius: 0px;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	transition: 0.2s all ease-in-out;
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	z-index: 99999;
	
	&::before {
		content: '';
		position: absolute;
		opacity: 0;
		left: 50%;
		transform: translateX(-50%);
		top: 0;
		display: block;
		width: 0%;
		height: 100%;
		border-radius: 0px;
		background-color: rgba(0,0,0,0);
		transition: 0.2s all linear;
	}
	&:hover::before {
		width: 100%;
	}
	
}
header.account.fix {
	height: 60px;
	background-color: rgba(255,255,255,1);
	
	&::before {
		opacity: 1;
		width: 100%;
		border-radius: 40px;
	}
}
.top-margin {
	margin-top: 100px !important;
}
.logo {
	position: relative;
	float: left;
	left: 0px;
	top: 15px;
	height: 50px;
	width: 138px;
	border: 0px solid var(--primary-1);
	border-radius: 0px;
	background-size: auto 100%;
	background-position: left;
	background-repeat: no-repeat;
	z-index: 99999;
	transition: 0.1s all ease-in-out 0s;
	
	font-family: titles;
	color: rgba(0,0,0,1);
	line-height: 30px;
	font-size: 28px;
	letter-spacing: -2.7px;
	padding-left: 29px;
}
header.fix .logo {
	top: 15px;
	height: 30px;
	width: 116px;
	color: rgba(255,255,255,1);
	transition: 0.1s all ease-in-out 0.1s;
}
@media (max-width: 700px) {
	.logo {
		color: rgba(0,0,0,1);
	}
	header.on .logo {
		color: rgba(255,255,255,1);
	}
}
.menu-button {
	position: relative;
	display: none;
	float: right;
	top: 10px;
	height: 40px;
	width: 40px;
	background-color: rgba(200,200,200,0);
	transition: 0.3s all ease-in-out;
	z-index: 99999999999999;
}
@media (max-width: 700px) {
.menu-button {
	display: inline-block;
}
}
.menu-button:hover {
	cursor: pointer;
}
header.fix .menu-button {
	top: 10px;
}
.menu-line {
	position: absolute;
	height: 2px;
	width: 30px;
	background-color: rgba(0,0,0,1);
	transition: 0.3s all ease-in-out;
}
header.on .menu-line {
	background-color: rgba(255,255,255,1);
}
.menu-line.one {
	top: 15px;
	left: 0;
}
.menu-button:hover .menu-line.one {
	left: 10px;
}
.menu-line.two {
	top: 23px;
	left: 10px;
}
.menu-button:hover .menu-line.two {
	left: 0;
}
header.fix .menu-line {
	background-color: rgba(255,255,255,1);
}
header.on .menu-line.one, header.on .menu-button:hover .menu-line.one {
	top: 19px;
	left: 5px;
	transform: rotate(45deg);
}
header.on .menu-line.two, header.on .menu-button:hover .menu-line.two {
	top: 19px;
	left: 5px;
	transform: rotate(-45deg);
}

nav {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 60px;
	width: fit-content;
}
header.fix nav {
	height: 60px;
}
header.fix nav.on {
	height: fit-content;
}
nav p {
	font-family: links;
	font-size: 0.8rem;
	margin: 0;
	color: rgba(0,0,0,1);
	display: inline;
	line-height: 60px;
	overflow: hidden;
	transition: 0.2s all ease-in-out 0.1s;
}
header.fix nav p {
	line-height: 60px;
	color: rgba(255,255,255,1);
	transition: 0.2s all ease-in-out 0s;
}
nav a {
  position: relative;
  text-decoration: none;
  margin: 0px 10px;
  display: inline-block;
  height: 100%;
  
  &::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: calc(50% - 0.8rem);
    display: block;
    width: 0%;
    height: 2px;
    background-color: rgba(0,0,0,1);
    transition: width 200ms linear;
    
  }
  
  &:hover {
    &::before {
      width: 100%;
      left: 0;
      right: auto;
    }
  }
}

nav .nav-item {
  position: relative;
  text-decoration: none;
  margin: 0px 10px;
  display: inline-block;
  height: 100%;
  
  &::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: calc(50% - 0.8rem);
    display: block;
    width: 0%;
    height: 2px;
    background-color: rgba(0,0,0,1);
    transition: width 200ms linear;
    
  }
  
  &:hover {
	cursor: pointer;
    &::before {
      width: 100%;
      left: 0;
      right: auto;
    }
  }
}

header.fix .nav-item::before {
	background-color: rgba(255,255,255,1);
}

@media (max-width: 700px) {
header.fix nav.on, nav {
	position: fixed;
	box-sizing: border-box;
	padding-top: 100px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
	top: -150vh;
	left: 50%;
	transform: translateX(-50%);
	height: 100vh;
	width: 100vw;
	background-color: rgba(0,0,0,1);
	transition: 0.7s all cubic-bezier(.43,.19,.09,1);
}
header.fix nav.on, nav.on {
	top: -10px;
}
nav p {
	font-family: links;
	font-size: 5vh;
	font-weight: bold;
	color: rgba(255,255,255,1);
	display: inline;
	line-height: 5vh;
	text-transform: uppercase;
	overflow: hidden;
	transition: 0.3s all ease-in-out;
}
header.fix nav p {
	line-height: 5vh;
}
nav a {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
  margin: 0px 10px;
  display: block;
  height: 40px;
  width: fit-content;
  
  &::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 5px;
    display: block;
    width: 0%;
    height: 1px;
    background-color: rgba(255,255,255,1);
    transition: width 200ms linear;
    
  }
  
  &:hover {
    &::before {
      width: 100%;
      left: 0;
      right: auto;
    }
  }
}
nav .nav-item {
  position: relative;
  text-decoration: none;
  margin: auto;
  display: block;
  height: 8vh;
  width: fit-content;
  
  &::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: calc(50% - 1.5vh);
    display: block;
    width: 0%;
    height: 2px;
    background-color: rgba(255,255,255,1);
    transition: width 200ms linear;
    
  }
  
  &:hover {
	cursor: pointer;
    &::before {
      width: 100%;
      left: 0;
      right: auto;
    }
  }
}

header.fix .nav-item::before {
	background-color: rgba(255,255,255,1);
}
}

/*==============================*/
/* GRID SYSTEM                  */
/* Containers and cols          */
/*==============================*/
.grid-container {
	position: relative;
	display: grid;
	padding: 0;
	margin: auto;
    width: var(--page-width);
	column-gap: 0px;
	row-gap: 0px;
	box-sizing: border-box;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	overflow: hidden;
}
.grid-container.cols-1 {grid-template-columns: auto;}
.grid-container.cols-2 {grid-template-columns: 50% auto;}
.grid-container.cols-3 {grid-template-columns: auto auto auto;}
.grid-container.cols-4 {grid-template-columns: auto auto auto auto;}
.grid-container.cols-5 {grid-template-columns: auto auto auto auto auto;}

@media (max-width: 900px) {
.grid-container.cols-1 {grid-template-columns: auto;}
.grid-container.cols-2 {grid-template-columns: auto;}
.grid-container.cols-3 {grid-template-columns: auto;}
.grid-container.cols-4 {grid-template-columns: auto auto;}
.grid-container.cols-5 {grid-template-columns: auto;}
}
@media (max-width: 600px) {
.grid-container.cols-1 {grid-template-columns: auto;}
.grid-container.cols-2 {grid-template-columns: auto;}
.grid-container.cols-3 {grid-template-columns: auto;}
.grid-container.cols-4 {grid-template-columns: auto;}
.grid-container.cols-5 {grid-template-columns: auto;}
}

.grid-item {
	position: relative;
	display: flex;
	flex-grow: 1;
	box-sizing: border-box;
	width: 100%;
	border-radius: 20px;
	background-color: rgba(255,255,255,0);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-clip: border-box;
	flex-direction: column;
}

.cols-1 .rowspan {grid-column-start: 1; grid-column-end: 2}
.cols-2 .rowspan {grid-column-start: 1; grid-column-end: 3}
.cols-3 .rowspan {grid-column-start: 1; grid-column-end: 4}
.cols-4 .rowspan {grid-column-start: 1; grid-column-end: 5}

@media (max-width: 900px) {
	.cols-2 .rowspan {grid-column-start: 1; grid-column-end: 3}
	.cols-3 .rowspan {grid-column-start: 1; grid-column-end: 3}
	.cols-4 .rowspan {grid-column-start: 1; grid-column-end: 3}
}
@media (max-width: 600px) {
	.cols-2 .rowspan {grid-column-start: 1; grid-column-end: 2}
	.cols-3 .rowspan {grid-column-start: 1; grid-column-end: 2}
	.cols-4 .rowspan {grid-column-start: 1; grid-column-end: 2}
}

.grid-item.s-1{grid-column-start: 1;}
.grid-item.s-2{grid-column-start: 2;}
.grid-item.s-3{grid-column-start: 3;}
.grid-item.e-2{grid-column-end: 3;}
.grid-item.e-3{grid-column-end: 4;}
.grid-item.e-4{grid-column-end: 5;}

@media (max-width: 900px) {
.grid-item.s-1{grid-column-start: 1;}
.grid-item.s-2{grid-column-start: 1;}
.grid-item.s-3{grid-column-start: 1;}
.grid-item.e-2{grid-column-end: 1;}
.grid-item.e-3{grid-column-end: 1;}
.grid-item.e-4{grid-column-end: 1;}
}

@media (max-width: 600px) {
.grid-item.s-1{grid-column-start: 1;}
.grid-item.s-2{grid-column-start: 1;}
.grid-item.s-3{grid-column-start: 1;}
.grid-item.e-2{grid-column-end: 1;}
.grid-item.e-3{grid-column-end: 1;}
.grid-item.e-4{grid-column-end: 1;}
}

.vw-100 {padding: 0 0;;}
.vw-90 {padding: 0 5vw;;}
.vw-80 {padding: 0 10vw;;}
.vw-70 {padding: 0 15vw;;}
.vw-60 {padding: 0 20vw;;}
.vw-50 {padding: 0 25vw;;}
.vw-40 {padding: 0 30vw;;}
.vw-30 {padding: 0 35vw;;}
.vw-20 {padding: 0 40vw;;}
.vw-10 {padding: 0 45vw;;}

.vh-100 {min-height: 100vh;}
.vh-90 {min-height: 90vh;}
.vh-80 {min-height: 80vh;}
.vh-70 {min-height: 70vh;}
.vh-60 {min-height: 60vh;}
.vh-50 {min-height: 50vh;}
.vh-40 {min-height: 40vh;}
.vh-30 {min-height: 30vh;}
.vh-20 {min-height: 20vh;}
.vh-10 {min-height: 10vh;}

.h-100 {min-height: 100%;}
.h-90 {min-height: 90%;}
.h-80 {min-height: 80%;}
.h-70 {min-height: 70%;}
.h-60 {min-height: 60%;}
.h-50 {min-height: 50%;}
.h-40 {min-height: 40%;}
.h-30 {min-height: 30%;}
.h-20 {min-height: 20%;}
.h-10 {min-height: 10%;}

.top-10 {margin-top: 10px;}
.top-20 {margin-top: 20px;}
.top-30 {margin-top: 30px;}
.top-40 {margin-top: 40px;}
.top-50 {margin-top: 50px;}
.top-60 {margin-top: 60px;}
.top-70 {margin-top: 70px;}
.top-80 {margin-top: 80px;}
.top-90 {margin-top: 90px;}
.top-100 {margin-top: 100px;}

.x-left {align-items: start;}
.x-centre {align-items: center;}
.x-right {align-items: end;}
.y-top {justify-content: start;}
.y-centre {justify-content: center;}
.y-end {justify-content: end;}

.x-gap {column-gap: 5vw;}
.y-gap {row-gap: 5vw;}

.p-1 {padding: 1vw;}
.p-2 {padding: 3vw;}
.p-3 {padding: 5vw;}

.pt-1 {padding-top: 1vw;}
.pt-2 {padding-top: 3vw;}
.pt-3 {padding-top: 5vw;}

.pb-1 {padding-bottom: 1vw;}
.pb-2 {padding-bottom: 3vw;}
.pb-3 {padding-bottom: 5vw;}

.pl-1 {padding-left: 1vw;}
.pl-2 {padding-left: 3vw;}
.pl-3 {padding-left: 5vw;}

.pr-1 {padding-right: 1vw;}
.pr-2 {padding-right: 3vw;}
.pr-3 {padding-right: 5vw;}

.m-1 {margin: 1vw;}
.m-2 {margin: 3vw;}
.m-3 {margin: 5vw;}

.x-offset {transform: translateX(-20%);}

.h-fit {height: fit-content;}

.filter.dark {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.4);
}

.bg-colour-bg {background-color: var(--background-1);}
.bg-colour-1 {background-color: var(--colour-1);}
.bg-colour-2 {background-color: var(--colour-2);}
.bg-colour-3 {background-color: var(--colour-3);}
.bg-colour-4 {background-color: var(--colour-4);}
.bg-colour-white {background-color: rgba(255,255,255,1);}


/*==============================*/
/* CUSTOM DIVS                  */
/* Specific to this site only   */
/*==============================*/

header .buttoncontainer {
	visibility: visible;
	display: block;
	position: fixed;
	padding: 0;
	right: 20px;
	top: 10px;
	height: 40px;
	width: fit-content;
}

header .button.fullmenu {
	float: left;
	padding: 0px 35px 0px 20px;
	margin-left: 5px;
	height: 40px;
	width: fit-content;
	border: 0px solid rgba(0,0,0,1);
	border-radius: 20px;
	background-color: rgba(212,0,170,1);
	transition: 0.2s all ease-in-out;
	font-family: links;
	font-size: 0.8rem;
	color: rgba(255,255,255,1);
	line-height: 40px;
	overflow: hidden;
	transition: 0.1s background-color ease-in-out 0s, 0.1s color ease-in-out 0s, 0.3s width cubic-bezier(.17,.67,.46,1) 0s, 0.3s padding cubic-bezier(.17,.67,.46,1) 0s;
	
	&:hover {
		cursor: pointer;
		background-color: rgba(0,0,0,1);
		padding: 0px 45px 0px 20px;
		color: rgba(255,255,255,1);
		transition: 0.3s padding cubic-bezier(.17,.67,.46,2);
	}
	&::after {
		content: "";
		position: relative;
		float: right;
		margin-right: -18px;
		top: 15px;
		height: 10px;
		width: 10px;
		background-image: url('../images/button-arrow.svg');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		transition: 0.3s transform cubic-bezier(.17,.67,.46,1), 0.3s margin-right cubic-bezier(.17,.67,.46,1);
	}
	&:hover::after {
		transform: rotate(-45deg);
		margin-right: -30px;
		transition: 0.3s transform cubic-bezier(.17,.67,.46,1), 0.3s margin-right cubic-bezier(.17,.67,.46,2);
	}
}

header.fix .button.fullmenu {
	border: 0px solid rgba(255,255,255,1);
	background-color: rgba(255,255,255,1);
	color: rgba(0,0,0,1);
	transition: 0.1s background-color ease-in-out 0.1s, 0.1s color ease-in-out 0.1s, 0.3s width cubic-bezier(.17,.67,.46,1) 0s, 0.3s padding cubic-bezier(.17,.67,.46,1) 0s;
	
	&:hover {
		background-color: rgba(255,255,255,1);
		color: rgba(0,0,0,1);
	}
	
	&::after {
		background-image: url('../images/button-arrow-invert.svg');
	}
}

@media (max-width: 700px) {
	header .buttoncontainer {
		visibility: hidden;
		display: none;
	}
}

header .button.mobilemenu {
	visibility: hidden;
	display: none;
	position: relative;
	padding: 0px 35px 0px 20px;
	right: 0;
	top: 0;
	height: 40px;
	width: fit-content;
	border: 0px solid rgba(255,255,255,1);
	border-radius: 20px;
	background-color: rgba(255,255,255,1);
	transition: 0.2s all ease-in-out;
	font-family: links;
	font-size: 0.8rem;
	color: rgba(0,0,0,1);
	line-height: 40px;
	overflow: hidden;
	transition: 0.1s background-color ease-in-out 0s, 0.1s color ease-in-out 0s, 0.3s width cubic-bezier(.17,.67,.46,1) 0s, 0.3s padding cubic-bezier(.17,.67,.46,1) 0s;
	
	&:hover {
		cursor: pointer;
		background-color: rgba(255,255,255,1);
		padding: 0px 45px 0px 20px;
		color: rgba(0,0,0,1);
		transition: 0.3s padding cubic-bezier(.17,.67,.46,2);
	}
	&::after {
		content: "";
		position: relative;
		float: right;
		margin-right: -18px;
		top: 15px;
		height: 10px;
		width: 10px;
		background-image: url('../images/button-arrow-invert.svg');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		transition: 0.3s transform cubic-bezier(.17,.67,.46,1), 0.3s margin-right cubic-bezier(.17,.67,.46,1);
	}
	&:hover::after {
		transform: rotate(-45deg);
		margin-right: -30px;
		transition: 0.3s transform cubic-bezier(.17,.67,.46,1), 0.3s margin-right cubic-bezier(.17,.67,.46,2);
	}
}

header.fix .button.mobilemenu {
	border: 0px solid rgba(255,255,255,1);
	background-color: rgba(255,255,255,1);
	color: rgba(0,0,0,1);
	transition: 0.1s background-color ease-in-out 0.1s, 0.1s color ease-in-out 0.1s, 0.3s width cubic-bezier(.17,.67,.46,1) 0s, 0.3s padding cubic-bezier(.17,.67,.46,1) 0s;
	
	&:hover {
		background-color: rgba(255,255,255,1);
		color: rgba(0,0,0,1);
	}
	
	&::after {
		background-image: url('../images/button-arrow-invert.svg');
	}
}

a.mobilemenu-a {
	display: none;
}
@media (max-width: 700px) {
	a.mobilemenu-a {
		display: block;
	}
}

@media (max-width: 700px) {
	header .button.mobilemenu {
		visibility: visible;
		display: block;
		margin: 2vh;
	}
	nav a {
		margin: auto;
		left: 0;
		transform: none;
		&::after {
			display: none;
		}
		&::before {
			display: none;
		}
		&:hover {
			
		}
	}
}









.bg-contain {
	background-repeat: no-repeat;
	background-size: contain;
}
.bg-center {
	background-repeat: no-repeat;
	background-position: center;
}

.custombutton {
	display: inline-block;
	padding: 0px 35px 0px 20px;
	height: 40px;
	width: fit-content;
	border: 1px solid rgba(0,0,0,1);
	border-radius: 20px;
	background-color: rgba(0,0,0,1);
	transition: 0.2s all ease-in-out;
	font-family: links;
	font-size: 0.8rem;
	color: rgba(255,255,255,1);
	line-height: 40px;
	overflow: hidden;
	transition: 0.3s all cubic-bezier(.17,.67,.46,1);
	
	&:hover {
		cursor: pointer;
		background-color: rgba(0,0,0,1);
	}
	&:hover {
		padding: 0px 45px 0px 20px;
		color: rgba(255,255,255,1);
		transition: 0.3s all cubic-bezier(.17,.67,.46,2);
	}
	&::after {
		content: "";
		position: relative;
		float: right;
		margin-right: -18px;
		top: 15px;
		height: 10px;
		width: 10px;
		background-image: url('../images/button-arrow.svg');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		transition: 0.3s transform cubic-bezier(.17,.67,.46,1), 0.3s margin-right cubic-bezier(.17,.67,.46,1);
	}
	&:hover::after {
		transform: rotate(-45deg);
		margin-right: -30px;
		transition: 0.3s transform cubic-bezier(.17,.67,.46,1), 0.3s margin-right cubic-bezier(.17,.67,.46,2);
	}
}

.submitbutton {
	display: inline-block;
	padding: 0px 20px 0px 20px;
	height: 40px;
	width: fit-content;
	border: 0px solid rgba(0,0,0,1);
	border-radius: 20px;
	background-color: rgba(212,0,170,1);
	transition: 0.2s all ease-in-out;
	font-family: links;
	font-size: 0.8rem;
	color: rgba(255,255,255,1);
	line-height: 40px;
	overflow: hidden;
	transition: 0.3s all cubic-bezier(.17,.67,.46,1);
	
	&:hover {
		cursor: pointer;
		background-color: rgba(0,0,0,1);
	}
	&:hover {
		padding: 0px 30px 0px 30px;
		color: rgba(255,255,255,1);
		transition: 0.3s all cubic-bezier(.17,.67,.46,2);
	}
}

.image-horizontal-slider {
	
}
.image-horizontal-slider .grid-item {
	background-size: 100% auto;
	background-repeat: repeat;
}

#mobile-design-container {
	animation-name: mobilecontainer;
	animation-duration: 15s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
@keyframes mobilecontainer {
	from {transform: rotate(-20deg) scale(0.9,0.9);}
	to {transform: rotate(-5deg) scale(1,1);}
}

#mobile-design {
	position: absolute;
	margin-left: 0px;
	top: 75px;
	height: calc(100% - 80px);
	width: auto;
	transform: rotate(10deg);
	-webkit-filter: drop-shadow(-5px 5px 5px rgba(0,0,0,0.5));
	filter: drop-shadow(-5px 5px 5px rgba(0,0,0,0.5));
	transition: 0.3s margin-left cubic-bezier(.17,.67,.46,1) 0s, 0.3s height ease-in-out 0s, 0.3s filter cubic-bezier(.17,.67,.46,1) 0s;
}

.jagged {
	border: none;
	--m: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/20px 51% repeat-x, conic-gradient(from 135deg at top   ,#0000,#000 1deg 89deg,#0000 90deg) top   /20px 51% repeat-x;
	-webkit-mask: var(--m);
    mask: var(--m);
}
.bubbles {
	background-color: rgba(217,81,48,1);
}

.slowmo {
	transition: 0.5s all ease-in-out;
}
.out {
	margin-top: -200px;
}
.pagefront {
	overflow: visible !important;
	
}
.pagefront h1 {
	font-size: 3rem;
	line-height: 3.2rem;
}

.gradient-1 {
	background-image: var(--gradient-1);
}
.bg-yellow-dots {
	background-image: radial-gradient(rgba(128,117,86,0.1) 20%, transparent 20%), radial-gradient(rgba(128,117,86,0.1) 20%, transparent 20%);
	background-color: rgba(255,255,255,1);
	background-position: 0 0, 5px 5px;
	background-size: 10px 10px;
	background-repeat: repeat;
}

.photo-card {
	position: relative;
	height: 50vh;
	width: 40vh;
	background-color: rgba(255,255,255,1);
	filter: drop-shadow(-3px 3px 3px rgba(0,0,0,0.5));
}
.photo-card-photo {
	position: absolute;
	top: 5%;
	left: 5%;
	height: 70%;
	width: 90%;
	background-color: rgba(0,0,0,1);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.photo-card-text {
	position: absolute;
	box-sizing: border-box;
	padding: 5%;
	bottom: 0;
	left: 0;
	height: 25%;
	width: 100%;
}
.photo-card-text p {
	font-size: 1.4rem;
	color: rgba(0,0,0,1);
	text-align: center;
}

.card {
	position: relative;
	height: 80vh;
	width: 60vh;
	border-radius: 20px;
	background-color: rgba(255,255,255,1);
	filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.1));
}
.card-text {
	position: absolute;
	box-sizing: border-box;
	padding: 5%;
	bottom: 0;
	left: 0;
	height: 25%;
	width: 100%;
}
.card-text p {
	font-size: 1.4rem;
	color: rgba(0,0,0,1);
	text-align: center;
}

.slidecontainer {
	margin: 30px 20vh;
	width: 80%;
	max-width: 500px;
}

.slider {
	-webkit-appearance: none;
	width: 100%;
	height: 25px;
	background: rgba(255,255,255,1);
	border-radius: 25px;
	outline: none;
	opacity: 1;
	-webkit-transition: .2s;
	transition: opacity .2s;
}

.slider:hover {
	opacity: 1;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 40px;
	height: 40px;
	border-radius: 40px;
	background: rgba(212,0,170,1);
	cursor: pointer;
}

.slider::-moz-range-thumb {
	width: 40px;
	height: 40px;
	border-radius: 40px;
	background: rgba(212,0,170,1);
	cursor: pointer;
}

table.features-table {
	
}
table.features-table td {
	padding: 10px;
	background-color: rgba(255,255,255,0.2);
}
table.features-table .odd td {
	background-color: rgba(255,255,255,0.3);
}

.languagemobile {
	visibility: hidden;
}
@media (max-width: 700px) {
	.languagemobile {
		visibility: visible;
		position: fixed;
		padding: 0;
		margin: 2vh;
		bottom: 5vh;
		height: 30px;
		width: 30px;
		border-radius: 30px;
		background-color: rgba(255,255,255,1);
		transition: 0.2s all ease-in-out;
		font-family: links;
		font-size: 0.8rem;
		color: rgba(0,0,0,1);
		line-height: 40px;
		overflow: hidden;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.languagemobile.en {
		right: 5vh;
	}
	.languagemobile.th {
		right: calc(7vh + 30px);
	}
}

.languagefull {
	visibility: visible;
	position: fixed;
	right: 20px;
	bottom: 20px;
	height: 30px;
	width: 30px;
	border-radius: 20px;
	background-color: rgba(0,0,0,1);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 999;
	&:hover {
		cursor: pointer;
	}
}
@media (max-width: 700px) {
	.languagefull {
		visibility: hidden;
		display: none;
	}
}

.languageitem {
	visibility: visible;
	position: fixed;
	right: 20px;
	bottom: 20px;
	height: 30px;
	width: 30px;
	border-radius: 20px;
	background-color: rgba(0,0,0,1);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	transition: 0.2s all cubic-bezier(.17,.67,.46,1);
	z-index: 99;
	
	&:hover {
		cursor: pointer;
	}
}
@media (max-width: 700px) {
	.languageitem {
		visibility: hidden;
		display: none;
	}
}
.languageitem.en.on {
	right: 100px;
	transition: 0.3s all cubic-bezier(.17,.67,.46,1.4);
}
.languageitem.th.on {
	right: 60px;
	transition: 0.3s all cubic-bezier(.17,.67,.46,1.4);
}

.clouds-top {
	background-size: contain;
	background-position: 0% 0%;
	min-height: 19vw;
}
.clouds-bottom {
	background-size: contain;
	background-position: 0% 100%;
	min-height: 19vw;
}
.clouds-top {
	background-size: contain;
	background-position: 0% 0%;
	min-height: 19vw;
}

@media (max-width: 900px) {
	.clouds-top {
		background-size: 150%;
		background-position: 50% 0%;
		min-height: 19vw;
	}
.clouds-bottom {
		background-size: 150%;
		background-position: 50% 100%;
		min-height: 19vw;
	}
}

@media (max-width: 600px) {
	.clouds-top {
		background-size: 200%;
		background-position: 50% 0%;
		min-height: 19vw;
	}
.clouds-bottom {
		background-size: 200%;
		background-position: 50% 100%;
		min-height: 19vw;
	}
}

label {
	display: block;
	margin-right: 10px;
}

select {
	font-family: standard;
	margin: 5px 0;
	height: 30px;
	width: 100%;
	background-color: rgba(255,255,255,1) !important;
}

input[type="text" i], input[type="password" i] {
	font-family: standard;
	margin: 5px 0;
	height: 30px;
	width: 100%;
	background-color: rgba(255,255,255,1) !important;
}

input[type="submit" i] {
	display: inline-block;
	padding: 0px 20px 0px 20px;
	height: 40px;
	width: fit-content;
	border: 0px solid rgba(0,0,0,1);
	border-radius: 20px;
	background-color: rgba(212,0,170,1);
	transition: 0.2s all ease-in-out;
	font-family: links;
	font-size: 0.8rem;
	color: rgba(255,255,255,1);
	line-height: 40px;
	overflow: hidden;
	transition: 0.3s all cubic-bezier(.17,.67,.46,1);
	
	&:hover {
		cursor: pointer;
		background-color: rgba(0,0,0,1);
	}
	&:hover {
		padding: 0px 30px 0px 30px;
		color: rgba(255,255,255,1);
		transition: 0.3s all cubic-bezier(.17,.67,.46,2);
	}
}

#process-image {
	visibility: visible;
	display: inline-block;
}
#process-vertical-image {
	visibility: hidden;
	display: none;
}
@media (max-width: 700px) {
	#process-image {
		visibility: hidden;
		display: none;
	}
	#process-vertical-image {
		visibility: visible;
		display: inline-block;
	}
}


.blog-image {
	position: relative;
	height: 250px;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.blog-text {
	position: relative;
	height: fit-content;
	width: 100%;
	padding: 10px 20px 30px 20px;
	background-color: var(--colour-3);
	box-sizing: border-box;
}

/*==============================*/
/* MY ACCOUNT STYLES            */
/*==============================*/

.accountbutton {
	display: inline-block;
	padding: 0px 35px 0px 20px;
	height: 40px;
	width: fit-content;
	border: 1px solid rgba(0,0,0,1);
	border-radius: 20px;
	background-color: rgba(0,0,0,1);
	transition: 0.2s all ease-in-out;
	font-family: links;
	font-size: 0.8rem;
	color: rgba(255,255,255,1);
	line-height: 40px;
	overflow: hidden;
	transition: 0.3s all cubic-bezier(.17,.67,.46,1);
	
	&:hover {
		cursor: pointer;
		background-color: rgba(0,0,0,1);
	}
	&:hover {
		color: rgba(255,255,255,1);
		transition: 0.3s all cubic-bezier(.17,.67,.46,2);
	}
	&::after {
		content: "";
		position: relative;
		float: right;
		margin-right: -18px;
		top: 15px;
		height: 10px;
		width: 10px;
		background-image: url('../images/button-arrow.svg');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		transition: 0.3s transform cubic-bezier(.17,.67,.46,1), 0.3s margin-right cubic-bezier(.17,.67,.46,1);
	}
	&:hover::after {
		transform: rotate(-45deg);
		transition: 0.3s transform cubic-bezier(.17,.67,.46,1), 0.3s margin-right cubic-bezier(.17,.67,.46,2);
	}
}

.account-wrapper {
	position: relative;
	height: 100%;
	width: 100%;
	padding: 10px 30px;
	border-radius: 10px;
	box-sizing: border-box;
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}
.grid-item.account {
	max-width: 900px;
	height: fit-content;
}