/*	======================================================================================================================================================================================
	Variables 
	====================================================================================================================================================================================== */	
:root
{
	/* Colours */
	--primary:				#B31329;
	--secondary:			#F9ECEE;
	--fontcolour:			#606060;
	--smallfontcolour:		#909090;
	--navigation:			#FFFFFF;
	--white:				#FFFFFF;
	--light:				#FFF7F8;
	--lightrgba:			rgba(253,250,251,0.2);
	--dark:					#1E1E1E;
	--darkrgba:				rgba(15,15,15,0.9);
	--danger:				#ED1848;
	--success:				#4EB149;
	--bordercolour:			#F9ECEE;

	--width:				100%;		/* 1440px */
	--widthnarrow:			800px;
	--widthsmall:			400px;
	--spacingcore:			20px;
	--spacing:				20px;
	--spacingtop:			89px;		/* required when menu is fixed */
	--margin:				0 0 20px 0;
	--imageratio:			56.25%;		/* 16:9 Aspect Ratio */
	--transition:			200ms ease;
	--border:				1px solid var(--bordercolour);
	--textshadow:			0 1px 1px var(--bordercolour);
	--boxshadow:			0 0 20px 0 rgba(0,0,0,0.1);
	--fontsize:				16px;
	--lineheight:			2;
	--smallfont:			calc(var(--fontsize) * 0.80);
	--borderradius:			10px;
}


/*	======================================================================================================================================================================================
	Fonts
	====================================================================================================================================================================================== */
/*@font-face
{
	font-family:			Myriad;
	src:					url("../fonts/myriad-set-pro-text.ttf");
	font-style:				normal;
	font-weight:			400;
}*/

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


/*	======================================================================================================================================================================================
	Input 
	====================================================================================================================================================================================== */
input
{
	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);
}

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);
	box-shadow:				none;
}

select
{
	background-color:		var(--light);
	border:					none;
	border-bottom:			2px solid var(--bordercolour);
	border-radius:			4px;
}

textarea
{
	background-color:		var(--light);
	border:					none;
	border-bottom:			2px solid var(--bordercolour);
	border-radius:			4px;
}

/* Label Transition */
.labelcontainer label .title
{
	color:					#909090;
	top:					16px;
	font-weight:			300;
}


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

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

}

h1, h1 a:link, h1 a:visited
{
/* 	font-family:			"Roboto Condensed",sans-serif; */
	font-size:				calc(var(--fontsize) * 3);
	color:					var(--white);
	font-weight:			400;
	line-height:			1;
	letter-spacing:			-1px;
/* 	text-transform:			uppercase; */
}

h2, h2 a:link, h2 a:visited
{
/* 	font-family:			"Roboto Condensed",sans-serif; */
	font-size:				calc(var(--fontsize) * 1.9);
	color:					var(--dark);
	font-weight:			500;
}

h3, h3 a:link, h3 a:visited
{
	font-size:				calc(var(--fontsize) * 1.4);
	color:					var(--dark);
	font-weight:			400;
}

h4, h4 a:link, h4 a:visited
{
	font-size:				calc(var(--fontsize) * 1.2);
	color:					var(--dark);
	font-weight:			400;
}

/* 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);
}

.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;
	top:					0;
	left:					-280px;
	background-color:		var(--white);
}

.oncanvas.left
{
	left:					0;
}

.offcanvas.right
{
	width:					280px;
	top:					0;
	right:					-280px;
	background-color:		var(--white);
	border-left:			var(--border);
/* 	padding-bottom:			calc(var(--spacingtop) * 2); */
}

.oncanvas.right
{
	right:					0;
}

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

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

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

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


/*	======================================================================================================================================================================================
	Framework
	====================================================================================================================================================================================== */
header
{
	width:					100vw;
	position:				relative;
	z-index:				3;
}

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

section
{
	width:					100vw;
	position:				relative;
}

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

.module
{
	width:					100%;
}

.module > .container
{
	width:					100%;
	max-width:				var(--width);
	padding:				0 var(--spacingcore) var(--spacingcore) var(--spacingcore);	/* modules display after a 'section' which contain vertical space */
}

footer
{
	width:					100vw;
}

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

footer:first-of-type > .container > .grid
{
	padding:				calc(var(--spacing) * 2);
	background:				var(--primary);
	border-radius:			var(--borderradius);
	text-align:				center;
	color:					var(--white);
	font-size:				calc(var(--fontsize) * 1.3);
	line-height:			1.5;
}

