/* ======================================================================================================================================================================================
   Variables 
   ====================================================================================================================================================================================== */	
:root
{
	--width:				100%;
	--paddingcore:			20px;
	--padding:				20px;
	--paddingtop:			75px;		/* required when menu is fixed */
	--margin:				0 0 20px 0;
	--colour:				#E1022E;
	--colourfont:			#909090;
	--imageratio:			56.25%;		/* 16:9 Aspect Ratio */
	--transition:			200ms ease;
	--bordercolour:			#F0F0F0;
	--border:				1px solid var(--bordercolour);
	--boxshadow:			0 0 10px 0 #C0C0C0;
	--textshadow:			0 1px 1px var(--bordercolour);
	--fontsize:				17px;
	--smallfont:			calc(var(--fontsize) * 0.75);
	--backgroundcolour:		#000000;	/* #747E84; */
	--backgroundrgba:		rgba(0,0,0,0.90);	/* rgba(116,126,132,0.90) */
}
/* ======================================================================================================================================================================================
   Fonts 
   ====================================================================================================================================================================================== */
/*@font-face
{
	font-family:			Myriad;
	src:					url('../fonts/myriad-set-pro-text.ttf');
	font-style:				normal;
	font-weight:			400;
}*/

html, body, input, select, textarea
{
	font-family:			"Open Sans",sans-serif;
	font-size:				var(--fontsize);
	line-height:			2;
	text-align:				left;
	color:					var(--colourfont);
}
/* ======================================================================================================================================================================================
   Headers 
   ====================================================================================================================================================================================== */
h2, h3, h4, h5, h6
{
	line-height:			1.5;
	margin:					calc(var(--padding)/2) 0;
}

h1, h1 a:link, h1 a:visited
{
	font-family:			"Unica One", cursive;
	font-size:				calc(var(--fontsize) * 2.5);
	color:					var(--colour);
	font-weight:			700;
	line-height:			1;
	text-transform:			uppercase;
}

h2, h2 a:link, h2 a:visited
{
	font-family:			"Unica One", cursive;
	font-size:				calc(var(--fontsize) * 2);
	color:					var(--backgroundrgba);
	font-weight:			400;
}

h3, h3 a:link, h3 a:visited
{
	font-size:				calc(var(--fontsize) * 1.3);
	color:					var(--backgroundrgba);
	font-weight:			500;
}

h4, h4 a:link, h4 a:visited
{
	font-size:				var(--fontsize);
	color:					#606060;
	font-weight:			500;
}

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

h6, h6 a:link, h6 a:visited		/* Cart Item Headings */
{
	font-size:				calc(var(--fontsize) * 1.1);
	color:					var(--backgroundcolour);
	font-weight:			700;
	display:				inline-block;
}
/* ======================================================================================================================================================================================
   Line Clamping
   ====================================================================================================================================================================================== */
.lineclampone
{
	overflow:				hidden; 
	text-overflow:			ellipsis; 
	display:				-webkit-box; 
	-webkit-line-clamp:		1; 
	-webkit-box-orient:		vertical;
}

.lineclamptwo
{
	overflow:				hidden; 
	text-overflow:			ellipsis; 
	display:				-webkit-box; 
	-webkit-line-clamp:		2; 
	-webkit-box-orient:		vertical;
}

.lineclampfive
{
	overflow:				hidden; 
	text-overflow:			ellipsis; 
	display:				-webkit-box; 
	-webkit-line-clamp:		5; 
	-webkit-box-orient:		vertical;
	height:					140px;	/* fallback - font-size x line-height x line-clamp */
}
/* ======================================================================================================================================================================================
   Canvas
   ====================================================================================================================================================================================== */
[canvas], [off-canvas]
{
	-webkit-transition:		-webkit-transform var(--transition);
	transition:				transform var(--transition);
}	        
	        
[canvas=container]
{
	min-height:				100%;
	padding-top:			var(--paddingtop) !important;		/* because the .header is fixed */
}

[off-canvas*=left]
{
	background:				var(--backgroundrgba) !important;
}

