/*	======================================================================================================================================================================================
	Variables 
	====================================================================================================================================================================================== */	
:root
{
	/* Colours */
	--primary:				#F52818;
	--secondary:			#0C0C0C;
	--fontcolour:			#737373;
	--smallfontcolour:		#606060;
	--navigation:			#FFFFFF;
	--white:				#FFFFFF;
	--black:				#000000;
	--light:				#FAFAFA;
	--lightrgba:			rgba(245,40,24,0.1);
	--dark:					#161616;
	--darkrgba:				rgba(22,22,22,0.9);
	--danger:				#ED1848;
	--success:				#4EB149;
	--bordercolour:			#F0F0F0;

	--width:				100%;		/* 1440px */
	--widthwide:			1600px;
	--widthnarrow:			1024px;		/* 768 */
	--widthsmall:			425px;
	--spacingcore:			20px;
	--spacing:				20px;
	--spacingtop:			78px;		/* required when menu is fixed */
	--margin:				0 0 20px 0;
	--imageratio:			56.25%;		/* 16:9 Aspect Ratio */
	--transition:			100ms ease;
	--border:				1px solid var(--bordercolour);
	--textshadow:			0 1px 1px var(--bordercolour);
	--boxshadow:			0 0 10px 0 #D0D0D0;
	--fontsize:				15px;
	--lineheight:			1.5;
	--smallfont:			calc(var(--fontsize) * 0.80);
	--borderradius:			10px;
}


/*	======================================================================================================================================================================================
	Fonts
	====================================================================================================================================================================================== */
@font-face
{
	font-family:			Avenir;
	src:					url("/upload/files/fonts/avenir-roman.ttf");
	font-style:				normal;
	font-weight:			400;
}

html, body, table, input, select, textarea, button
{
	font-family:			"Open Sans",sans-serif;
	font-size:				var(--fontsize);
	line-height:			var(--lineheight);
	color:					var(--fontcolour);
	/*-webkit-font-smoothing:	antialiased;
	-moz-osx-font-smoothing:grayscale;*/
}


/*	======================================================================================================================================================================================
	Input 
	====================================================================================================================================================================================== */
input,
select,
textarea
{
	background-color:		var(--light);
	border:					none;
	border-bottom:			2px solid var(--bordercolour);
	border-radius:			4px;
}

input:focus,
textarea:focus,
button:focus
{
 	background-color:		var(--bordercolour);
}

button:active
{
	position:				relative;
	bottom:					-1px;
	background-color:		var(--dark) !important;
    opacity:				0.5;
}