footer:first-of-type > .container table
{
	color:					var(--white);
	font-size:				calc(var(--fontsize) * 1.3);
	line-height:			1.2;
	font-weight:			300;
}

footer:first-of-type > .container table td
{
	padding:				calc(var(--spacing) / 2);
}

footer:first-of-type > .container table td:first-child
{
	font-size:				45px;
	font-weight:			700;
}

/*footer.signoff
{
	text-align:				right;
}

footer.signoff > .container > .grid
{
	background:				none;
}*/


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

.module.post > .container aside
{
	padding-right:			var(--spacing);/*  0 0 var(--spacing); */
}


/*	======================================================================================================================================================================================
	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 > .logo
{
	width:					95px;
	position:				absolute;
	top:					100px;
	left:					var(--spacingcore);
	display:				none;
}

header > .container > .logonegative
{
	width:					100px;
	text-align:				center;
	position:				absolute; 
	left:					50%;
	margin-left:			-50px;
}

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

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

footer > .container .logo
{
	width:					100px;
	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
{
	display:				block;
	padding:				calc(var(--spacing) / 2) 0;
}

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

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;
}

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

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

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

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(--white);
}

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

nav.primary.oncanvas a:link, 
nav.primary.oncanvas a:visited
{
	color:					var(--dark);
}

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

nav.primary.oncanvas .current a, 
nav.primary.oncanvas li:hover > a	/* active link */
{
	color:					var(--primary);
}


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

.secondarybutton
{
	top:					50%;
    transform:				translateY(-50%);
	padding:				calc(var(--spacing) / 1.5);
	margin-top:				calc(var(--spacing) / 2);
	position:				absolute;
	cursor:					pointer;
	text-align:				center;
	line-height:			1;
	left:					-34px;
	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:					4px auto;
    transition:				var(--transition);
}

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

.menubar2
{
	opacity:				0;
}

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

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


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


/*	======================================================================================================================================================================================
	Light Slider
	====================================================================================================================================================================================== */
/* Slider */
#slider
{
	height:					800px !important;
}

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

#slider section.caption
{
	position:				absolute;
	bottom:					100px;
}

/* #slider .caption span */
#slider section.caption > .container > div
{
	color:					var(--white);
	text-align:				center;
}

#slider section.caption > .container > div h2
{
	color:					var(--white);
}

/* Carousel */
.carousel > .lSSlideOuter
{
	/*width:					calc(100vw - calc(var(--spacingcore) * 2));*/
	max-width:				760px;	/* required for mode:'slide' */
}

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

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

.carousel > .lSSlideOuter > .lSPager.lSGallery > li	/* thumbnails */
{
	width:					100px !important;
	margin:					0 calc(var(--spacing) / 4) !important;
}

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

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

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

.lSPrev
{
	left:					5% !important;
}

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

.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
	====================================================================================================================================================================================== */
.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;
}


/*	======================================================================================================================================================================================
	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
{
	display:				none;
	float:					right; 
	z-index:				3;
	margin-top:				23px;
	background-color:		var(--lightrgba);
	border-radius:			var(--borderradius);
	padding:				calc(var(--spacing) / 8) calc(var(--spacing) / 2);
}
	
.controls > div
{
	display:				inline-block;
}

.controls > div:not(:first-child)
{
	margin-left:			calc(var(--spacing) * 1.5);
}

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

.hero
{
	position:				absolute;
	max-height:				700px;
	overflow:				hidden;
/* 	background-color:		var(--primary); */
	/*z-index:				1;*/
}

.hero > .container
{
	max-width:				none;
/* 	max-height:				800px; */
	padding:				0;
/* 	overflow:				hidden; */
/* 	position:				inherit; */
/* 	bottom:					0; */
}

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

.mailing h2
{
	display:				inline;
}

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

/* Contact */
.contactform, .contactdetails
{
	width:					100%;
	max-width:				var(--widthsmall);
	display:				inline-block;
	vertical-align:			top;
}
		
.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:					auto calc(var(--spacing) / 4);
	color:					var(--white);
}

.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);
}

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

.hidden
{
	display:				none;
}

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

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

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

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

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

/* Google reCaptcha */
.grecaptcha-badge
{
	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;
}


/*	======================================================================================================================================================================================
	Gallery
	====================================================================================================================================================================================== */
.gallery
{
	position:				relative;
}

.gallery img
{
	cursor:					pointer;
	border-radius:			var(--borderradius);
}