[off-canvas*=right]
{
	background:				rgba(255,255,255,1) !important;
	border-left:			var(--border);
	margin-top:				var(--paddingtop) !important;		/* because the .header is fixed */
}

[off-canvas*=top],[off-canvas*=bottom]
{
	background:				rgba(255,255,255,1) !important;
	color:					var(--colourfont) !important;
}

[off-canvas*=top]
{
	height:					100vh !important;
}

[off-canvas*=bottom]
{
	height:					calc(100vh - var(--paddingtop)) !important;
}

[off-canvas*=top] > div:nth-of-type(1), [off-canvas*=bottom] > div:nth-of-type(1)
{
	width:					100vw !important;
	max-width:				420px;
	padding:				var(--padding);	
	
	/* Vertically Center */
	/*position:				relative;
	overflow:				auto;
	top:					50%;
    transform:				translateY(-50%);*/
}
/* ======================================================================================================================================================================================
   Framework
   ====================================================================================================================================================================================== */
.header
{
	width:					100vw;
	background:				#000000;	/*var(--backgroundrgba);*/
	position:				fixed;
	z-index:				3 !important;	/* on top of the 'overlay' so the search stands out */
	min-height:				75px;
}

.header > .container
{
	width:					100%;
	max-width:				var(--width);
	padding:				calc(var(--paddingcore) / 2) var(--paddingcore);
	padding-bottom:			0;
}

.navbar
{
	display:				none;
}

.wrapper
{
	width:					100vw;
}	
	
.wrapper > .container
{
	width:					100%;
	max-width:				var(--width);
	padding:				var(--paddingcore);
}

.main
{
	width:					100%;
}

.side
{
	display:				none;
}

.showside .side
{
	display:				block;	
}

.base
{
	width:					100vw;
	background:				var(--bordercolour);
}

.base > .container
{
	width:					100%;
	max-width:				var(--width);
	padding:				var(--paddingcore);
	overflow:				auto;
	text-align:				center;
}

.footer
{
	width:					100vw;
	background:				#FAFAFA;	/*var(--backgroundrgba)*/
}

.footer > .container
{
	width:					100%;
	max-width:				var(--width);
	/* max-width:				calc(var(--width) * 3/4); */
	padding:				var(--paddingcore);
	overflow:				auto;
}
/* ======================================================================================================================================================================================
   Grouping 
   ====================================================================================================================================================================================== */
.flex
{
	display:				block;
}

.single
{
	width:					100%;
}

.double, .triple, .quadriple, .quintuple
{
	width:					var(--width);
	display:				inline-block;
	vertical-align:			top;	
}
/* ======================================================================================================================================================================================
   Logo
   ====================================================================================================================================================================================== */
.logo
{
	display:				inline-block;
}

.header > .container .logo
{
	width:					90px;

	/* Left */
	/*margin-left:			var(--paddingcore);*/
	
	/* Centre */
	text-align:				center;
	position:				absolute; 
	left:					50%;
	margin-left:			-45px;
}

.footer > .container .logo
{
	width:					100px;
}

.logosmall
{
	width:					100px;
}
/* ======================================================================================================================================================================================
   Navigation 
   ====================================================================================================================================================================================== */
/* All */
.nav
{
	padding:				0;
	white-space:			nowrap;
}

.nav li
{
	display:				block;
}

.nav a
{
	display:				block;
	padding:				calc(var(--padding) / 2) var(--padding);
}

.nav li:hover > ul
{
	display:				block;
}

.nav ul a
{
	padding:				0;
}

/* Site */
.nav.site .current a, .nav.site li:hover > a
{
	color:					#FFFFFF !important;
}

.nav.site ul
{
	display:				none;
}

/* Category */
.nav.category .current a, .nav.category li:hover > a
{
	color:					var(--colour) !important;
}

.nav.category ul
{
	display:				block;
}

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

.menuiconleft
{
	float:					left;
}

.menuiconright
{
	float:					left;
	padding-right:			var(--padding);
	margin-top:				calc(var(--padding) / 8);
}

.menubar1, .menubar2, .menubar3, .menubar4, .menubar5, .menubar6
{
    width:					22px;
    height:					1px;
    margin:					7px auto;
    transition:				var(--transition);
}

