﻿/* -------------------------------------------------------------------------- *
 * ========================================================================== *
 * Mohunky Cornerstone v7
 * Site Colours
 * ========================================================================== *
 * -------------------------------------------------------------------------- *

/* ================= Colours ================== */
:root	{

	--colorPrimary:			#0082C4;
	--colorPrimary-light:	#7598F6;
	--colorPrimary-dark:		#003483;
	--colorPrimary-darker:	#00244C;
	

	--colorSecondary:			#e6007e;
	--colorSecondary-light: #ff1a97;
	--colorSecondary-dark:  #b30062;
	--colorSecondary-darker:#00244c;

	--colorTertiary:			hsl(100,46.4%,46.9%);
	--colorTertiary-light:	hsl(100,46.4%,56.9%);
	--colorTertiary-dark:	hsl(100,46.4%,36.9%);

	--colorOffBlack:			#2C2A2A;
	--colorOffBlack-light:	#333333;
	--colorOffBlack-dark:	#1B1B1B;

	--colorGrey:				#D0D0D2;
	--colorGrey-light:		#E7E8EB;
	--colorGrey-dark:			#707070;

	--colorOffWhite:			#F2F2F2;
	--colorOffWhite-light:  #f9f9f9;

	--colorWhite:				#ffffff;
	--colorBlack:				#000000;

	--colorErrorRed:			#ed000c;

	--trans66:			#00000066;
}

	:root .theme-BMAC {
		--colorPrimary: #f0b200;
		
		--colorSecondary: #001e5e;
		--colorSecondary-light:#0081c3;

		--colorGrey: #7e7e7e;
		
		--colorGrey-light: #e4e4e4;
	}

/* ----- Background Colours ----- */
.bg-primary				{   background-color:var(--colorPrimary);   }
.bg-primary-light		{   background-color:var(--colorPrimary-light);   }
.bg-primary-dark		{   background-color:var(--colorPrimary-dark);   }

.bg-secondary			{   background-color:var(--colorSecondary);   }
.bg-secondary-light	{   background-color:var(--colorSecondary-light);   }
.bg-secondary-dark	{   background-color:var(--colorSecondary-dark);   }

.bg-tertiary			{   background-color:var(--colorTertiary);   }
.bg-tertiary-light	{   background-color:var(--colorTertiary-light);   }
.bg-tertiary-dark		{   background-color:var(--colorTertiary-dark);   }

.bg-grey					{   background-color:var(--colorGrey);   }
.bg-grey-light			{   background-color:var(--colorGrey-light);   }
.bg-grey-dark			{   background-color:var(--colorGrey-dark);   }

.bg-offBlack			{   background-color:var(--colorOffBlack);   }
.bg-offBlack-light	{   background-color:var(--colorOffBlack-light);   }
.bg-offBlack-dark		{   background-color:var(--colorOffBlack-dark);   }

.bg-offWhite			{   background-color:var(--colorOffWhite);   }
.bg-offWhite-dark		{   background-color:var(--colorOffWhite-dark);   }

.bg-white				{   background-color:var(--colorWhite);   }

/* ----- Text Colours ----- */
.txt-primary			{   color:var(--colorPrimary);   }
.txt-primary-light	{   color:var(--colorPrimary-light);   }
.txt-primary-dark		{   color:var(--colorPrimary-dark);   }

.txt-secondary			{   color:var(--colorSecondary);   }
.txt-secondary-light	{   color:var(--colorSecondary-light);   }
.txt-secondary-dark	{   color:var(--colorSecondary-dark);   }

.txt-tertiary			{   color:var(--colorTertiary);   }
.txt-tertiary-light	{   color:var(--colorTertiary-light);   }
.txt-tertiary-dark	{   color:var(--colorTertiary-dark);   }

.txt-grey				{   color:var(--colorGrey);   }
.txt-grey-light		{   color:var(--colorGrey-light);   }
.txt-grey-dark			{   color:var(--colorGrey-dark);   }

.txt-offBlack			{   color:var(--colorOffBlack);   }
.txt-offBlack-light	{   color:var(--colorOffBlack-light);   }
.txt-offBlack-dark	{   color:var(--colorOffBlack-dark);   }

.txt-offWhite			{   color:var(--colorOffWhite);   }
.txt-offWhite-dark	{   color:var(--colorOffWhite-dark);   }

.txt-white				{   color:var(--colorWhite);   }
.txt-black {
	color: var(--colorBlack);
}
.txt-white a,
.txt-white a:visited	{   color:var(--colorWhite); border-bottom-color:var(--colorWhite);   }

.txt-errorRed			{   color:var(--colorErrorRed);   }

/* ----- SVG Fill Colours ----- */
.fill-primary			{   fill:var(--colorPrimary);   }
.fill-primary-light	{   fill:var(--colorPrimary-light);   }
.fill-primary-dark	{   fill:var(--colorPrimary-dark);   }

.fill-secondary		{   fill:var(--colorSecondary);   }
.fill-secondary-light{   fill:var(--colorSecondary-light);   }
.fill-secondary-dark	{   fill:var(--colorSecondary-dark);   }

.fill-tertiary			{   fill:var(--colorTertiary);   }
.fill-tertiary-light	{   fill:var(--colorTertiary-light);   }
.fill-tertiary-dark	{   fill:var(--colorTertiary-dark);   }

.fill-grey				{   fill:var(--colorGrey);   }
.fill-grey-light		{   fill:var(--colorGrey-light);   }
.fill-grey-dark		{   fill:var(--colorGrey-dark);   }

.fill-offBlack			{   fill:var(--colorOffBlack);   }
.fill-offBlack-light	{   fill:var(--colorOffBlack-light);   }

.fill-offWhite			{   fill:var(--colorOffWhite);   }
.fill-offWhite-dark	{   fill:var(--colorOffWhite-dark);   }

.fill-white				{   fill:var(--colorWhite);   }

/* -------------------------------------------------------------------------- *
 * Responsive variants
 * -------------------------------------------------------------------------- */
@media only screen and (max-width: 1400px) {
	/* ---------------------------------------- *
	 * Laptop Large / .ll- / 12 columns
	 * ---------------------------------------- */
	
}
@media only screen and (max-width: 1200px) {
	/* ---------------------------------------- *
	 * Laptop Small / .ls- / 12 columns
	 * ---------------------------------------- */
	
}
@media only screen and (max-width: 1000px) {
	/* ---------------------------------------- *
	 * Tablet Large / .tl- / 8 columns
	 * ---------------------------------------- */
}
@media only screen and (max-width: 800px) {
	/* ---------------------------------------- *
	 * Tablet Small / .ts- / 6 columns
	 * ---------------------------------------- */
	.-ts-bg-offWhite			{   background-color:var(--colorOffWhite);   }

}
@media only screen and (max-width: 600px) {
	/* ---------------------------------------- *
	 * Mobile Large / .ml- / 4 columns
	 * ---------------------------------------- */

}
@media only screen and (max-width: 400px) {
	/* ---------------------------------------- *
	 * Mobile Small / .ms- / 2 columns
	 * ---------------------------------------- */
	
}