.gallery > .short
{
	/*width:					100%; 
	padding:				var(--spacing);
	position:				absolute; 
	left:					0; 
	bottom:					0; 
	background:				rgba(255,255,255,0.9); 
	overflow:				hidden;*/
	margin:					var(--spacing) 0;
	text-align:				center;
}

.gallery > .long
{
	text-align:				center;
}


/*	======================================================================================================================================================================================
	Post
	====================================================================================================================================================================================== */
.posts
{
	background-color:		var(--white);
/* 	border:					var(--border); */
	border-radius:			var(--borderradius);
	margin-bottom:			var(--spacing);
	overflow:				hidden;
	box-shadow:				var(--boxshadow);
	/*padding:				var(--spacing);*/
}

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

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

.posts span
{
	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);
}

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

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

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

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


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

.payment > div
{
	margin-bottom:			var(--spacing);
	padding:				var(--spacing);
	border:					var(--border);
}

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

.payment i
{
	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);
}

footer a:link, footer a:visited 
{
	color:					var(--white);
	text-decoration:		none;
	transition:				var(--transition);
}

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

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

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


/*	======================================================================================================================================================================================
	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-envelope,
.contactdetails .fa-phone,
.contactdetails .fa-building
{
	margin-right:			calc(var(--spacing) / 2);
	color:					var(--primary);
}*/

.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 .controls .fa-search
{
	font-size:				18px;
	vertical-align:			middle;
	cursor:					pointer;
	color:					var(--white);
}

header .controls .fa-phone
{
	font-size:				18px;
	vertical-align:			middle;
	color:					var(--white);
}

header .call .fa-phone
{
	color:					var(--dark);
}

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

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

/* Blog */
.fa-ellipsis-v
{
	font-size:				30px;
	color:					var(--darkrgba);
}

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

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

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

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

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

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

.payment .fa-chevron-down, .payment .fa-chevron-up
{
	float:					right;
	cursor:					pointer;
}

.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-envelope,  */
/* footer .fa-phone, */
/* footer .fa-globe,  */
/* footer .fa-calendar-alt, */
/* footer .fa-pencil-alt */
footer .fa-arrow-right
{
	margin-right:			calc(var(--spacing) / 2);
}

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);
}

footer .fa-arrow-right
{
	color:					var(--primary);
}

footer .fa-map-marker-alt
{
	color:					var(--primary);
	font-size:				calc(var(--fontsize) * 2);
    width:					28px;
    height:					28px;
    padding:				calc(var(--spacing) * 0.8);
    background-color:		var(--white);
    border-radius:			50%;
    text-align:				center;
    line-height:			1;
}

/* Social */
.fa-facebook-f, 
.fa-pinterest-p, 
.fa-instagram, 
.fa-twitter, 
.fa-linkedin-in, 
.fa-youtube, 
.fa-flickr, 
.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-flickr:hover
{
	color:					#FF0084;
}

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

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

/* Site Specific */
.callus .fa-phone
{
	color:					#00D5A1;
	margin-right:			calc(var(--spacing) / 2);
}

.fa-folder,
.fa-newspaper
{
	color:					var(--primary);
	margin-right:			calc(var(--spacing) / 2);
}

.posts .fa-clock
{
	margin-right:			calc(var(--spacing) / 2);
}

.enrolmentform .fa-user-alt,
.enrolmentform .fa-phone-square,
.enrolmentform .fa-graduation-cap,
.enrolmentform .fa-calendar-check,
.enrolmentform .fa-question-square
{
	color:					var(--primary);
	margin-right:			calc(var(--spacing) / 2);
}


/*	======================================================================================================================================================================================
	Video 
	====================================================================================================================================================================================== */
/*.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;
}*/


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

.mapcontact
{
	height:					300px;
}


/*	======================================================================================================================================================================================
	Site Specific - '!important' is required on background-color for items which will appear in TinyMCE in the admin
	====================================================================================================================================================================================== */
/* Normalise */
input,
select,
textarea
{
	background-color:		var(--white);
	border:					var(--border);
	border-radius:			var(--borderradius);
}

input[type="button"],
input[type="submit"],
input[type="reset"],
button[type="button"],
button[type="submit"]
{
/*     width:					auto; */
/*     border:					2px solid var(--bordercolour); */
    border-radius:			var(--borderradius);
	box-shadow:				none;
	text-transform:			unset;
	background-color:		var(--primary);
	color:					var(--white);
	padding:				calc(var(--spacing) / 4) var(--spacing) !important;
	border-radius:			20px;
}