.menubar1, .menubar2, .menubar3
{
    background-color:		#FFFFFF;
}

.menubar4, .menubar5, .menubar6
{
    background-color:		var(--colourfont);
}

.menuiconchange .menubar1
{
    -webkit-transform:		rotate(-45deg) translate(5px,5px);
    transform:				rotate(45deg) translate(5px,5px);
}

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

.menuiconchange .menubar3
{
    -webkit-transform:		rotate(45deg) translate(6px,-6px);
	transform:				rotate(-45deg) translate(6px,-6px);
}

.menuiconchange .menubar4
{
    -webkit-transform:		rotate(-45deg) translate(5px,5px);
    transform:				rotate(45deg) translate(5px,5px);
}

/* .menuiconchange  */.menubar5
{
	opacity:				0;
}

.menuiconchange .menubar6
{
    -webkit-transform:		rotate(45deg) translate(6px,-6px) ;
	transform:				rotate(-45deg) translate(6px,-6px) ;
}   
/* ======================================================================================================================================================================================
   Search 
   ====================================================================================================================================================================================== */
.keyword
{
	position:				absolute;
	top:					var(--paddingtop);
	left:					0;
	margin:					auto;
}

.overlay
{
    background:				var(--backgroundrgba);
    display:				none;
    width:					100%;
    height:					100%;
    position:				absolute;
    top:					0;
    left:					0;
    z-index:				2;
}
/* ======================================================================================================================================================================================
   Light Slider, Light Gallery
   ====================================================================================================================================================================================== */
/* Light Slider */
#slider img
{
/* 	height:					60vh; */
/* 	transform:				translateX(-33%); */
}

.caption
{
	width:					100%;
	position:				absolute;
	bottom:					0;
	text-align:				center;
	background:				var(--backgroundrgba);
	padding:				var(--padding);
	color:					#FFFFFF;
	line-height:			1;
}

.caption span
{
	font-size:				calc(var(--fontsize) * 1.5);
	font-weight:			400;
}

#carousel img
{
	display:				block;
}

.lightSlider > li
{
	position:				relative;	/* so the caption is aligned relative to this */
}

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

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

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

.lSAction
{
	display:				none !important;
}

/* Light Gallery */
.lg-backdrop
{
	background:				var(--backgroundrgba) !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;  
}
/* ======================================================================================================================================================================================
   Core
   ====================================================================================================================================================================================== */
.banner
{
	z-index:				1;
}

.call
{
	float:					right;
}

.call a
{
	color:					var(--colour) !important;
}

.call span
{
	display:				none;
}

.controls
{
	float:					right; 
	z-index:				3;
}
	
.controls > div
{
	display:				inline-block;
	vertical-align:			middle;
	margin-left:			var(--padding);
}

.contactdetails table
{
	width:					100%;
	border-collapse:		initial;
	border-spacing:			0 var(--padding);
	text-align:				left;
}

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

.mailinglistform
{
	width:					100%;
	max-width:				800px;
	display:				inline-block;
	/*text-align:				center;*/
}

.mailinglistform h2
{
	display:				inline;
}

.footer .contact
{
	margin:					1.5% 0;
}

.footer .navigation
{
	border-bottom:			1px solid var(--colourfont);
}

.footer .navigation:first-of-type
{
	border-bottom:			none;
}

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

.footer .details
{
	margin:					1.5% 0;
}

.social
{
	font-size:				20px;
}

.gallery
{
	/*position:				relative;*/ 
	margin:					2% 0;
}

.gallery div
{
	/*width:				100%; 
	padding:				5px; 
	position:				absolute; 
	left:					0; 
	bottom:					0; 
	background:				rgba(255,255,255,0.8); 
	overflow:				hidden; 
	border-left:			0; 
	border-right:			0; 
	border-bottom:			0;*/
	margin-top:				10px;
}

.scrollpage
{
	font-size:				35px;
	display:				none;
	position:				fixed;
	bottom:					25px;
	right:					25px;
	cursor:					pointer;
	color:					#000000;
	line-height:			1;
	z-index:				1;
}