input[type="button"],
input[type="submit"],
input[type="reset"],
button[type="submit"],
button[type="button"]
{
	border:					none;
	border-radius:			4px;
    color:					var(--white);
	text-transform:			uppercase;
	background-color:		var(--primary);
	box-shadow:				var(--boxshadow);
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button[type="submit"]:hover,
button[type="button"]:hover
{
	/*background-color:		var(--dark);
	background-image:		linear-gradient(120deg, var(--secondary) 0%, var(--primary) 100%);*/
	box-shadow:				none;
}

/* Label Transition */
.labelcontainer label .title
{
	color:					#BABABA;
	top:					16px;
}


/*	======================================================================================================================================================================================
	Headers 
	====================================================================================================================================================================================== */
h1, h2, h3, h4, h5, h6
{
	-webkit-font-smoothing:	antialiased;
	-moz-osx-font-smoothing:grayscale;
}

h1, h2, h3, h4, h5, h6
{
	line-height:			1;
	margin:					calc(var(--spacing) / 2) 0;
}

h1, h1 a:link, h1 a:visited
{
	font-family:			"Bebas Neue",sans-serif;
	font-size:				calc(var(--fontsize) * 5);
	color:					var(--black);
/* 	font-weight:			700; */
	text-transform:			uppercase;
}

h2, h2 a:link, h2 a:visited
{
	font-family:			"Bebas Neue",sans-serif;
	font-size:				calc(var(--fontsize) * 3.8);
	color:					var(--black);
	font-weight:			400;
}

h3, h3 a:link, h3 a:visited
{
/* 	font-family:			"Bebas Neue",sans-serif; */
	font-size:				calc(var(--fontsize) * 1.6);
	color:					var(--dark);
	font-weight:			500;
	text-transform:			uppercase;
}

h4, h4 a:link, h4 a:visited
{
/* 	font-family:			"Bebas Neue",sans-serif; */
	font-size:				calc(var(--fontsize) * 1.2);
	color:					var(--darkrgba);
	font-weight:			500;
}

h5, h5 a:link, h5 a:visited		/* Modal Headings */
{
	font-size:				calc(var(--fontsize) * 1.5);
	color:					var(--dark);
	font-weight:			400;
	margin-bottom:			calc(var(--margin) / 2);
}

h6, h6 a:link, h6 a:visited		/* Cart Item Headings */
{
	font-size:				calc(var(--fontsize) * 1.1);
	color:					var(--dark);
	font-weight:			700;
	display:				inline-block;
}


/*	======================================================================================================================================================================================
	Canvas
	====================================================================================================================================================================================== */	        
.offcanvas
{
	height:					100%;
	position:				fixed;
	z-index:				4;
	transition:				var(--transition);
	padding:				var(--spacing);
	overflow-y:				scroll;
}

.offcanvas.top > div, 
.offcanvas.bottom > div
{
	max-width:				var(--widthsmall);
	
	/* Vertically Center */
	/*position:				relative;
	overflow:				auto;
	top:					50%;
    transform:				translateY(-50%);*/
}

.oncanvas
{
	padding-bottom:			calc(var(--spacingtop) * 2);
}

.offcanvas.left
{
	width:					280px;
	height:					100vh;
	/*height:					calc(100vh - var(--spacingtop));*/
	/*top:					var(--spacingtop);*/
	left:					-280px;
	background-color:		var(--dark);
}

.oncanvas.left
{
	left:					0;
}

.offcanvas.right
{
	width:					280px;
	height:					calc(100vh - var(--spacingtop));
	top:					var(--spacingtop);
	right:					-280px;
	background-color:		var(--white);
	border-left:			var(--border);
}

.oncanvas.right
{
	right:					0;
}

.offcanvas.top
{
	width:					100%;
	background-color:		var(--white);
	top:					-100vh;
}

.oncanvas.top
{
	top:					0;	/*var(--spacingtop);*/
}

.offcanvas.bottom
{
	width:					100%;
	background-color:		var(--white);
	bottom:					-100vh;
}

.oncanvas.bottom
{
	bottom:					0;	/*calc(var(--spacingtop) * -1);*/
}

/* Pop Up */
.offcanvas.popup
{
	background:					var(--lightrgba);
	text-align:					center;
}

.offcanvas.popup > div
{
    transform:					translate(0,50%);
}


/*	======================================================================================================================================================================================
	Framework
	====================================================================================================================================================================================== */
header
{
	width:					100vw;
	position:				relative;
	z-index:				3;
	background:				var(--dark);	
	/*backdrop-filter:		saturate(50%) blur(20px);*/	/* causing issues with Chrome */
}

header > .container
{
	width:					100%;
	max-width:				var(--width);
	padding:				calc(var(--spacingcore) / 2) var(--spacingcore);
	position:				relative;		
}

header > .container > .grid
{
	grid-template-columns:	auto 1fr;
	grid-gap:				0;
}

header > .container > .grid > div:nth-child(1)
{
	max-width:				100px;
}

header > .container > .grid > div:nth-child(2)
{
	display:				contents;
}

header > .container > .grid > div:nth-child(3)
{
	text-align:				right;
}

section
{
	width:					100vw;
}

section > .container
{
	width:					100%;
	max-width:				var(--width);
	padding:				var(--spacingcore);
}

.module
{
	width:					100%;
}

.module > .container
{
	width:					100%;
	max-width:				var(--width);
	padding:				var(--spacingcore);
}

footer
{
	width:					100vw;
	background:				var(--dark);
}

footer > .container
{
	width:					100%;
	max-width:				1280px;
	padding:				var(--spacingcore);
}


/*	======================================================================================================================================================================================
	Module
	====================================================================================================================================================================================== */
.module.testimonialmodule > .container > div,
.module.faqmodule > .container > div
{
	width:					100%;
	max-width:				1024px;
	display:				inline-block;
}


/*	======================================================================================================================================================================================
	Template
	====================================================================================================================================================================================== */
.sideform,
.sideformpartial
{
	width:					100%;
    max-width:				var(--width);
    padding:				var(--spacingcore);
}

.sideform section,
.sideformpartial section
{
	width:					unset;
}

.sideform section > .container,
.sideformpartial section > .container
{
	width:					unset;
	max-width:				unset;
	padding:				var(--spacingcore) 0;
}


/*	======================================================================================================================================================================================
	Grouping 
	====================================================================================================================================================================================== */
.flex
{
	display:				block;
}

.grid
{
	display:				grid;
	grid-gap: 				var(--spacing);
}

.grid > div
{
	margin:					initial;	/* so the div expands to 100% */
}

.two, .three, .four, .five, .six, .onethird, .onequarter, .onefifth, .twothirds, .threequarters, .fourfifths
{
	grid-template-columns:	1fr;
}


/*	======================================================================================================================================================================================
	Logo
	====================================================================================================================================================================================== */
header > .container > .grid > div:nth-of-type(1) > .logo,
header > .container > .grid > div:nth-of-type(1) > .logonegative
{
	height:					52px;
/* 	margin:					calc(var(--spacing) / 4) 0; */
	display:				none;	/* inline-block */
}

header > .container > .grid > div:nth-of-type(2) > .logo,
header > .container > .grid > div:nth-of-type(2) > .logonegative
{
	/*width:					100px;
	position:				absolute;
	top:					100px;
	left:					var(--spacingcore);*/
	
	height:					52px;
	display:				inline-block;
	z-index:				4;

	/* Centre */
	text-align:				center;
	position:				absolute; 
	left:					50%;
	margin-left:			-26px;
}

header > .container > .grid > div > .logo img,
header > .container > .grid > div > .logonegative img
{
	height:					-webkit-fill-available;
	vertical-align:			unset;
}

header > .container .grid .primary .logo
{
	width:					60px;
	display:				inline-block;
	margin:					calc(var(--spacing) / 1.5) 0;
}

footer > .container .logo
{
	width:					130px;
	display:				inline-block;
	margin-top:				var(--spacing);
}

.logosmall
{
	width:					100px;
}

.menulogo
{
	display:				inline-block;
}

.menulogo img
{
	height:					16px; 
	position:				relative; 
	top:					-1px;
}

.mekoologo
{
	width:					var(--smallfont);
	display:				inline;
    vertical-align:			inherit;
    margin-left:			calc(var(--spacing) / 2);
    opacity:				0.8;
}


/*	======================================================================================================================================================================================
	Navigation 
	====================================================================================================================================================================================== */
/* All */
nav ul
{
	padding:				0;
}
 
nav ul li
{
	display:				block;
}

nav ul li a
{
	font-family:			Avenir;
	display:				block;
	font-size:				calc(var(--fontsize) * 0.9);
	padding:				calc(var(--spacing) / 1.25) 0;	/* same as line-height */
}

nav ul ul	/* sub menu */
{
	padding:				0 var(--spacing);
}

/* Primary */
nav.primary
{
	display:				inline-block;
	vertical-align:			bottom;
}

nav.primary ul ul	/* sub menu */
{
	display:				none;
	line-height:			1.5;
}

nav.primary ul li:hover > ul	/* sub menu */
{
	display:				block;
}

/* Secondary */
nav.secondary ul ul	/* sub menu */
{
	display:				block;
}

/* Links */
nav.primary a:link, 
nav.primary a:visited
{
	color:					var(--navigation);
	transition:				var(--transition);
	/* font-weight:			300; */
}

nav.primary a:hover 
{
	color:					var(--primary);
}

nav.secondary a:link, 
nav.secondary a:visited
{
	color:					var(--fontcolour);
	text-decoration:		none;
}

nav.secondary a:hover 
{
	color:					var(--primary);
}

nav.primary .current a, 
nav.primary li:hover > a	/* active link */
{
	color:					var(--primary);
/* 	border-bottom:			3px solid var(--primary); */
}

nav.secondary .current a, 
nav.secondary li:hover > a	/* active link */
{
	color:					var(--primary);
/* 	border-bottom:			2px solid var(--primary); */
}

/* Hamburger */
.primarybutton
{
	display:				inline-block;
    vertical-align:			bottom;
    padding:				calc(var(--spacing) / 1.5) 0;
    margin-right:			var(--spacing);
	cursor:					pointer;
}

.secondarybutton
{
	position:				fixed;
	top:					50%;
	right:					0;
	padding:				calc(var(--spacing) / 1.5);
	transform:				translateY(-50%);
	cursor:					pointer;
	text-align:				center;
	line-height:			1;
	z-index:				1;
	background-color:		var(--white);
	box-shadow:				-5px 0px 10px 0 var(--bordercolour);
	border-top-left-radius:		var(--borderradius);
	border-bottom-left-radius:	var(--borderradius);
}

.menubar1, 
.menubar2, 
.menubar3
{
    width:					22px;
    height:					2px;
    margin:					5px 0;
    transition:				var(--transition);
}

.menubar1, 
.menubar2, 
.menubar3
{
    background-color:		var(--light);	/* hamburger colour */
}

/*.menubar2
{
	opacity:				0;
}*/

.menubuttonchange .menubar1
{
    -webkit-transform:		rotate(90deg) translate(6px,1px);
    transform:				rotate(90deg) translate(6px,1px);
}

/*.menubuttonchange .menubar2
{
	opacity:				0;
}*/

.menubuttonchange .menubar3
{
    -webkit-transform:		rotate(90deg) translate(-8px,11px);
	transform:				rotate(90deg) translate(-8px,11px);
}


/*	======================================================================================================================================================================================
	Search 
	====================================================================================================================================================================================== */
.keyword
{
	width:					100%;
	max-width:				var(--widthsmall);
	position:				absolute;
	top:					var(--spacingtop);	/* required when the .header is fixed */
	right:					0;
	margin:					0;
	border-radius:			unset;
	padding-left:			var(--spacingcore) !important;
    padding-right:			var(--spacingcore) !important;
}


/*	======================================================================================================================================================================================
	Light Gallery
	====================================================================================================================================================================================== */
.lg-backdrop
{
	background:				var(--darkrgba) !important;
}

.lg-outer .lg-thumb-item
{
	border-radius: 			0 !important;
	border:					0 !important;
}

.lg-outer .lg-thumb-outer
{
	background:				none !important;  
}

.lg-sub-html
{
	background:				none !important;  
}

.image
{
	cursor:					pointer;
}


/*	======================================================================================================================================================================================
	Light Slider
	====================================================================================================================================================================================== */
/* Slider */
/*.slider .lightSlider
{
	height:					600px !important;
}

.slider img
{
	max-width:				unset;
	margin-left:			50%;
    transform:				translateX(-50%);
}*/

.slider section.caption
{
	position:				absolute;
/* 	bottom:					0; */
	/* background:				var(--darkrgba); */
	top:					50%;
	transform:				translateY(-50%);
}

/*.slider section.caption > .container
{
	text-align:				left;
}*/

/*.slider section.caption div
{
	font-size:				calc(var(--fontsize) * 1.5);
	font-weight:			400;
	color:					var(--white);
	line-height:			1;
}*/

/* Carousel */
.carousel 	
{
	max-width:				calc(100vw - calc(var(--spacingcore) * 2));
}

.lSSlideWrapper .lSFade > *
{
    z-index:				2 !important;
}

.carousel > .lSSlideOuter > .lSSlideWrapper .lSFade > *.active
{
    z-index:				1 !important;	/* required when 'mode' fade so that active element is above others */
}

/* Thumbnails */
.carousel > .lSSlideOuter > .lSPager.lSGallery
{
	margin:					var(--spacing) auto !important;
}

/*.lSSlideOuter .lSPager.lSGallery img
{
	max-height:				100px;
}*/

/* Both */
.lightSlider > li
{
	position:				relative;	/* so the caption is aligned relative to this */
	text-align:				center;
}

.lightSlider img
{
	object-fit:				cover;
	display:				block;
}

/* Left / Right Controls */
.lSAction > a
{
	background:				none !important;	/* hide the original controls */
	z-index:				2 !important;
}

.lSPrev
{
	left:					5% !important;
}

.lSNext
{
	right:					5% !important;
	text-align:				right;
}

/* Pager */
.lSSlideOuter .lSPager.lSpg > li:hover a, 
.lSSlideOuter .lSPager.lSpg > li.active a
{
    background-color:		var(--primary) !important;
	opacity:				0.5;
}

.lSSlideOuter .lSPager.lSpg
{
	margin-top:				0 !important;
}

.lSSlideOuter .lSPager.lSGallery li.active, 
.lSSlideOuter .lSPager.lSGallery li:hover
{
	border-radius:			0 !important;
}


/*	======================================================================================================================================================================================
	Light Gallery
	====================================================================================================================================================================================== */
/*#lightbox
{
	list-style-type:		none;
	padding:				0;
}

#lightbox li
{
	display:				inline-block;
}*/

.lightbox img
{
	overflow:				hidden;
	transition:				var(--transition);
}

.lightbox img:hover
{
	box-shadow:				var(--boxshadow);
	transform:				scale(1.03);
}


/*	======================================================================================================================================================================================
	Magnify
	====================================================================================================================================================================================== */
/*.magnify
{
	position:				relative;
}*/

.magnifier
{
	position:				absolute;
	box-shadow:				var(--boxshadow);
	display:				none;
	cursor:					none;
	width:					150px;
	height:					150px;
}


/*	======================================================================================================================================================================================
	Fancytree 
	====================================================================================================================================================================================== */
#tree
{
	overflow-x:				scroll;
	margin-bottom:			calc(var(--spacing) * 2);
}

#tree ul.fancytree-container
{
    font-family:			unset;
    font-size:				unset;
    margin:					unset;
    background-color:		unset;
    border:					unset;
    min-height:				unset;
    padding:				unset;
    white-space:			nowrap;
    position:				relative;
    outline:				0;
}

#tree > ul > li
{
	border-bottom:			var(--border);
	padding:				calc(var(--spacing) / 4) 0;
}

#tree ul.fancytree-container ul
{
	padding:				0;
	font-size:				var(--smallfont);
}

#tree span.fancytree-title
{
	color:					var(--fontcolour);
	padding:				calc(var(--spacing) / 8);
	margin:					0 10px;
}

#tree span.fancytree-node:hover > span.fancytree-title
{
	color:					var(--primary);
}

#tree .fancytree-plain span.fancytree-title
{
	border:					unset;
	background-color:		unset;
}

#tree .fancytree-plain span.fancytree-active span.fancytree-title, 
#tree .fancytree-plain span.fancytree-selected span.fancytree-title
{
	color:					var(--primary);
}

#tree .fancytree-plain span.fancytree-active,
#tree .fancytree-plain span.fancytree-selected
{
	background-color:		var(--light);
}

#tree #fancytree-drop-marker, 
#tree span.fancytree-checkbox, 
#tree span.fancytree-drag-helper-img, 
#tree span.fancytree-empty, 
#tree span.fancytree-expander, 
#tree span.fancytree-icon, 
#tree span.fancytree-vline
{
	background-image:		unset;
}


/*	======================================================================================================================================================================================
	Core
	====================================================================================================================================================================================== */
.controls
{
	z-index:				3;
}

.controls > div
{
	display:				inline-block;
	text-align:				initial;
}

.controls > .call > .number
{
	color:					var(--white);
	display:				none;
}

.overlay
{
    background:				var(--dark);
    opacity:				0.7;
    display:				none;
    width:					100%;
    height:					100%;
    position:				fixed;
    z-index:				2;
    top:					0;
    left:					0;
}

.hero
{
	z-index:				1;
	border-bottom:			var(--border);
}

.hero > .container
{
	padding:				0;
	max-width:				none;
}

.contact > .container > div,
.mailing > .container > div
{
	width:					100%;
	max-width:				var(--widthsmall);
	display:				inline-block;
}

.contact h2,
.mailing h2
{
	display:				inline;
}

footer .children
{
	display:				none;
	margin-bottom:			var(--spacing);
}

footer.signoff
{
	background:				var(--secondary);
}

footer table
{
	width:					100%;
    font-size:				inherit;
    color:					inherit;
}

footer table tr td:first-child
{
	width:					30px;
	vertical-align:			top;
}

/* Contact */
.contactform
{
	width:					100%;
	max-width:				var(--widthsmall);
	display:				inline-block;
	vertical-align:			top;
}

.contactdetails	
{
	text-align:				center;
}

/*.contactdetails table
{
	width:					100%;
	border-collapse:		initial;
	border-spacing:			0 var(--spacing);
}

.contactdetails table td
{
	vertical-align:			top;
}*/

.social
{
	font-size:				20px;	/* font awesome */
	height:					20px;	/* files */
	margin-right:			calc(var(--spacing) / 1.5);
}

.generate
{
	margin:					0 0 var(--spacing) calc(var(--spacing) / 2);
	font-size:				var(--smallfont);
}

.sitemessage
{
	padding:				calc(var(--spacing) / 2) var(--spacing);
	text-align:				center; 
	border-bottom:			var(--border);
}

.report
{
	display:				none;
	word-wrap:				break-word; 
	overflow:				hidden;
	margin-bottom:			calc(var(--spacing) / 2);
	cursor:					pointer;
}

.error
{
	color:					var(--danger) !important;
	border:					2px solid var(--danger) !important;
}

.true
{
	color:					var(--success) !important;
}

.disabled
{
	opacity:				0.5;
}

.false
{
	color:					var(--danger) !important;
}

.complete
{
	padding:				var(--spacing); 
	background-color:		var(--light);
}

.searchresults
{
	margin-bottom:			calc(var(--spacing) * 2);
}

.searchresults .smallfont
{
	-webkit-filter:			grayscale(100%);
    filter:					grayscale(100%);
}

.smallfont
{
	font-size:				var(--smallfont);
	color:					var(--smallfontcolour);
}

.wide > .container
{
	max-width:				var(--widthwide);
}

.narrow > .container
{
	max-width:				var(--widthnarrow);
}

.centre
{
	text-align:				center;
}

.textshadow
{		
	text-shadow:			var(--textshadow);
}

.imageborder
{
	box-sizing:				border-box;	
	-webkit-box-sizing:		border-box;
	-moz-box-sizing:		border-box;
	border:					var(--border);
}

.borderradius
{
	border-radius:			var(--borderradius);
}

.shadow
{
	box-shadow:				var(--boxshadow);
}

.parallax
{
	position:				relative;
}

.negative
{
	filter:					invert(100%);
}

.emulatehref
{
	cursor:					pointer;
	color:					var(--primary);
}

.emulatehref:hover 
{
	color:					var(--fontcolour)
}

.unveil
{
	transition:				var(--transition);
}

.phonehide, 
.mobilehide
{
	display:				none !important;
}

.hidden
{
	display:				none;
}

.offline
{
	max-width:				var(--widthsmall); 
	padding:				var(--spacingcore);
	margin-top:				var(--spacing);
	text-align:				center; 
}

.noscroll
{
	overflow:				hidden;
}

.clearfix:after
{ 
   content:					" ";
   display:					block; 
   height:					0; 
   clear:					both;
}

.fb-like
{
	font-size:				unset; 
	top:					-2px; 
	line-height:			1;
	/*float:					right; 
	margin-top:				var(--spacing);*/
}

.fb_iframe_widget,
.fb_iframe_widget_fluid
{
	display:				inline-block !important;
}

/* Sticky */
/*.sticky-wrapper
{
	position:				absolute;
}*/

/* Google Places */
.pac-container, 
.pac-item 
{
    padding:				calc(var(--spacing) / 4);
	border-top:				none;
}

/* Google reCaptcha */
.grecaptcha-badge
{
	display:				none;
	/*position:				fixed;
	left:					-186px;
	bottom:					var(--spacing);
	transition:				var(--transition);
	z-index:				2;*/
}

/*.grecaptcha-badge:hover
{
	left:					0;
}*/

/* 404 */
.pagenotfound
{
	text-align:				center;
}

.pagenotfound button
{
	margin-left:			var(--spacing);
}


/*	======================================================================================================================================================================================
	Tabs
	====================================================================================================================================================================================== */
.sitetabs ul.tabs
{
	margin:					0;
	padding:				0;
	list-style:				none;
}

.sitetabs ul.tabs li
{
	background:				none;
	display:				inline-block;
	padding:				calc(var(--spacing) / 2) 0;
	margin-right:			calc(var(--spacing) * 2);
	cursor:					pointer;
}

.sitetabs ul.tabs li.current
{
    box-shadow:				0 2px 2px -2px #303030;
}

.sitetabs .tab-content
{
	width:					100%;
	display:				none;
 	padding-top:			var(--spacing);
}

.sitetabs .tab-content.current
{
	display:				inherit;
}


/*	======================================================================================================================================================================================
	Module - Gallery
	====================================================================================================================================================================================== */
.galleries
{
	position:				relative;
	transition:				var(--transition);
}

.galleries img
{
	cursor:					pointer;
}

.galleries > div
{
	overflow:				hidden;
	transition:				var(--transition);
}

.galleries > div:first-child:hover
{
	box-shadow:				var(--boxshadow);
	transform:				scale(1.03);
}

.galleries > .short
{
	width:					100%; 
	padding:				0 var(--spacing);
	position:				absolute; 
	left:					0; 
	bottom:					0; 
	background:				var(--darkrgba);
	overflow:				hidden;
	/*margin:					var(--spacing) 0;*/
}

.gallery > .long
{
	text-align:				center;
	margin-bottom:			calc(var(--spacing) * 2);
}


/*	======================================================================================================================================================================================
	Module - Post, Shop
	====================================================================================================================================================================================== */
.viewoption
{
	min-height:				65px;	/* for the scenario when there's no category and so h2 is blank */
	overflow:				auto;
}

.viewoption h2
{
	display:				inline-block;
}

.viewoption > div:last-child
{
	text-align:				right;
	align-self:				center;
}


/*	======================================================================================================================================================================================
	Module - Post
	====================================================================================================================================================================================== */
.posts
{
	background-color:		var(--white);
	border:					var(--border);
	/*padding:				var(--spacing);*/
}

.posts:hover
{
	box-shadow:				var(--boxshadow);
}

.posts:hover img
{
	transform:				scale(1.05); /* rotate(5deg) */
}

.posts .image
{
	text-align:				center; 
	position:				relative; 
	overflow:				hidden; 
	cursor:					pointer;
}

.posts img
{
	width:					100%;
	display:				block;
}

.posts > .details
{
	padding:				var(--spacing);
	display:				block;
}

.posts h3.lineclamptwo
{
	height:					calc(var(--fontsize) * 1.3 * 1.5 * 2);	/* h3 has different font size and line height */
}

.posts .lineclampone
{
	height:					calc(var(--smallfont) * var(--lineheight) * 1);
}

.post
{
	margin-bottom:			calc(var(--spacing) * 2);
}

.posts .date,
.post .date
{
	opacity:				0.5;
	font-size:				var(--smallfont);
}

.post .statistics
{
	margin-left:			calc(var(--spacing) * 1.5);
	font-size:				var(--smallfont);
}

/* Comment */
.commentform
{
	width:					100%;
	max-width:				var(--widthsmall); 
	margin-top:				calc(var(--spacing) * 2);
	display:				inline-block;
	vertical-align:			top;
}

/* Popular */
.posts.popular
{
	width:					100%;
	min-height:				60px;
	padding:				calc(var(--spacing) / 2);
	margin:					var(--spacing) auto;
	overflow:				auto;
}

.posts.popular img
{
	width:					110px;
	float:					left;
	margin-right:			calc(var(--spacing) / 2);
}

/*.posts.popular > div:last-child
{
	padding:				calc(var(--spacing) / 2);
}*/

.posts.popular > div:last-child > p
{
	line-height:			1.5;
	height:					calc(var(--fontsize) * 1.5 * 2);
	margin:					0;
}

.posts.popular > div:last-child > div
{
	text-align:				right;
	float:					right;
}


/*	======================================================================================================================================================================================
	Module - Testimonial
	====================================================================================================================================================================================== */
.testimonials
{
	list-style:				none;
	margin:					0;
	padding:				0;
}

.testimonial > span,
.newsfade .more
{
	text-align:				right;
	float:					right;
	font-size:				var(--smallfont);
}

.news-fade-wrapper
{
	height:					unset !important;
	max-height:				180px;
	overflow-y:				hidden;
}

.newsfade .fa-long-arrow-left
{
	margin-right:			var(--spacing);
}

.newsfade .fa-long-arrow-right
{
	margin-left:			var(--spacing);
}


/*	======================================================================================================================================================================================
	Module - Faq
	====================================================================================================================================================================================== */
.faq
{
	width:					100%;
	margin-bottom:			var(--spacing);
	border-radius:			var(--borderradius);
	padding:				var(--spacing);
	border:					var(--border);
	/*box-shadow:				var(--boxshadow);*/
}

.faq table
{
	width:					100%;
}

.faq table td:first-child
{
	width:					40px;
	vertical-align:			top;
}

.faq .question
{
	font-weight:			600;
}

.faq .answer
{
	font-weight:			300;
	display:				none;
	margin-top:				var(--spacing);
	font-size:				calc(var(--fontsize) * 1.3);
	line-height:			1.5;
}


/*	======================================================================================================================================================================================
	Module - Payment
	====================================================================================================================================================================================== */
.payment
{
	width:					100%;
}

.payment > .cryptocurrency,
.payment > .banktransfer,
.payment > .creditcard,
.payment > .paypal,
.payment > .calculator,
.payment > .yourdetails
{
	margin-bottom:			var(--spacing);
	padding:				var(--spacing);
	border:					var(--border);
}

.payment h3
{
	display:				inline;
	margin:					0;
	line-height:			1;
	vertical-align:			middle;
}

.payment .labelcontainer
{
	width:					100%;
}

.payment input[type="radio"]
{
	margin-right:			var(--spacing);
}

.paymentoption
{
	margin:					var(--spacing) auto 0 0;
	display:				none;
}

.cryptocurrency table
{
	width:					100%;
}

.cryptocurrency td
{
	padding:				calc(var(--spacing) / 2);
	vertical-align:			top;
}

.cryptocurrency td:first-child
{
	width:					50px;
	text-align:				center;
}

.cryptocurrency td:nth-child(2)
{
	word-break:				break-word;
}

.calculator, 
.yourdetails
{
	background-color:		var(--light);
	display:				none;
}


/*	======================================================================================================================================================================================
	Links 
	====================================================================================================================================================================================== */
a:link, 
a:visited 
{
	color:					var(--primary);
	text-decoration:		none;
	transition:				var(--transition);
}

a:hover 
{
	color:					var(--fontcolour);
}

.smalllink a:link, 
.smalllink a:visited
{
	color:					var(--navigation);
	text-decoration:		none;
}

.smalllink a:hover 
{
	color:					var(--primary);
}

a.anchor
{ 
    position:				relative;
    top:					calc(var(--spacingtop) * -1.5);
}


/*	======================================================================================================================================================================================
	Animations
	====================================================================================================================================================================================== */	
.gradientanimation
{
	background:				linear-gradient(135deg, var(--light), #CACACA);
	background-size:		400% 400%;
	animation:				GradientAnimation 5s ease infinite;
}

@keyframes GradientAnimation
{ 
	0%
	{
		background-position:10% 0%
	}
	50%
	{
		background-position:90% 100%
	}
	100%
	{
		background-position:10% 0%
	}
}


/*	======================================================================================================================================================================================
	Font Awesome
	====================================================================================================================================================================================== */
/*.fas, .far, .fab
{
	transition:				var(--transition);		
}*/

.mailing .fa-paper-plane
{
	font-size:				24px;
	margin:					calc(var(--spacing) / 4) calc(var(--spacing) / 2) 0 0;
}

.contactdetails .fa-map-marker-alt,
.contactdetails .fa-clock,
.contactdetails .fa-at,
.contactdetails .fa-phone,
.contactdetails .fa-building
{	
	background-color:		var(--secondary);
	padding:				calc(var(--spacing) / 1.5);
	margin-right:			calc(var(--spacing) / 2);
	margin-bottom:			calc(var(--spacing) / 2);
	color:					var(--primary);
	border-radius:			50%;
	font-size:				20px;
	margin-bottom:			calc(var(--spacing) / 2);
}

.fa-arrow-to-top.scrollpage
{
	font-size:				calc(var(--fontsize) * 2);
	display:				none;
	position:				fixed;
	z-index:				1;
	bottom:					var(--spacing);
	right:					var(--spacing);
	cursor:					pointer;
	line-height:			1;
}

/* Navigation */
header .fa-bars
{
	font-size:				23px;
	padding:				calc(var(--spacingcore) / 1.5) 0;
	color:					var(--white);
	vertical-align:			top;
	margin-right:			var(--spacing);
	display:				none;
}

nav.primary .fa-chevron-down
{
	font-size:				10px;
	margin:					0 0 0 5px;
}

header nav ul ul .fa-home-lg-alt 
{
	margin-right:			calc(var(--spacing) / 2);
}

header .controls .fa-phone,
header .controls .fa-search
{
	font-size:				18px;
	vertical-align:			middle;
	cursor:					pointer;
	color:					var(--white);
	padding:				var(--spacing) calc(var(--spacing) / 1.5);
}

/* Hero */
.lSSlideOuter .fa-chevron-circle-left, 
.lSSlideOuter .fa-chevron-circle-right 
{
	font-size:				calc(var(--fontsize) * 1.5);
	color:					var(--primary);
}

/* Button */
button .fa-copy, 
button .fa-envelope, 
button .fa-paper-plane,
button .fa-check,
button .fa-lock,
button .fa-home,
button .fa-print,
button .fa-spinner
{
	margin-right:			calc(var(--spacing) / 2);
}

/* Home */
.home > .module.shopmodule #items > a > button .fa-chevron-right,
.home > .module.postmodule #posts > a > button .fa-chevron-right
{
	margin-left:			calc(var(--spacing) / 2);
}

/* Post, Shop */
.viewoption .fa-th, 
.viewoption .fa-th-list
{
	font-size:				20px;
	vertical-align:			middle; 
	cursor:					pointer; 
	margin-left:			calc(var(--spacing) / 4);
    position:				relative;
}

.secondarybutton > .fa-ellipsis-v,
.secondarybutton > .fa-sliders-h
{
	color:					var(--darkrgba);
	vertical-align:	-webkit-baseline-middle;
}

.secondarybutton > .fa-ellipsis-v
{
	font-size:				30px;
}

.secondarybutton > .fa-sliders-h
{
	font-size:				20px;
}

/* Post */
.posts .fa-eye,
.post .fa-eye
{
	margin-right:			calc(var(--spacing) / 2);
}

.post .fa-thumbs-up,
.post .fa-spinner
{
	margin-left:			calc(var(--spacing) / 2);
	margin-right:			calc(var(--spacing) / 2);
}

.post .fa-thumbs-up:hover
{
	color:					var(--primary);
}

.postsform .fa-pencil-alt
{
	margin-right:			calc(var(--spacing) / 2);
}

/* Faq */
.faq .fa-chevron-right
{
	margin-right:			calc(var(--spacing) / 2);
	transition:				var(--transition);
}

/* Payment */
.payment .fa-bitcoin,
.payment .fa-credit-card, 
.payment .fa-paypal, 
.payment .fa-building
{
	font-size:				20px;
	vertical-align:			middle;
	margin-right:			calc(var(--spacing) / 2);
}

.payment .fa-cc-visa, 
.payment .fa-cc-mastercard, 
.payment .fa-cc-amex
{
	font-size:				24px;
}

.paymentoption .fa-bitcoin, 
.paymentoption .fa-ethereum, 
.paymentoption .fa-monero
{
	font-size:				40px;
	margin-right:			calc(var(--spacing) / 2);
}

.paymentoption .fa-bitcoin
{
	color:					#FF9900;
}

.paymentoption .fa-ethereum
{
	color:					#3C3C3D;
}

.paymentoption .fa-monero
{
	color:					#FF6500;
}

/* Footer */
footer .fa-map-marker-alt,
footer .fa-clock,
footer .fa-at, 
footer .fa-phone,
footer .fa-globe, 
footer .fa-fax,
footer .fa-globe, 
footer .fa-calendar-alt,
footer .fa-pencil-alt
{
	background-color:		var(--secondary);
	padding:				calc(var(--spacing) / 1.5);
	margin:					calc(var(--spacing) / 2) calc(var(--spacing) / 2) calc(var(--spacing) / 2) 0;
	color:					var(--primary);
	border-radius:			50%;
}

footer .fa-chevron-down, 
footer .fa-chevron-up
{
	font-size:				calc(var(--spacing) / 2);
	float:					right;
	margin-top:				calc(var(--spacing) / 1.5);
    position:				relative;
	top:					3px;
	right:					calc(var(--spacing) / 2);
}

footer.signoff .fa-calendar-alt
{
	margin:					auto calc(var(--spacing) / 4) auto calc(var(--spacing) / 2);
}

footer.signoff .fa-copyright
{
	margin-right:			calc(var(--spacing) / 4);
}

/* Social */
.social.fa-facebook-f, 
.social.fa-pinterest-p, 
.social.fa-instagram, 
.social.fa-twitter, 
.social.fa-linkedin-in, 
.social.fa-youtube, 
.social.fa-rss
{
	transition:				var(--transition);
}

.fa-facebook-f:hover
{
	color:					#3B5998;
}

.fa-pinterest-p:hover
{
	color:					#CB2027;
}

.fa-instagram:hover
{
	color:					#517FA4;
}

.fa-twitter:hover
{
	color:					#00ACED;
}

.fa-linkedin-in:hover
{
	color:					#007BB6;
}

.fa-youtube:hover
{
	color:					#BB0000;
}

.fa-rss:hover
{
	color:					#FF6600;
}

/* Fancytree */
#tree .fancytree-expander
{
	font-size:				var(--smallfont);
	float:					right;
	margin-top:				calc(var(--spacing) / 1.5);
}


/*	======================================================================================================================================================================================
	Video 
	====================================================================================================================================================================================== */
video
{
	width:					100%;
	height:					auto;
}

.video > .container
{
	position:				relative;
	padding-bottom:			56.25%;
	height:					0;
	box-shadow:				var(--boxshadow);
	filter:					url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'brightness\'><feColorMatrix type=\'matrix\' values=\'1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0\'/></filter></svg>#brightness"); /* Firefox 3.5+ */
	-webkit-filter:			brightness(108.5%); /* Chrome 19+ & Safari 6+ */
}

.video > .container > iframe
{
	width:					100%;
	height:					100%;
	position:				absolute;
	top:					0;
	left:					0;
	border:					none;
}


/*	======================================================================================================================================================================================
	Map 
	====================================================================================================================================================================================== */
.map
{
	width:					100%;
	display:				block;
	border:					0;
	margin:					0;
	/*-webkit-filter:		grayscale(100%);
	filter:					grayscale(100%);*/
}

.mapcontact
{
	height:					400px;
	padding:				var(--spacing);
	box-shadow:				var(--boxshadow);
}


/*	======================================================================================================================================================================================
	Site Specific - '!important' is required on background-color for items which will appear in TinyMCE in the admin
	====================================================================================================================================================================================== */
input[type="button"], 
input[type="submit"], 
input[type="reset"], 
button[type="submit"], 
button[type="button"]
{
	border:					2px solid var(--primary);
 	text-transform:			unset;
    box-shadow:				none;
}

input[type="button"]:hover, 
input[type="submit"]:hover, 
input[type="reset"]:hover, 
button[type="submit"]:hover, 
button[type="button"]:hover
{
	color:					var(--primary);
    background-color:		unset;
}

.menubar1
{
    width:					26px;
}

.menubar2
{
    width:					18px;
}

.menubar3
{
    width:					12px;
}

ul.custombullet
{
/* 	padding:				0; */
	margin:					0;
}

ul.custombullet li
{
	list-style:				none;
	position:				relative;
	margin-bottom:			var(--spacing);
}

ul.custombullet li::before
{
	font-family:			"Font Awesome 5 Pro";
	content:				"\f192";
	font-weight:			500;
	font-size:				22px;
	color:					var(--primary);
	float:					left;
	position:				absolute;
	left:					-40px;
}

.displace
{
	position:				relative;
	top:					-80px;
	z-index:				2;
	margin-bottom:			-100px;
}

.odd
{
	background-color:		var(--white);
}

.even
{
	background-color:		var(--light);
}

.collage > div
{
	position:				relative;
	cursor:					pointer;
}

.collage > div > div
{
	width:					100%;
	padding:				0 var(--spacing);
	position:				absolute;
	bottom:					0;
	background-color:		var(--darkrgba);
}

.goodsports
{
	margin-top:				calc(var(--spacing) * 2);
	max-width:				140px;	
}

footer h4, footer h4 a:link, footer h4 a:visited
{
	color:					var(--white);
}

/* Home */
.collage h2
{
	font-size:				calc(var(--fontsize) * 2);
}

.collage > div
{
	height:					320px;
	background-size:		cover;
	background-repeat:		no-repeat;
	background-position:	top center;
}

.collage > .men
{
	background-image:		url("/upload/files/seniors-men.jpg");
}

.collage > .women
{
	background-image:		url("/upload/files/seniors-women.jpg");
}

.collage > .netball
{
	background-image:		url("/upload/files/netball.jpg");
}

.collage > .cricket
{
	background-image:		url("/upload/files/cricket.jpg");
}

.collage > .juniors
{
	background-image:		url("/upload/files/junior.jpg");
}

.collage > .auskick
{
	background-image:		url("/upload/files/auskick.jpg");
}

.membership
{
	background-color:		var(--dark);
}

.membership > .container
{
	max-width:				unset;
	padding:				0;
}

.membership > .container > .grid > div:nth-of-type(1)
{
	background-image:		url("/upload/files/membership.jpg");
	background-size:		cover;
}

.membership > .container > .grid > div:nth-of-type(2)
{
	padding:				var(--spacingcore);
	max-width:				calc(var(--widthsmall) * 1.5);
}

.mailing button
{
	width:					100%;
}

.mailing
{
	background-image:		url("/upload/files/mailing-list.jpg");
	background-color:		#454545;
	background-repeat:		no-repeat;
	background-position:	75%;
	background-size:		contain;
}

.mailing
{
	text-align:				center;
}

.sponsors > .container
{
	max-width:				1280px;
	text-align:				center;
}

.sponsors img
{
	filter:					grayscale(100%);
	transition:				var(--transition);
}

.sponsors .grid.four img
{
	width:					200px;
}

.sponsors .grid.five img
{
	width:					150px;
}

.sponsors img:hover
{
	filter:					unset;
	transform:				scale(1.05);
}

.bglight
{
	background-image:		url("/upload/files/bg-light.jpg");
	background-color:		var(--white);
	background-repeat:		no-repeat;
	background-size:		cover;
}

.bgdark
{
	background-image:		url("/upload/files/bg-dark.jpg");
	background-color:		var(--black);
	background-repeat:		no-repeat;
	background-size:		cover;
}

.bgfans
{
	background-image:		url("/upload/files/bg-fans.jpg");
	background-color:		var(--white);
	background-repeat:		no-repeat;
	background-size:		cover;
}

.home .module.postmodule h2,
.home .module.postmodule button
{
	text-align:				center;
}

.home .module.postmodule h2
{
    display:				block;
    margin:					0 auto;
}

.slider section.caption .logo
{
	display:				none;
	margin:					var(--spacing) auto;
}

.home > .module.shopmodule #items > a > button,
.home > .module.postmodule #posts > a > button
{
	margin:				calc(var(--spacing) * 2) auto;
	display:				block;
}

/* Club */
.sponsor h3
{
	text-align:				center;
}

/*.sponsor .box,
.point .box,
.fireta .box,
.location .box*/
.box
{
	padding:				var(--spacing);
	box-shadow:				var(--boxshadow);
	margin-top:				var(--spacing);
	background-color:		var(--white);
}

.fireta img
{
	width:					50px;
	margin:					calc(var(--spacing) / 4) 0;
}

.fireta
{
	max-width:				320px;
	text-align:				center;
	color:					var(--primary);
	border-radius:			var(--borderradius);
	box-shadow:				var(--boxshadow);
	padding:				calc(var(--spacing) / 2) 0;
	background-color:		var(--white);
	text-transform:			uppercase;
	font-size:				var(--smallfont);
	font-weight:			600;
}

.fireta.grid.three
{
	grid-template-columns:	1fr 1fr 1fr !important;
}

.policies table
{
	width:					100%;
	max-width:				400px;
	margin:					0;
}

.policies table td:first-child
{
	width:					50px;
	padding:				calc(var(--spacing) / 2) 0;
}

/* 
.sponsor .box:hover
{
	background-color:		var(--lightrgba);
}
 */
 
/* Gallery */
.gallerymodule > .container
{
	max-width:				var(--widthnarrow);
}

.galleries > .short > h2
{
	font-size:				calc(var(--fontsize) * 2);
}

/* News */
.posts h3, h3 a:link, h3 a:visited
{
	font-size:				calc(var(--fontsize) * 1.3);
}

/* Contact */
.contactdetails
{
	max-width:				var(--widthnarrow);
}

.point .box
{
	background-color:		var(--white);
}

.point h4
{
	color:					var(--darkrgba);
}

.contactformplaceholder
{
	text-align:				center;
}


/*	======================================================================================================================================================================================
	Tablet 
   	====================================================================================================================================================================================== */	
@media all 
and (min-width : 768px) 
and (max-width : 1279px) 
{
	/*	======================================================================================================================================================================================
		Grouping 
		====================================================================================================================================================================================== */	
	.grid
	{
		grid-column-gap: 		calc(var(--spacing) * 2);
	}
	
	.two, .three, .four, .five, .six
	{
		grid-template-columns:	1fr 1fr;
	}

	/*	======================================================================================================================================================================================
		Core
		====================================================================================================================================================================================== */
	.phonehide
	{
		display:				initial !important;
	}

	.tablethide
	{
		display:				none !important;
	}
	
	footer .grid.two,
	footer .grid.three,
	footer .grid.four,
	footer .grid.five,
	footer .grid.six
	{
		grid-template-columns:	1fr;
	}
}
/*	======================================================================================================================================================================================
	Desktop 
   	====================================================================================================================================================================================== */	
@media all 
and (min-width : 1280px) 
{
	/*	======================================================================================================================================================================================
		Variables 
		====================================================================================================================================================================================== */
	:root
	{
		--width:				1440px;
		--spacingcore:			40px;
		--margin:				20px;
	}
	
	/*	======================================================================================================================================================================================
		Canvas 
		====================================================================================================================================================================================== */
	.primary.offcanvas, 
	.secondary.offcanvas
	{
		width:					unset !important;
		height:					unset;
		position:				unset;
		z-index:				unset;
		overflow:				unset !important;
		transition:				unset;
		padding:				unset !important;
		border:					unset !important;
		background-color:		unset;
		left:					unset;
		top:					unset;
	}


	/*	======================================================================================================================================================================================
		Framework
		====================================================================================================================================================================================== */
	header > .container
	{
		padding:				calc(var(--spacing) / 2) var(--spacingcore);
	}

	header > .container > .grid
	{
		grid-template-columns:	auto 1fr 1fr;
	}

	header > .container > .grid > div:nth-child(2)
	{
		display:				unset;
	}


	/*	======================================================================================================================================================================================
		Template
		====================================================================================================================================================================================== */
	.sideform > aside .container,
	.sideformpartial > aside .container
	{
		padding:				var(--spacing) 0 0 var(--spacing);
	}


	/*	======================================================================================================================================================================================
		Grouping 
		====================================================================================================================================================================================== */
	.two
	{
		grid-template-columns:	1fr 1fr;
	}

	.three
	{
		grid-template-columns:	1fr 1fr 1fr;
	}

	.four
	{
		grid-template-columns:	1fr 1fr 1fr 1fr;
	}

	.five
	{
		grid-template-columns:	1fr 1fr 1fr 1fr 1fr;
	}
	
	.six
	{
		grid-template-columns:	1fr 1fr 1fr 1fr 1fr 1fr;
	}
	
	.onethird
	{
		grid-template-columns:	1fr 2fr;
	}

	.onequarter
	{
		grid-template-columns:	1fr 3fr;
	}
	
	.onefifth
	{
		grid-template-columns:	1fr 4fr;
	}

	.twothirds
	{
		grid-template-columns:	2fr 1fr;
	}
	
	.threequarters
	{
		grid-template-columns:	3fr 1fr;
	}

	.fourfifths
	{
		grid-template-columns:	4fr 1fr;
	}

	/*	======================================================================================================================================================================================
		Logo
		====================================================================================================================================================================================== */
	header > .container > .grid > div:nth-of-type(1) > .logo,
	header > .container > .grid > div:nth-of-type(1) > .logonegative
	{
/* 		width:					100px; */
/* 		height:					unset; */
		display:				inline-block;
	}

	header > .container > div.grid > div > .logo,
	header > .container .logonegative
	{
		padding-right:			calc(var(--spacing) * 2);
	}
	
	header > .container > div.grid > div > .primary > .logo
	{
		display:				none;
	}


	/*	======================================================================================================================================================================================
		Navigation 
		====================================================================================================================================================================================== */
	/* All */
	nav ul
	{
		white-space:			nowrap;
	}
	
	/* Primary */
	nav.primary ul li
	{
		display:				inline-block;
		margin:					0 calc(var(--spacing) * 2) 0 0;
	}

	nav.primary ul ul	/* sub menu */
	{
		min-width:				200px;
		position:				absolute;
		z-index:				4;
		padding:				var(--spacing);
		background:				var(--darkrgba);
		line-height:			var(--lineheight);
		text-align:				initial;	/* use to initialise if 'centre' is used on parent */
	}
	
	nav.primary ul li:hover > ul	/* sub menu */
	{
		opacity:				1;
	}

	nav.primary ul ul li	/* sub menu */
	{
		display:				block;
	}

	nav.primary ul ul li a	/* sub menu */
	{
		padding:				calc(var(--spacing) / 3);
	}
	
	/* Secondary */
	nav.secondary ul li a
	{
		padding:				calc(var(--spacing) / 8) 0;
	}
	
	/* Links */
	
	/* Hamburger */	
	.primarybutton, 
	.secondarybutton
	{
		display:				none;
	}

	/*	======================================================================================================================================================================================
		Search 
		====================================================================================================================================================================================== */
	.keyword
	{
		margin:					0 var(--spacingcore);
	}

	/*	======================================================================================================================================================================================
		Light Slider, Light Gallery
		====================================================================================================================================================================================== */	
	.post .carousel 	
	{
		max-width:				1024px;
	}

	.item .carousel 	
	{
		max-width:				800px;
	}
	
	.caption span
	{
		font-size:				calc(var(--fontsize) * 2);
	}

	/*	======================================================================================================================================================================================
		Core
		====================================================================================================================================================================================== */		
	footer .children
	{
		display:				block;
		margin-bottom:			0;
	}

	footer.signoff > .container > .grid > div:nth-of-type(1)
	{
		text-align:				left;
	}

	footer.signoff > .container > .grid > div:nth-of-type(2)
	{
		text-align:				right;
	}

	.desktophide
	{
		display:				none !important;
	}
	
	.phonehide, 
	.mobilehide
	{
		display:				initial !important;
	}

	/*	======================================================================================================================================================================================
		Post
		====================================================================================================================================================================================== */
	/* List */
	.posts .details
	{
		overflow:				auto;
	}

	.posts.listview > .image
	{
		max-width:				300px; 
		float:					left;
	}

	.posts.listview h3.lineclamptwo
	{
		height:					auto;
	}

	/*	======================================================================================================================================================================================
		Font Awesome
		====================================================================================================================================================================================== */
	footer .fa-chevron-down, 
	footer .fa-chevron-up
	{
		display:				none;
	}

	/*	======================================================================================================================================================================================
		Map
		====================================================================================================================================================================================== */
	/*.mapfooter
	{
		height:					200px;
	}*/

	/*	======================================================================================================================================================================================
		Site Specific - '!important' is required on background-color for items which will appear in TinyMCE in the admin
		====================================================================================================================================================================================== */	
	h2, h3, h4, h5, h6
	{
		line-height:			1.5;
	}

	h1, h1 a:link, h1 a:visited
	{
		font-size:				calc(var(--fontsize) * 6.5);
	}

	header > .container > div.grid > div:nth-child(2) > .logo
	{
		display:				none;
	}
	
	.slider section.caption .logo
	{
		display:				block;
		margin:					var(--spacing) auto;
	}
}