footer input[type="button"],
footer input[type="submit"],
footer input[type="reset"],
footer button[type="button"],
footer button[type="submit"]
{
	background-color:		var(--white);
	color:					var(--dark);
}

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

.input:focus ~ .bar:before, .input:focus ~ .bar:after
{
	width:					unset;
}

svg
{
	position:				absolute;
	bottom:					0;
	width:					100%;
	height:					5vw;
	/* set height to pixels if you want angle to change with screen width */
}

/* Global */
hr
{
	margin-bottom:			var(--spacing);
	border-color:			var(--secondary);
}

.line
{
	width:					80px;
	height:					2px;
	background-color:		#CE6472;
	margin:					var(--spacing) auto;
}

.kun
{
	width:					150px;
	margin-left:			calc(var(--spacing) * 2);
}

.circle
{
	width:					90px;
	height:					90px;
	padding:				var(--spacing);
	background-color:		var(--secondary);
	border-radius:			50%;
	text-align:				center;
}

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

.introduction hr
{
	width:					120px;
	border-top:				3px solid var(--white);
	display:				inline-block;
}

section.main
{
	position:				relative;
	top:					-60px;
	margin-bottom:			-60px;
}

section.main > .container,
section.module > .container
{
	max-width:				1280px;
}

section.main > .container > .inside,
section.module > .container > .inside
{
	background-color:		var(--white);
	border-radius:			var(--borderradius);
	box-shadow:				var(--boxshadow);
	padding:				var(--spacing);
}

section.main > .container .classes > div
{
	background-color:		var(--white);
	border-radius:			var(--borderradius);
	box-shadow:				var(--boxshadow);
	padding:				calc(var(--spacing) / 2) var(--spacing);
}

footer .social
{
	width:					20px;
	padding:				calc(var(--spacing) / 2);
	background-color:		var(--white);
	border-radius:			50%;
	color:					var(--dark);
	margin-top:				var(--spacing);
}

/* Home */
.introduction
{
	color:					var(--white);
	margin-bottom:			40px;
}

.introduction > .container
{
	position:				relative;
}

.introduction > .container > .inside
{
	max-width:				700px;
	display:				inline-block;
}

.introduction h1
{
	margin-top:				var(--spacing);
}

.introduction a:link,
.introduction a:visited
{
	color:					var(--secondary);
	text-decoration:		underline;
}

.callus
{
	width:					150px;
	padding:				calc(var(--spacing) / 1.5) var(--spacing);
	background-color:		var(--white);	
	border-radius:			var(--borderradius);
	position:				relative;
	text-align:				center;
	display:				inline-block;
	margin:					var(--spacing) auto;
	box-shadow:				var(--boxshadow);
	color:					#4D4D4D;
	font-weight:			400;
	cursor:					pointer;
}

.callus > .yellowdot
{
	width:					20px;
	height:					20px;
	position:				absolute;
	top:					-10px;
	right:					-10px;
	border-radius:			50%;
	background-color:		#FFCE4C;
}

.why
{
	text-align:				center;
	line-height:			1.5;
}

.why > div > div > div
{
	padding:				var(--spacing);
}

.courses
{
	line-height:			1.5;
}

.courses > .container > .grid > div:last-child img
{
	margin:					var(--spacing) 0;
}

.courses > .container > .grid > div:first-child
{
	order:					2;
}

.courses > .container > .grid > div:last-child
{
	order:					1;
}

.course
{
	max-width:				620px;
	padding:				var(--spacing);
	margin:					var(--spacing) auto;
}

.course:hover
{
	background-color:		var(--white);	
	border-radius:			var(--borderradius);
	box-shadow:				var(--boxshadow);
}

.course > .circle,
.course > h4
{
	display:				inline-block;	
	margin-right:			var(--spacing);
}

.course button
{
	float:					right;
}

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

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

.offer
{ 
	padding:				var(--spacing);
	box-shadow:				var(--boxshadow);
	border-radius:			var(--borderradius);
	overflow:				hidden;
	background-color:		var(--white);
	margin-top:				var(--spacing) !important;
	position:				relative;
	/*opacity:				0;*/
}

.offer .free
{
	position:				absolute;
	left:					-25px;
	top:					-25px;
}

.offer img
{
	width:					85px;
    position:				relative;
    right:					-28px;
    float:					right;
}