.messageadmin
{
	padding:				0.5%; 
	background-color:		#FFFFFF; 
	text-align:				center; 
	border-bottom:			var(--border);
}

.report
{
	display:				none;
	word-wrap:				break-word; 
	overflow:				hidden;
}

.error, .error::placeholder
{
	color:					#ED1848 !important;
	border:					2px solid #ED1848 !important;
}
	
/* 
.modal
{
	width:					100vw !important;
	max-width:				420px;
	padding:				var(--padding);	
 *//* safari truncates the top and bottom on mobile devices */
/* 
	position:				relative;
	overflow:				auto;
 */
	/*top:					50%;
    transform:				translateY(-50%);*/
/* } */

/*.modalwide
{
	width:					var(--width) !important;
}*/

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

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

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

.rounded
{
	border-radius:			5px;
}

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

.parallax
{
	position:				relative;

	/*height:					400px; 
	background-image:		url('../images/custom-home-tree.jpg'); 
	background-attachment:	fixed;
	background-position:	top;
	background-repeat:		no-repeat;*/
}

.delete, .disable, .pencil, .copy, .insert, .trash, .star, .tick/*, .close  .plus, .minus,  */
{
	width:					16px;
	cursor:					pointer; 
	vertical-align:			middle; 
	margin-bottom:			3px;
}

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

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

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

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

.desktophide
{
	display:				initial;
}

.phonehide, .mobilehide
{
	display:				none;
}

.hiddenpic
{
	display:				none;
}

.offline
{
	max-width:				400px; 
	text-align:				center; 
	margin-top:				var(--padding);
}

.clearfix:after
{ 
   content:					" ";
   display:					block; 
   height:					0; 
   clear:					both;
}
/* ======================================================================================================================================================================================
   Blog
   ====================================================================================================================================================================================== */
.blog
{
	padding:				var(--padding);
	background-color:		#FFFFFF;
	border:					var(--border);
	margin:					2% 0;
}

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

.blog img
{
	display:				block;
}
 
.blog h3.lineclamptwo
{
	height:					calc(var(--fontsize) * 2 * 2);	/* fallback - font-size x line-height x line-clamp */
}

.blog .lineclampone
{
	height:					calc(var(--fontsize) * 2);	/* fallback - font-size x line-height x line-clamp */
}

.blog div.lineclamptwo
{
	height:					calc(var(--fontsize) * 2 * 2);	/* fallback - font-size x line-height x line-clamp */
}

.blog.popular
{
	min-height:				60px;
	padding:				calc(var(--padding) / 2);
	margin:					calc(var(--padding) / 2) 0;
	overflow:				auto;
}

.blog.popular h4
{
	margin:					0;
}

.blog.popular img
{
	width:					110px;
	float:					left;
	margin-right:			calc(var(--padding) / 2);
 	/*border:					var(--border);*/
}

.blogform
{
	width:					100%;
	max-width:				400px; 
	margin-top:				40px;
	display:				inline-block;
	vertical-align:			top;
}
/* ======================================================================================================================================================================================
   Links 
   ====================================================================================================================================================================================== */
a:link 
{
	color:					var(--colour);
	text-decoration:		none;
	transition:				var(--transition);
}

a:visited
{
	color:					var(--colour);
}

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

.smalllink a:link 
{
	color:					#909090;
	text-decoration:		none;
}

.smalllink a:visited
{
	color:					#909090;
}

.smalllink a:hover 
{
	color:					#E0E0E0;
}

nav .site a:link 
{
	color:					#747E84;
	font-weight:			500;
	font-size:				calc(var(--fontsize) * 0.9);
	transition:				var(--transition);
	text-transform:			uppercase;
}

nav .site a:visited
{
	color:					#747E84;
}

nav .site a:hover 
{
	color:					#FFFFFF;	/* update menu.css, menu-mobile.css, menu-exp-mobile.css 'current' colour as well */
}

nav .category a:link 
{
	color:					var(--colourfont);
	text-decoration:		none;
}

nav .category a:visited
{
	color:					var(--colourfont);
}

