:root {
  --colour-light: rgba(247,246,237,1);
  --colour-medium: rgba(99,119,108,1);
  --colour-dark: rgba(50,50,50,1);
  --colour-secondary: rgba(214,177,96,1);
  
  --text-light: rgba(255,255,255,1);
  --text-dark: rgba(40,40,40,1);
  --text-coloured: rgba(150,150,150,1);
  
  --page-width: 95vw;
}

@font-face {
	font-family: standard;
	font-style: normal;
	src: url('../fonts/AbhayaLibre-Regular.ttf');
}
@font-face {
	font-family: display;
	font-style: normal;
	src: url('../fonts/AbhayaLibre-Regular.ttf');
}
@font-face {
	font-family: titles;
	font-style: normal;
	src: url('../fonts/AbhayaLibre-Regular.ttf');
}
@font-face {
	font-family: standard-medium;
	font-style: normal;
	src: url('../fonts/AbhayaLibre-Regular.ttf');
}

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

body {
	margin: 0;
	background-color: var(--colour-light);
	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;
}
h1, h2, h3, h4, h5, h6 {
	font-family: titles;
	color: var(--text-dark);
	font-weight: normal;
}

h1 {font-size: 2.2rem;}
h2 {font-size: 2.0rem;}
h3 {font-size: 1.8rem;}
h4 {font-size: 1.6rem;}
h5 {font-size: 1.4rem;}
h6 {font-size: 1rem;}
p {font-size: 1rem;}

/*==============================*/
/* Header and logo              */
/*==============================*/
header {
	position: fixed;
	padding: 0px 20px;
	box-sizing: border-box;
	top: 0px;
	height: 100px;
	width: 100%;
	background-color: rgba(49,69,58,1);
	transition: 0.3s all ease-in-out;
	z-index: 99999;
}
header.fix {
	height: 60px;
	background-color: rgba(40,55,72,1);
}
.top-margin {
	margin-top: 100px !important;
}
.logo {
	position: relative;
	float: left;
	left: 0px;
	top: 5px;
	height: 90px;
	width: 81px;
	border: 0px solid var(--primary-1);
	border-radius: 0px;
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 99999;
	transition: 0.3s all ease-in-out;
}
header.fix .logo {
	top: 5px;
	height: 50px;
	width: 134px;
}
.menu-button {
	position: relative;
	display: none;
	float: right;
	top: 30px;
	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(230,190,97,1);
	transition: 0.3s all ease-in-out;
}
.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.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: 100px;
	width: fit-content;
}
header.fix nav {
	height: 60px;
}
header.fix nav.on {
	height: fit-content;
}
nav p {
	font-family: display;
	font-size: 0.9rem;
	color: rgba(230,190,97,1);
	display: inline;
	line-height: 100px;
	text-transform: uppercase;
	overflow: hidden;
	transition: 0.3s all ease-in-out;
}
header.fix nav p {
	line-height: 60px;
}
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: 1px;
    background-color: rgba(230,190,97,1);
    transition: width 200ms linear;
    
  }
  
  &:hover {
    &::before {
      width: 100%;
      left: 0;
      right: auto;
    }
  }
}

@media (max-width: 700px) {
nav {
	position: fixed;
	padding-top: 100px;
	padding-bottom: 20px;
	top: -100vh;
	left: 50%;
	transform: translateX(-50%);
	height: fit-content;
	width: 100vw;
	background-color: rgba(49,69,58,1);
	transition: 0.7s all cubic-bezier(.43,.19,.09,1);
}
nav.on {
	top: 0;
}
nav p {
	font-family: display;
	font-size: 0.9rem;
	color: rgba(230,190,97,1);
	display: inline;
	line-height: 40px;
	text-transform: uppercase;
	overflow: hidden;
	transition: 0.3s all ease-in-out;
}
header.fix nav p {
	line-height: 60px;
}
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(230,190,97,1);
    transition: width 200ms linear;
    
  }
  
  &:hover {
    &::before {
      width: 100%;
      left: 0;
      right: auto;
    }
  }
}
}

/*==============================*/
/* GRID SYSTEM                  */
/* Containers and cols          */
/*==============================*/
.grid-container {
	position: relative;
	display: grid;
	margin: auto;
    width: 100%;
	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: 33% 33% 33%;}

@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;}
}
@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-item {
	position: relative;
	display: flex;
	box-sizing: border-box;
	padding: 5vw;
	width: 100%;
	background-color: rgba(255,255,255,0);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-clip: border-box;
	flex-direction: column;
}

.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 {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%;}

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

.x-gap {column-gap: 10px; margin-left: 10px; margin-right: 10px;}
.y-gap {row-gap: 10px; margin-top: 10px; margin-bottom: 10px;}

.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);
}
.text-light p, .text-light h1, .text-light h2, .text-light h3, .text-light h4, .text-light h5, .text-light h6 {
	color: var(--text-light);
}
.text-dark p, .text-dark h1, .text-dark h2, .text-dark h3, .text-dark h4, .text-dark h5, .text-dark h6 {
	color: var(--text-dark);
}

.bg-light {background-color: var(--colour-light);}
.bg-medium {background-color: var(--colour-medium);}
.bg-dark {background-color: var(--colour-dark);}
.bg-secondary {background-color: var(--colour-secondary);}

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

header .button {
	position: fixed;
	padding: 0px 20px;
	right: 20px;
	top: 30px;
	height: 40px;
	width: fit-content;
	border: 1px solid rgba(230,190,97,1);
	background-color: rgba(230,190,97,0);
	transition: 0.3s all ease-in-out;
	
	&:hover {
		cursor: pointer;
		background-color: rgba(230,190,97,1);
	}
	&:hover p {
		color: rgba(30,40,60,1);
	}
}
header.fix .button {
	top: 10px;
}
@media (max-width: 900px) {
	header .button {
		right: 80px;
	}
}
header .button p {
	font-family: display;
	font-size: 0.8rem;
	color: rgba(230,190,97,1);
	display: inline;
	line-height: 40px;
	text-transform: uppercase;
	overflow: hidden;
	transition: 0.3s all ease-in-out;
}

footer p {
	margin: 0;
	color: rgba(255,255,255,1);
}

.custombutton {
	font-family: standard;
	font-size: 0.8rem;
	text-transform: uppercase;
	line-height: 50px;
	padding: 10px 20px;
	color: rgba(255,255,255,1);
	border: 1px solid rgba(255,255,255,1);
	transition: 0.4s all ease-in-out;
}
.custombutton:hover {
	cursor: pointer;
	color: rgba(0,0,0,1);
	background-color: rgba(255,255,255,1);
}
.custombutton.dark {
	color: rgba(0,0,0,1);
	border: 1px solid rgba(0,0,0,1);
}
.custombutton.dark:hover {
	color: rgba(255,255,255,1);
	background-color: rgba(0,0,0,1);
}

.divider {
	position: relative;
	height: 1px;
	width: 25%;
	min-width: 100px;
	margin: 0 auto 15px auto;
	background-color: rgba(0,0,0,0.4);
}

/*==============================*/
/* CARDS                        */
/*                              */
/*==============================*/
.card-wrapper {
	display: block;
	width: 100%;
	min-height: 200px;
}
.card-image {
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	height: 150px;
	width: 150px;
	border: 8px solid rgba(255,255,255,1);
	border-radius: 50%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.card-content {
	display: block;
	padding: 120px 40px 20px 40px;
	height: 80%;
	border-radius: 10px;
	background-color: rgba(255,255,255,1);
}