/* Courses */
.grade > .circle
{
	width:					60px;
	height:					60px;
	margin:					0 var(--spacing) var(--spacing) 0;
	display:				inline-block;
	cursor:					pointer;
}

.grade > .circle > h3
{
	line-height:			1;
	margin:					0;
}

.grade > .circle.active
{
	background-color:		var(--primary);
}

.grade > .circle.active h3
{
	color:					var(--white);
}

.details > div
{
	display:				none;
	background-color:		var(--light);
    padding:				var(--spacing);
    border-radius:			var(--borderradius);
}

/* Corporate */
.outcall .circle
{
	float:					left;
	margin-right:			var(--spacing);
}

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

.businesscourse ul
{
	list-style:				none;
}

.businesscourse ul li::before
{
	content:				"●";
	color:					var(--primary);
	display:				inline-block; 
	width:					1em;
}

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

.businesscourse .beginadvance
{
	max-width:				380px;
	text-align:				center; 
	background-color:		var(--white);
	border-radius:			var(--borderradius);
	color:					var(--dark);
	font-size:				calc(var(--fontsize) * 1.2);
	box-shadow:				var(--boxshadow);
}

.businesscourse .beginadvance > span
{
 	padding:				calc(var(--spacing) / 4) var(--spacing);
 	display:				inline-block;
	cursor:					pointer;
}

.businesscourse span.selected
{
	border-bottom:			4px solid var(--primary);
}

.advancedcourse
{
	display:				none;
}

.main table
{
	width:					100%;
    display:				inline-table;
    overflow-x:				auto;
    white-space:			nowrap;
    background-color:		var(--white);
    border-radius:			var(--borderradius);
    overflow:				hidden;
}

.main table th
{
	padding:				calc(var(--spacing) / 1.5);
	color:					var(--primary);
	background-color:		var(--light);
}

.main table th:nth-child(1)
{
	width:					25%;
}

.main table th:nth-child(2),
.main table th:nth-child(3)
{
	width:					20%;
}

.main table th:nth-child(4)
{
	width:					35%;
}

.main table td:first-child
{
	color:					var(--primary);
	background-color:		var(--light);
}

.main table tr
{
	border-bottom:			2px dashed var(--bordercolour);
}

.main table td
{
	padding:				calc(var(--spacing) / 1.5);
	line-height:			1.5;
}

/* Enrol */
.enrolmentform .grid
{
    grid-row-gap:			0;
} 

.studiedbefore
{
	display:				none;
}  

/* Cartoon */
.cartoon
{
	margin-bottom:			-80px;
}

.cartoon.japanese
{
	max-width:				260px;
    display:				block;
	margin-top:				-30px;	
	margin-bottom:			-100px;
}

.cartoon.chinese
{
    max-width:				260px;
    display:				block;
    margin-top:				-30px;
    margin-bottom:			-80px;
}

.cartoon.fees
{
    margin-top:				-50px;
    margin-bottom:			-80px;
}

.cartoon.level
{
    max-width:				300px;
    display:				block;
    margin-top:				-40px;
    margin-bottom:			-90px;
}

.cartoon.contact
{
	margin-bottom:			-80px;
}