nav .category a:hover 
{
	color:					var(--colour);	/* update menu-exp.css 'current' colour as well */
}
/* ======================================================================================================================================================================================
   Loading
   ====================================================================================================================================================================================== */
/*#loadingccform
{
	margin:					5px;
	float:					right;
}

#loadingshipping
{
	width:					24px;
	height:					24px;
	float:					right;	
}*/

/*#loadingcart
{
	width:					22px;
	height:					22px;
    margin:					auto 5px;
	float:					right;	
}*/

/*#loadingsearch
{
	float:					right;
}

#loadinglast
{
	margin:					5px auto;
}

.loading
{
	width:					28px;
	height:					28px;
	display:				none;
	text-align:				center;
	border-radius:			50%;
	border:					2px solid #F0F0F0;
	border-top:				2px solid var(--colour);
	-webkit-animation:		spin 2s linear infinite;
	animation:				spin 2s linear infinite;
}

@-webkit-keyframes spin
{
	0%
	{
		-webkit-transform:	rotate(0deg);
	}

	100%
	{
		-webkit-transform:	rotate(360deg);
	}
}

@keyframes spin
{
	0%
	{
		transform:			rotate(0deg);
	}
	
	100%
	{
		transform:			rotate(360deg);
	}
}*/
/* ======================================================================================================================================================================================
   Animations
   ====================================================================================================================================================================================== */	
/*.gradientanimation
{
	background:				linear-gradient(135deg, #EEEEEE, #AAAAAA);
	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
   ====================================================================================================================================================================================== */
.fa-chevron-down
{
	font-size:				10px;
	margin:					0 0 0 5px;
}

.fa-times-circle
{
	color:					#ED1848;
	cursor:					pointer;
}

.fa-copy, 
.fa-envelope, 
.fa-paper-plane,
.fa-eye,
.fa-check,
.fa-lock
{
	margin-right:			calc(var(--padding) / 2);
}

.fa-thumbs-up
{
	margin-left:			calc(var(--padding) / 2);
	margin-right:			calc(var(--padding) / 2);
}

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

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

.fa-bitcoin
{
	color:					#FF9900;
}

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

.fa-monero
{
	color:					#FF6500;
}

.fa-credit-card, 
.fa-cc-paypal, 
.fa-cc-visa, 
.fa-cc-mastercard, 
.fa-cc-amex
{
	font-size:				26px;
	margin-right:			calc(var(--padding) / 2);
}

.fa-cc-amex
{
	margin:					0;
}

.header .fa-search
{
	font-size:				18px;
	vertical-align:			middle;
	cursor:					pointer;
	color:					#FFFFFF;
}

.header .fa-phone
{
	font-size:				18px;
	vertical-align:			middle;
	margin-right:			calc(var(--padding) / 2);
}
 
.lSSlideOuter .fa-chevron-left, .lSSlideOuter .fa-chevron-right 
{
	font-size:				40px;
}

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

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

.footer .fa-map-marker-alt,
.footer .fa-clock,
.footer .fa-envelope, 
.footer .fa-phone,
.footer .fa-globe, 
.footer .fa-calendar-alt,
.footer .fa-pencil-alt
{
	margin-right:			calc(var(--padding) / 2);
}

.contactdetails .fa-map-marker-alt,
.contactdetails .fa-clock,
.contactdetails .fa-envelope,
.contactdetails .fa-phone,
.contactdetails .fa-building,
{
	margin-right:			calc(var(--padding) / 2);
}

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

/* Social */
.fa-facebook-f, 
.fa-google-plus-g, 
.fa-pinterest-p, 
.fa-instagram, 
.fa-twitter, 
.fa-linkedin-in, 
.fa-youtube, 
.fa-rss
{
	font-size:				20px;
	margin-right:			calc(var(--padding) / 2);
}

.fa-facebook-f:hover
{
	color:					#3B5998;
	transition:				var(--transition);
}

.fa-google-plus-g:hover
{
	color:					#D34836;
	transition:				var(--transition);
}

.fa-pinterest-p:hover
{
	color:					#CB2027;
	transition:				var(--transition);
}

