@charset "utf-8";






/*----------------------------------------------------------------------------------*/
/* Root Vars 																		*/
/*----------------------------------------------------------------------------------*/
:root 
{
	/* 
			purple: #8050bf
			dark: #0c0c0c
			dark grey: 212322
	*/
	
	
	/* Background Colours */
	--baseBGWhite: #e0e0e0;
	--headerBG: #212322;
	--headerBGDark: #212322;
	--defaultBGLight: #d4d4d4;
	--defaultBGDark: #212322;
	--defaultBGBlue: #1475bb;
	--boxBGGreen: #9ed8a3;
	--boxBGRed: tomato;
	--boxBGLight: #f7f7f7;
	--boxBGGrey: #dedfdf;
	--boxBGDark: #000000;

	
	
	
	
	
	/* Interface Colours */
	--defaultWhiteText: #ffffff;
	--defaultLightText: #ffffff;
	--defaultDarkText: #0c0c0c;
	--linkBlueText: #1980ff;
	
	--defaultHR: #acadad;
	--defaultHRDark: #212322;
	--defaultHRLight: #d4d4d4;
	
	--btnBlueBG: #1980ff;
	--btnGreenBG: #32a84a;
	--btnRedBG: tomato;
	--btnBlueText: #ffffff;
	
	
	
	
	
	/* Global Sizes */
	--topBarHeightWeb: 70px;
	--topBarHeightMobile: 70px;
	--topBarBtnWidthWeb: 70px;
	--topBarBtnWidthMobile: 70px;
	
	
	
	
}




/*----------------------------------------------------------------------------------*/
/* Base 																			*/
/*----------------------------------------------------------------------------------*/
html 
{
    height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	background-color: var(--baseBGWhite);
}


body
{	
	margin: 0px 0px 0px 0px;
	padding: 0px;	
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	background-color: var(--baseBGWhite);
	font-family: "source-sans-pro", Arial, "sans-serif";
}


h1, h2, h3, h4, p
{
	font-family: "source-sans-pro", Arial, "sans-serif";
	font-weight: normal;	
}



/*----------------------------------------------------------------------------------*/
/* Site Header																		*/
/*----------------------------------------------------------------------------------*/
.header
{
	width: 100%;
	height: var(--topBarHeightMobile);
	position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
	background-color: var(--headerBG);
}


.header .logo
{
	width: calc(805px / 5);
	height: calc(224px / 5);
	float: left;
	margin: 15px 10px 10px 10px;
}


.header .logo img
{
	width: 100%;
	float: left;
}




.header .header_icon 
{
	width: var(--topBarBtnWidthMobile);
	height: var(--topBarHeightMobile);
	float: right; 
  	display: flex;
  	flex-direction: column;
  	justify-content: center;
  	align-items: center;
  	flex: 1;
}




.header .header_icon i
{
	width: var(--topBarBtnWidthMobile);
	height: var(--topBarHeightMobile);
	margin: 0px;
	padding: 0px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	font-size: 24px;
}




.header .togglemenu 
{
	width: var(--topBarBtnWidthMobile);
	height: var(--topBarHeightMobile);
	float: right; 
  	display: flex;
  	flex-direction: column;
  	justify-content: center;
  	align-items: center;
  	flex: 1;
}

.header .togglemenu > div 
{
	width: var(--topBarBtnWidthMobile);
	height: var(--topBarHeightMobile);
	margin: 0px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	
}

.header .togglemenu > div:hover, .header .togglemenu > div:focus 
{
	outline: none;
}

.header .togglemenuitem 
{
	flex-direction: column;
}

.header .togglemenuitem .line 
{
	height: 4px;
	width: calc(var(--topBarBtnWidthMobile) / 2);
	background: #ffffff;
	margin: 3px auto;
}


.header .togglemenuitem .line:nth-child(2) 
{
	width: calc(var(--topBarBtnWidthMobile) / 3);
}







/*----------------------------------------------------------------------------------*/
/* Main Wrappers																	*/
/*----------------------------------------------------------------------------------*/
.wrapper
{
	display: flex;
	width: 100%;	
	max-width: 100%;
	float: left;	
	overflow-x: hidden;
	margin: 0px 0px 0px 0px;
}

.wrapper_bare
{
	width: 100%;	
	float: left;	
	margin: 0px 0px 0px 0px;
}



.wrapper .centered-nosidebar
{
	width: calc(100%); 
	max-width: 1200px;
	margin: var(--topBarHeightMobile) auto 0px auto;
  	min-height: 100vh;
	float: left;
}



.wrapper .centered-nosidebar-narrow
{
	width: calc(100%); 
	max-width: 900px;
	margin: var(--topBarHeightMobile) auto 0px auto;
  	min-height: 100vh;
	float: left;
}


.wrapper .centered-nosidebar .content
{
	width: calc(100%); 
	margin: 0px 0px 0px 0px;
	float: left;
}






/*----------------------------------------------------------------------------------*/
/* Notice and Warning Boxes															*/
/*----------------------------------------------------------------------------------*/
.notice, .warning 
{
	width: calc(100%);
	float: left;
	margin: 0px 0px 0px 0px;
	color: var(--defaultDarkText);
}

.notice 
{
	background-color: var(--boxBGGreen);
}

.warning 
{
	background-color: var(--boxBGRed);
}


.notice h1, .warning h1
{
	width: calc(100% - 20px);
	float: left;
	margin: 10px 10px 0px 10px;
	padding: 0px 0px 0px 0px;
	font-size: 22px;
	line-height: 22px;
	font-weight: 700;
}


.notice p, .warning p
{
	width: calc(100% - 20px);
	float: left;
	margin: 5px 10px 10px 10px;
	padding: 0px 0px 0px 0px;
	font-size: 18px;
	line-height: 20px;
}





/*----------------------------------------------------------------------------------*/
/* Breadcrumb 																		*/
/*----------------------------------------------------------------------------------*/
.breadcrumb {
	width: calc(100% - 20px);
	float: left;
	margin: 20px 0px 20px 0px;
	padding: 10px 0px 10px 0px;
	//background-color: #f7f7f7;
	//border-radius: 5px;
}


.breadcrumb i {
	float: left;
	color: #a3a3a3;
	margin: 7px 10px 0px 10px;
}

.breadcrumb a {
	float: left;
	background-color: #f7f7f7;
	color: #000000;
	text-decoration: none;
	border-radius: 5px;
	margin: 0px 0px 0px 0px;
	padding: 5px 10px 5px 10px;
}


/*----------------------------------------------------------------------------------*/
/* Split Layout Breakpoints For Large Screens										*/
/* 48em = 768px, 62em = 992px                                                       */
/* Breaking mobile after common vertical tablets ~62em                              */
/*----------------------------------------------------------------------------------*/
@media (min-width: 62em) 
{
	.header
	{
		width: 100%;
		height: var(--topBarHeightWeb);
	}
	
	.header .logo
	{
		width: calc(805px / 5);
		height: calc(224px / 5);
		margin: 12px 10px 10px 10px;
	}
	
	
	
	
	.notice h1, .warning h1
	{
		font-size: 22px;
	}


	.notice p, .warning p
	{
		font-size: 16px;
	}
	
}