/*	======================================================================================================================================================================================
	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;
	}

	.tablethide
	{
		display:				none;
	}

	/*	======================================================================================================================================================================================
		Site Specific - '!important' is required on background-color for items which will appear in TinyMCE in the admin
		====================================================================================================================================================================================== */	
	.introduction > .container > .inside
	{
		max-width:				450px;
		display:				inline-block;
	}

	/* Cartoon */
	.cartoon
	{
		max-width:				300px;
		position:				absolute;
		top:					200px;
		right:					0;
		margin-top:				unset !important;
		margin-bottom:			unset !important;
	}
	
	.cartoon.japanese
	{
		max-width:				300px;
		top:					200px;
	}

	.cartoon.chinese
	{
		max-width:				300px;
		top:					200px;
	}

	.cartoon.fees
	{
		max-width:				400px;
		top:					0;
	}

	.cartoon.level
	{
		max-width:				260px;
		top:					60px;
	}

	.cartoon.contact
	{
		max-width:				340px;
		top:					0;
	}
}
/*	======================================================================================================================================================================================
	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-x:				unset !important;
		transition:				unset;
		padding:				unset !important;
		border:					unset !important;
		background-color:		unset;
	}

	/*	======================================================================================================================================================================================
		Framework
		====================================================================================================================================================================================== */
	.sectioningrid > aside > .container
	{
		padding-left:			0;
	}

	/*	======================================================================================================================================================================================
		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 .logonegative
	{
		display:				inline-block;
		text-align:				unset;
		position:				unset;
		left:					unset;
		margin-left:			unset;
	}

	header > .container > .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 ul li a
	{
		padding:				calc(var(--spacing) / 4) calc(var(--spacing) / 2);
	}

	nav.primary .current a, 
	nav.primary li:hover > a
	{
		color:					var(--white);
		background:				var(--lightrgba);
		border-radius:			var(--borderradius);
	}

	nav.primary ul ul	/* sub menu */
	{
		min-width:				120px;
		position:				absolute;
		z-index:				4;
		padding:				var(--spacing);
		background:				var(--white);
		border-radius:			var(--borderradius);
		line-height:			var(--lineheight);
		text-align:				initial;	/* use to initialise if 'centre' is used on parent */
	}
 
	nav.primary ul ul li	/* sub menu */
	{
		display:				block;
	}

	nav.primary ul ul li a	/* sub menu */
	{
		padding:				0;
		
	}
	
	/* Secondary */
	nav.secondary ul li a
	{
		padding:				calc(var(--spacing) / 8) 0;
	}
	
	/* Links */
	nav.primary ul ul li a:link,
	nav.primary ul ul li a:visited
	{
		color:					var(--dark);
	}

	nav.primary ul ul li a:hover,
	nav.primary ul ul li.current a
	{
		color:					var(--primary);
	}

	/* Hamburger */	
	.primarybutton, .secondarybutton
	{
		display:				none;
	}
	

	/*	======================================================================================================================================================================================
		Search 
		====================================================================================================================================================================================== */
	.keyword
	{
		right:					0;
	}

	/*	======================================================================================================================================================================================
		Light Slider, Light Gallery
		====================================================================================================================================================================================== */	
	.caption span
	{
		font-size:				calc(var(--fontsize) * 2);
	}

	/*	======================================================================================================================================================================================
		Core
		====================================================================================================================================================================================== */		
	.controls
	{
		display:				block;
	}

	.hero
	{
		max-height:				700px;	
	}

	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;
	}
	
	.phonehide, .mobilehide
	{
		display:				initial;
	}

	/*	======================================================================================================================================================================================
		Map
		====================================================================================================================================================================================== */
	.mapfooter
	{
		height:					175px;
	}
	
	.mapcontact
	{
		height:					100%;
	}

	/*	======================================================================================================================================================================================
		Site Specific - '!important' is required on background-color for items which will appear in TinyMCE in the admin
		====================================================================================================================================================================================== */	
	section.main > .container > .inside,
	section.module > .container > .inside
	{
		padding:				calc(var(--spacing) * 2);
	}

	.introduction > .container > div
	{
		max-width:				700px;
		display:				inline-block;
	}
	
	.courses > .container > .grid > div
	{
		order:					unset !important;
	}

	.verticalruler
	{
		width:					60px;
		transform:				rotate(90deg);
		display:				inline-block;
		border-top:				1px solid var(--white);
		margin-bottom:			3px;
	}
	
	.offer
	{ 
		overflow:				unset;
	}
	
	.table
	{
		width:					800px;
		display:				block;
		overflow-x:				auto;
		border-collapse:		collapse;
	}

	.table th, .table td
	{
		vertical-align:			top;
		border:					var(--border);
		padding:				var(--spacing);
	}
	
	.table th
	{
		width:					150px;
	}

	.table td
	{
		width:					650px;
	}

	footer > .container > .grid > div:not(:last-child)
	{
		border-right:			1px solid var(--lightrgba);
	}

	.offer
	{
		text-align:				center;
	}

	.offer img
	{
		width:					unset;
		float:					unset;
		right:					unset;
	}
	
	.module > .container aside
	{
		border-right:			2px dashed var(--bordercolour);
	}

	/* Cartoon */	
	.cartoon
	{
		position:				absolute;
		top:					0;
		right:					0;
	}

	.cartoon.japanese
	{
		max-width:				unset;
		margin-top:				80px;
	}

	.cartoon.chinese
	{
		max-width:				unset;
		margin-top:				60px;
	}

	.cartoon.fees
	{
		margin-top:				-20px;
		margin-bottom:			-80px;
	}

	.cartoon.level
	{
		max-width:				360px;
		margin-top:				80px;
	}

	.cartoon.contact
	{
		max-width:				520px;
		margin-bottom:			unset;
	}
}