.fa-instagram:hover
{
	color:					#517FA4;
	transition:				var(--transition);
}

.fa-twitter:hover
{
	color:					#00ACED;
	transition:				var(--transition);
}

.fa-linkedin-in:hover
{
	color:					#007BB6;
	transition:				var(--transition);
}

.fa-youtube:hover
{
	color:					#BB0000;
	transition:				var(--transition);
}

.fa-rss:hover
{
	color:					#FF6600;
	transition:				var(--transition);
}
/* ======================================================================================================================================================================================
   Member 
   ====================================================================================================================================================================================== */
.membermenudetails
{
    display:				none;
    position:				absolute;
    background-color:		#FFFFFF;
    min-width:				170px;
    max-width:				220px;
    padding:				var(--padding);
    border:					var(--border);
    z-index:				1;
    /*transform:				translateX(-50%);*/
    top:					var(--paddingtop);
    right:					0;
    border-top:				none;
	word-wrap:				break-word;
}

.membermenudetails > div:nth-of-type(1)
{
	line-height:			1; 
	font-weight:			500;
}

.memberimage
{
	max-width:				150px;
}
/* ======================================================================================================================================================================================
   Google Translate
   ====================================================================================================================================================================================== */
/*.goog-te-gadget
{
	font-family:			inherit !important;
	float:					left;
 	margin:					3px 0 0 10px;
}

.goog-te-gadget-simple
{
	border:					none !important;
	font-size:				inherit !important;
}

.goog-te-menu-frame
{
	-webkit-box-shadow:		0 0 12px 0 #A0A0A0 !important;
	box-shadow:				0 0 12px 0 #A0A0A0 !important;
}

.goog-te-menu2
{
	border:					var(--border) !important;
}*/
/* ======================================================================================================================================================================================
   Site Specific - '!important' is required on background-color for items which will appear in TinyMCE in the admin
   ====================================================================================================================================================================================== */
.full > .container
{
	max-width:				100vw;
	padding:				0;
}
	
.homeimage
{
	margin:					1.5%;
}

.base button
{
	width:					100%;
}

.map
{
	width:					100%;
	border:					0;
	margin:					0;
	display:				block;
}

.mapcontact
{
	height:					300px;
}

.table
{
	background-color:		#FAFAFA;	
	text-align:				left;
}

.table tr
{
	vertical-align:			top;
}

.block
{
	max-width:				800px;
	text-align:				center;
	padding:				calc(var(--padding) * 2);
}

blockquote
{
	text-align:				left;
}

hr
{
	margin:					calc(var(--padding) * 2) 0;
}

.fb-like
{
	font-size:				unset; 
	top:					-9px; 
}

#video
{
	width:					33%;
	background-color:		#FFFFFF;
	float:					right;
	z-index:				4;	/* to get it above the search icon when floating */
}

.video
{
	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 iframe
{
	width:					100%;
	height:					100%;
	position:				absolute;
	top:					0;
	left:					0;
	border:					none;
}

.contactform h2
{
	color:					var(--colour);
}

.award
{
	margin:					1.5% 0;
	background-color:		#FAFAFA !important;
}

.award table
{
	width:					100%;
}

.award th span
{
	font-weight:			300;
	font-style:				italic;	
}

.award table img
{
	max-width:				120px;
	max-height:				120px;
	padding-right:			var(--padding);
}

.gallery img
{
	width:100%;
}

/*	======================================================================================================================================================================================
	Tablet 
   	====================================================================================================================================================================================== */	
@media all 
and (min-width : 768px) 
and (max-width : 1023px) 
{
	/* ======================================================================================================================================================================================
	   Grouping 
	   ====================================================================================================================================================================================== */	
	.double, .triple, .quadriple, .quintuple
	{
		width:					48.5%;
	}

	.double:nth-of-type(2n+1), .triple:nth-of-type(2n+1), .quadriple:nth-of-type(2n+1), .quintuple:nth-of-type(2n+1) 
	{
		margin-left:			0 !important;;
	}

	.double:nth-of-type(2n+2), .triple:nth-of-type(2n+2), .quadriple:nth-of-type(2n+2), .quintuple:nth-of-type(2n+2) 
	{
		margin-right:			0 !important;;
	}
	/* ======================================================================================================================================================================================
	   Core
	   ====================================================================================================================================================================================== */
	.footer .contact
	{
		margin:					1.5%;
	}
	
	.footer .navigation
	{
		margin:					0 1.5%;
	}
	
	.footer .details
	{
		margin:					1.5%;
	}
	
	.gallery
	{
		margin:					1.5%;
	}

	.tablethide
	{
		display:				none;
	}
	/* ======================================================================================================================================================================================
	   Blog
	   ====================================================================================================================================================================================== */
	.blog
	{
		margin:					1.5%;
	}
	/* ======================================================================================================================================================================================
	   Cart
	   ====================================================================================================================================================================================== */
	.shopgallery
	{
		margin:					1.5%;
	}
	/* ======================================================================================================================================================================================
	   Site Specific 
	   ====================================================================================================================================================================================== */	
	.award
	{
		margin:					1.5%;
	}
}

/*	======================================================================================================================================================================================
	Desktop 
   	====================================================================================================================================================================================== */	
@media all 
and (min-width : 1024px) 
{
	/* ======================================================================================================================================================================================
	   Variables 
	   ====================================================================================================================================================================================== */
	:root
	{
		--width:				1366px;
		--paddingcore:			2%;
		--margin:				20px;
	}
	/* ======================================================================================================================================================================================
	   Canvas
	   ====================================================================================================================================================================================== */
	[canvas=container]
	{
		padding-top:			0 !important;
		position:				static !important;
	}
	/* ======================================================================================================================================================================================
	   Framework
	   ====================================================================================================================================================================================== */
	.header
	{
		position:				initial;
		display:				table-cell;
		/*vertical-align:			bottom;*/
	}
	
	/*.home
	{
		position:				absolute !important;
	}

	.header:not(.home) 
	{
		height:					350px;
		background-image:		url("../images/custom-home-tree.jpg");
		background-attachment:	fixed;
		background-position:	top;
		background-repeat:		no-repeat;
		border-bottom:			var(--border);
	}*/
	
	.navbar
	{
		/*background:				var(--backgroundrgba);*/
		display:				block;
	}

	.navbar > .container
	{
		max-width:				var(--width);
		padding:				0 var(--paddingcore);
	}

	.wrapper
	{
		margin-top:				0;
		/*margin-bottom:			360px;*/	/* The margin needs to be same height as the .footer class */
	}

	.main
	{
		display:				inline-block;
		vertical-align:			top;
	}
	
	.showside .main
	{
		width:					70%;
	}

	.side
	{
		width:					26%;
		float:					right;
	}

	.footer
	{
		/*position:				absolute;
		bottom:					0;
		left:					0;*/
	}
	/* ======================================================================================================================================================================================
	   Grouping 
	   ====================================================================================================================================================================================== */
	.flex
	{
		display:				flex;
	}

	.double
	{
		width:					48%;
	}

	.double:nth-of-type(2n+1) 
	{
		margin-left:			0 !important;
	}

	.double:nth-of-type(2n+2) 
	{
		margin-right:			0 !important;
	}

	.triple
	{
		width:					31.3%;
	}

	.triple:nth-of-type(3n+1) 
	{
		margin-left:			0 !important;
	}

	.triple:nth-of-type(3n+3) 
	{
		margin-right:			0 !important;
	}

	.quadriple
	{
		width:					22%; 
	}

	.quadriple:nth-of-type(4n+1) 
	{
		margin-left:			0 !important;
	}

	.quadriple:nth-of-type(4n+4) 
	{
		margin-right:			0 !important;
	}

	.quintuple
	{
		width:					19%; 
	}

	.quintuple:nth-of-type(5n+1) 
	{
		margin-left:			0 !important;
	}

	.quintuple:nth-of-type(5n+5) 
	{
		margin-right:			0 !important;
	}
	/* ======================================================================================================================================================================================
	   Logo
	   ====================================================================================================================================================================================== */
	.header > .container .logo img
	{
		/*content:				url("../images/logo.svg");*/
	}
	
	.header > .container .logo
	{
		position:				relative; 
		left:					0;
		margin-left:			0;
	}
	/* ======================================================================================================================================================================================
	   Navigation 
	   ====================================================================================================================================================================================== */
	/* Site */
	.nav.site li
	{
		display:				inline-block;
		margin:					0 calc(var(--padding) / 1.5);
	}

	.nav.site a
	{
		padding:				calc(var(--padding) / 2) 0;
	}

	.nav.site ul
	{
		min-width:				100px;
		position:				absolute;
		padding:				calc(var(--padding) / 2);
		background:				#000000;	/* var(--backgroundrgba); */
		z-index:				4;
		text-align:				initial;	/* use to initialise if 'centre' is used on parent */
	}

	.nav.site ul li
	{
		display:				block;
		margin:					0;
	}
	
	.nav.site ul a
	{
		padding:				0;
	}
	
	/* Category */
	.nav.category a
	{
		padding:				calc(var(--padding) / 8) 0;
	}
	
	.menuiconleft,.menuiconright
	{
		display:				none;
	}
	/* ======================================================================================================================================================================================
	   Search 
	   ====================================================================================================================================================================================== */
	.keyword
	{
		width:					150px; 
		position:				relative;
		float:					right; 
		padding:				0 !important;
		margin:					0 0 0 calc(var(--padding) / 2); 
		color:					#FFFFFF; 
		border:					none;
		background:				none !important; 
		top:					0;
	}
	/* ======================================================================================================================================================================================
	   Light Slider, Light Gallery
	   ====================================================================================================================================================================================== */
	#slider img
	{
		height:					auto !important;
		transform:				none;
	}
	
	.caption span
	{
		font-size:				calc(var(--fontsize) * 2);
	}
	
	.lSAction
	{
		display:				block !important;
	}	

	.lSAction > a
	{
		background:				none !important;
		z-index:				2 !important;
	}

	.lSPrev
	{
		filter:					invert(100%);
		left:					5% !important;
	}

	.lSNext
	{
		filter:					invert(100%);
		right:					5% !important;
	}
	/* ======================================================================================================================================================================================
	   Core
	   ====================================================================================================================================================================================== */	
	.call
	{
		font-size:				22px;
		margin:					0;
	}
	
	.call a
	{
		color:					#000000 !important;
	}
	
	.call span
	{
		display:				inline;
	}
	
	.controls
	{
		position:				relative;
		float:					right;
		padding-top:			calc(var(--padding) / 2.5);
	}

	.side .contactform
	{
		width:					100% !important;
	}
	
	.contactform
	{
		width:					50%;
		max-width:				400px;
		display:				inline-block;
		vertical-align:			top;
		margin-bottom:			var(--padding);
	}

	.contactdetails
	{
		width:					50%;
		display:				inline-block;
		vertical-align:			top;
		max-width:				320px;
	}

	.mailinglistform button
	{
		width:					100%;
		height:					48px;
		float:					none;
	}
	
	.footer .contact
	{
		margin:					0 2%;
	}
	
	.footer .navigation
	{
		border-bottom:			none;
	}
	
	.footer .children
	{
		display:				block;
		margin-bottom:			0;
	}
	
	.footer .details
	{
		margin:					0 2%;
	}
	
	.footer.signoff
	{
		color:					#FFFFFF;
		background-color:		#E1022E;
	}
	
	.footer.signoff a:link,.footer.signoff a:visited
	{
		color:					#FFFFFF;
	}

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

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

	.desktophide
	{
		display:				none !important;
	}
	
	.phonehide, .mobilehide
	{
		display:				initial;
	}
	/* ======================================================================================================================================================================================
	   Blog
	   ====================================================================================================================================================================================== */
	.blog
	{
		margin:					1.5%;
	}  
	/* ======================================================================================================================================================================================
	   Site Specific 
	   ====================================================================================================================================================================================== */
	.award
	{
		margin:					1.5%;
	}
	
	.mapfooter
	{
		height:					175px;
	}
}