
	#login-assocs #forms #login #bottom *,
	#login-assocs #register #reg-button,
	ul#menu > li > a,
	ul#menu > li.active > a {
		color:#000;
	}
	
		
	.btn_text {
		background:#eee;
		border:1px solid #999;
		border-radius:2px;
		color:#233047 !important;
		height:auto;
		line-height:normal;
		padding:0em 0.5em !important;
		width:auto;
	}
	
	.btn_text.opt {
		background:transparent;
		border:1px solid #888;
	}
		
	.emphasise {
		color: #555;
		font-size: 2em;
		font-weight: 300;
		margin-bottom: 1em;
	}
		


	.button a						{font-size:1.4em; line-height:33px; font-weight:500; color:#d3ebff; background-image:none;}

	
	.asset-button					{border:2px solid transparent;
									 border-radius: 0px;
									 cursor:pointer;
									 display:block;
									 float:left;
									 font-size:16px;
									 font-weight:600;
									 padding:12px 15px;
									 text-align:center;
									 text-transform: none;
									 transition: background-color .3s, border-color .3s; }
									 
	.asset-button:hover 			{text-decoration:none;}
									 
	.asset_button:hover				{text-decoration:underline;}	
	.asset_button.adapt_width		{width:auto !important; padding-right:15px; }
	.asset_button.small				{font-size:1em; line-height:22px !important;}

	.asset_button.black				{color:#101010; border:1px solid #101010;}
	.asset_button.black2			{color:#ffffff; border:none; background-color:#101010;}
	.asset_button.black2:hover,
	.asset_button.black_bbm2:hover	{background-color:#383838;}	
	.asset_button.black_bbm2		{color:#79aeca; border:1px solid #ffffff; background-color:#101010;}
	
	.asset_button.white				{color:#fff; border:1px solid #fff;}
	.asset_button.white2			{color:#df780a; border:none; background-color:#fff;}
	
	.asset_button.ltgrey			{color:#aaaaaa; border:1px solid #e0e0e0;}
	.asset_button.ltgrey2			{color:#383838; border:1px solid #aaaaaa; background-color:#e0e0e0;}
	.asset_button.ltgrey2:hover		{background-color:#cccccc;}
	
	.asset_button.darkgrey			{color:#484848; border:1px solid #484848;}
	.asset_button.darkgrey2			{color:#e0e0e0; border:1px solid #484848; background-color:#484848;}
	.asset_button.darkgrey2:hover	{background-color:#181818;}
	
	.asset_button.navy				{color:#1d5290; border:1px solid #335f92;}
	.asset_button.navy2				{color:#ffffff; border:1px solid #335f92; background-color:#335f92;}
	.asset_button.navy2:hover		{background-color:#1d5290;}


	
	#login-assocs #register,
	#login-assocs #register #reg-button {
		background-color: #505c36;
	}
	
	.btn-primary:hover,
	#login-assocs #register #reg-button:hover,
	#login-assocs #login form button:hover {
		background-color: #87A051;
	}
	
	.btn-primary {
		font-size: 20px;
		text-decoration: none;
		text-transform: uppercase;
		margin-top: 1em;
	}
	
	.btn-clear {
		background-color: transparent;
		border: 2px solid #555;
		color: #555 !important;
		width: 50%;
	}

	.btn-learning {
		background-color:#fbfbfb;
		border-color:#a1d534;
		color:#38451C;
	}

	.btn-learning:hover {
		border-color:#6B9F00;
		background-color:#fafafa;
		text-decoration:none;
	}
		

		

/* 	4.0 Aesthetics ............................................... 	*/

	.asset_							{background:url(/_images/_sprites.png) no-repeat;}
	.asset_.button_,
	.asset_.icon_					{display:block;}
	.asset_.button_					{cursor:pointer; float:left;}
	.asset_.show_on_hover			{display:none !important; cursor:pointer;}
	.asset_.show_on_hover:hover		{display:block !important;}
	.asset_.button_.close_cross		{width:19px; height:19px; background-position:-167px -205px;}
	
	.asset_.icon_.pi				{width:91px; height:89px; background-position:-205px -106px;}
	.asset_.button_.search			{width:26px; height:26px; background-position:-163px -169px; display:inline-block;}
	.asset_.more_tut				{width:22px; height:26px; background-position:-52px -108px; display:inline-block; margin-right:5px;}
	.asset_.more_tut:hover			{background-position:-52px -169px;}
	.asset_.more_tut_exp			{width:22px; height:26px; background-position:-52px -139px; display:inline-block; margin-right:5px;}
	.asset_.more_tut_exp:hover		{background-position:-52px -169px;}
	.asset_.more_tut_on				{width:22px; height:26px; background-position:-78px -108px; display:inline-block !important; float:left; margin-right:1px;}
	.asset_.icon_.exampaper_pdf		{width:68px; height:96px; background-position:-309px -113px; float:left;}
	.asset_.icon_.video_popup		{width:208px; height:120px; background-position:-387px -113px; float:left;}
	.asset_.icon_.demo_lessons		{width:36px; height:37px; background-position:-80px -231px; float:right;}
	.asset_.icon_.demo_lessons_w	{width:36px; height:37px; background-position:-166px -282px; float:right;}
	.asset_.icon_.testimonial		{width:36px; height:37px; background-position:-38px -240px; float:right;}
	.asset_.icon_.signup			{width:28px; height:38px; background-position:-124px -281px; float:left;}
	.asset_.icon_.subjects			{width:89px; height:34px; background-position:-449px -285px; float:left;}
	.asset_.icon_.subscribe			{width:26px; height:34px; background-position:-551px -240px; float:left;}
	.asset_.icon_.schools			{width:59px; height:36px; background-position:-16px -282px; float:left;}

	.asset_.icon_.ie				{width:23px; height:22px; background-position:-127px -169px;}
	.asset_.button_.move_pupil		{width:24px; height:22px; background-position:-156px -238px;}
	.asset_.button_.delete_cross	{width:18px; height:22px; background-position:-184px -238px;}
	.asset_.button_.pupil_activity	{width:18px; height:22px; background-position:-207px -238px;}
	.asset_.button_.rename_pupil	{width:27px; height:22px; background-position:-231px -238px;}
		
	
			
	
	
/*	4.2	Colours .................... */
		
	.highlight			{color:#0080ff; background-color:#dfefff; border-color:#a6d3ff;}
	.row_bg_light		{background-color:#fafafa; color:#707090;}
	.row_bg_dark		{background-color:#f5f5f5; color:#686888;}

	.bg_row_light 		{background-color:#f1f1f4;}	
	.bg_row_dark 		{background-color:#fbfbff;}		
	.bg_highlight 		{background-color:#dfefff !important; color:#0080ff !important;}
	

	
/*	pop-up .......................... */

	.video_popup_feature		{ background-color:#f0f0f0;
								  display:none;
								  float:left;
								  height:auto !important;
								  padding:10px 10px 10px 10px;
								  width:auto !important;
								  -webkit-box-shadow: 1px 1px 15px rgba(50, 50, 50, 0.4);
								  -moz-box-shadow: 1px 1px 15px rgba(50, 50, 50, 0.4);
								  box-shadow: 1px 1px 15px rgba(50, 50, 50, 0.4); }

								  
	.popup_frame_feature p		{ padding-top:5px; text-align:center; }




	#info-message {
		background-color: #383838;
		color:#fff;
		display:none;
		float:left;
		padding: 0.75em 0px 1em 0px;
		position:fixed;
		width:100%;
		bottom: 0;
    	z-index: 9999;
	}

	#info-message a {
		color:#A5BDD7;
	}

	#info-message p {
		font-size:1.4em;
	}



/* 	5.0 Buttons ............................................... 	*/

	#button p {margin:0px;}
	
	.button_light_clear,
	.button_glyphicon {
		border:1px solid #ddd;
		border-radius:3px;
		cursor:pointer;
		outline-style:none;
		padding:6px 10px;
	}
	
	.button_light_clear:hover,
	.button_glyphicon:hover {
		background-color:#e0e0e0;
	}
	
	.button_smallest {
		background-color: #334057;
		border-radius: 3px;
		color:#77b4f5;
		font-size: 0.8em;
		padding: 1px 4px 1px 4px;
	}
	
	.button_smallest:hover {
		/*background-color: #233047;*/
		color:#ffc234;
		text-decoration:none;
	}


/* 	6.0 Main content ............................................ 	*/	

	#hover-content,
	#dialogue-window {
		margin-top:20px;
		right:0px;
		width:100%;
		z-index:9;
	}

	
@media (max-width:786px) {
	#hover-content,
	#dialogue-window {
		position:relative;
	}
}



@media (max-width: 1200px) {
	#banner-bg {
		position:relative !important;
	}
}


	.guidance-page #menu,
	.policy-page #menu {
		width:auto !important;
	}
	

	#bottom-banner > div > div > p {
		font-size: 1.3em;
	}

	#bottom-banner {
		clear: both;
	    float: left;
		margin:70px 0px 0px 0px;
		position:relative;
	}
	
	#bottom-banner > div > div > a {
		margin-bottom:0px;
	}
	
	#bottom-banner > div {
		padding-bottom:0px;
	}

@media (max-width: 768px) {
	#jumbo,
	#jumbo > div {
		padding:0px;
	}
}



/*	6.3 Pop-ups ...............................................			*/
	
	#policy_popup > #policy_popup_header,
	#policy_popup > #popup_content {
		float:left;
		width:100%; }
	
	#popup_content { 
		background-color:#333b49;
		color:#fff;
		padding:10px 15px 15px 15px; }
	
	#policy_popup { 
		background-color:#232b39; 
		border-radius:5px;
		padding:20px;
		width:50%;  }
		
@media(max-width:998px) {
	#policy_popup { width:85%; }
	#popup_content p { font-size:1.2em; }
}

	#policy_popup a,
	#policy_popup h2,
	#policy_popup h3 { color:#6990da; }
	
	#policy_popup_close { 
		color:#fff;
		cursor:pointer;
		display:block;
		float:right;
		font-size:2em;
		margin-top:20px; }
	
	#policy_popup_close { 
		color:#fff;
		cursor:pointer;
		display:block;
		float:right;
		font-size:2em;
		margin-top:20px; }

	#policy_popup_close:hover { 
		color:#ddd; }

	#policy_popup,
	#popup_title_icon { display:none; }
	
	#policy_popup ul.scroll-pane.jspScrollable li {
		padding-left:15px;
		padding-right:15px; }

	#policy_popup h2,
	#policy_popup_close,
	#policy_popup > .asset_button {
		margin-top:10px;
	}
	
	#policy_popup_header {
		margin-bottom:10px; }
	
	#policy_popup > .asset_button {
		border-radius:4px;
		float:right;
		font-family:inherit;
		font-size:1.3em;
		font-weight:bold;
	}
	
	#policy_popup > ul li { list-style-type:decimal; }
	
	#policy_popup.terms > ul li {
		list-style-type:none; }						  
			
	

/*	6.5 Contact ...............................................			*/

	#contact {
		padding:0;
		width:100%;
	}

	#contact #intro h1,
	#contact #checked-faq-yet h1 {
		font-size:4em;
	}
	
@media (max-width:998px) {
	#contact #checked-faq-yet h1 {
		font-size:2.5em;
	}
}
@media (max-width:768px) {
	
	#contact #checked-faq-yet, #contact #contact-tel {
		text-align: center;
	}
}

	#contact #intro {
		padding-bottom:2em;
	}

	#contact #contact-enquiry {
		background-color:#c3b38d;
		padding:2em 0;
		width:100%;
	}
	
	#contact #contact-enquiry .btn-blue {
		cursor:pointer;
		float:left;
		padding-left:1em;
		padding-right:1em;
		width:auto;
	}
	
	#contact .g-recaptcha {
		display:block;
		float:left;
		padding-left:0px;
		width:auto;
	}

	
	
	
	
/* 6.13 Customer log-in .......................................			*/
	
	#customer_login #banner-bg {
		position:absolute;
		width:100%;
	}

@media (min-width:998px) {
	#customer_login #banner-bg.quote {
		position:absolute !important;
	}
}
	
	#customer_login img.background,
	#customer_login #intro img {
		width:100%;
	}	

	#customer_login #banner-bg,
	#customer_login #intro,
	#customer_login > #banner-bg > #hover-content > .container > div > *,
	#customer_login #comments,
	#customer_login #send_reset_container,
	#customer_login #btn_signin_other,
	#customer_login #password-settings .form-group,
	#customer_login #password-settings .btn-blue {
		/*clear:both;*/
		float:left;
		width:100%;
	}
	
	#customer_login #intro,
	#customer_login #login_help,
	#customer_login #comments {
		margin:1em 0px;
	}
	#customer_login #new_customers {
		border:4px solid #fff;
		border-radius:5px;
		margin-top:5px;
		padding:0px 15px 15px 15px;
	}

	#assoc-login #send_reset_container,
	#assoc-login #btn_signin_other,
	#customer_login #send_reset_container,
	#customer_login #btn_signin_other {
		display:none;
	}
	
	#assoc-login #send_reset_container,
	#customer_login #send_reset_container {
		margin-top:10px;
		padding-top:20px;
	}
	
	#assoc-login #btn_signin_other,
	#customer_login #btn_signin_other {
		font-weight:bold;
		margin-top:20px;
	}
		
	#customer_login .btn-yellow,
	#customer_login #pw_container button {
		margin-top:1em;
	}
	
	#customer_login > #banner-bg.quote > #hover-content {
		margin-top:0px;
	}
	
	#customer_login #banner-bg.quote > #hover-content #customer-login {
		margin-top:10px;
	}

@media (min-width:1200px) {
	#customer_login > header.minimised > #top {
		padding-left: 30px;
		padding-right: 30px;
	}
}
	
	#customer_login #intro,
	#customer_login #comments {
		padding:1em 0em;
	}
	
	#customer_login #login_message {
		padding:0px 15px;
	}

	#customer_login #intro p,
	#customer_login #login_message p,
	#customer_login #comments p,
	#customer_login #new_customers p {
		font-size:1.2em;
	}

	#customer_login #login_help a {			font-weight:bold; }	
	

	#customer_login #comments h1 {
		font-size:4em;
	}


/* 6.14 Register (home) with wkgb.co.uk .......................................			*/
	#register-home #banner-bg {
		position:relative;
		width:100%;
	}
	
	#register-home img.background {
		width:100%;
		position:absolute;
	}	

@media (max-width:998px) {
	#register-home img.background {
		bottom:60px;
	}
}

	#register-home #banner-bg,
	#register-home #intro,
	#register-home #banner-bg p {
		clear:both;
		float:left;
		width:100%;
	}

	#register-home #customer_registration img,
	#register-home #assoc_registration img {
		height:200px;
	}	

	#register-home #intro,
	#register-home #login_help,
	#register-home #customer_registration img,
	#register-home #assoc_registration img {
		margin:1em 0px;
	}
	
	#register-home #banner-bg h1,
	#register-home #banner-bg p,
	#register-home #customer_registration,
	#register-home #assoc_registration {
		text-align:center;
	}

	#register-home #banner-bg h1 {
		margin-top:1em;
	}

	#register-home #customer_registration,
	#register-home #assoc_registration {
		margin-top:3em;
	}

	#register-home #banner-bg p {
		font-size:1.8em;
	}

@media (max-width:1200px) {
	#register-home #banner-bg p {
		text-shadow:1px 1px 1px #fff;
	}
}


/* 6.15 Association login ........................................			*/
	
	#login-assocs #text img {
		width:100%;
	}

	#login-assocs #bottom {
		margin-top:1em;
	}
	
	#login-assocs #forms #login form input {
		margin-top:0px;
	}
		
	#login-assocs #register h2 {
		color:#87A051;
	}
	
	#login-assocs #register #reg-button:hover {
		color:#fff !important;
	}
	
	#login-assocs #forms #login h2, #login-assocs #register h2 {  /* instead of the current property at ctop.css ln.14281 */
		font-weight:bold;
	}
	
	#login-assocs #register #reg-button {
   		background-color: #fff;
		color: #000 !important;
	}
	
	#login-assocs #forms #login form button,
	#login-assocs #register {
		background-color: #222;
	}

@media (min-width:998px) {
	#login-assocs #send_reset_container > .btn-blue {
		width: 75%;
	    margin-left: 12.5%;
	}
}
	
	#login-assocs #btn_signin_other {
		text-align: center;
		width:100%;
	}
	
	#login-assocs #forms #center {
		background-image: linear-gradient(0deg, #233047 50%, #c3b38d 50%);
	}
	
	
/*	6.16 Thank you page template ............................................			*/


	#register-outcome > img.background,
	#register-outcome #continue,
	#register-outcome #comments {
		float:left;
		padding:0px;
		width:100%;
	}

	#register-outcome #banner-bg {
		position:absolute;
		width:100%;
	}

@media(max-width:768px) {
	#register-outcome #banner-bg {
		position:relative;
	}	
}

	#register-outcome #continue {
		margin-top:2em;
	}

	#register-outcome #comments {
		padding-top:1em;
	}

	#register-outcome #continue,
	#register-outcome #comments {
		padding:1em 0;
	}

	#register-outcome #comments u,
	#register-outcome #comments p {
		padding-bottom:0.75em;
	}
	
	#register-outcome #dialogue-window h1 {
		font-size:4em;
		text-align: center;
	}

	#register-outcome #dialogue-window p,
	#register-outcome #comments u,
	#register-outcome #comments p,
	#register-outcome #continue p {
		font-size:1.4em;
		text-align:center;
	}
	
	
	
	
	

/*	6.18 Customer / association registration ............................................			*/
	
@media (min-width:768px) {
	#assoc_register #banner-bg,
	#customer_register #banner-bg {
		position:absolute;
	}
}
	
	#assoc_register #banner-bg,
	#assoc_register img.background,
	#customer_register #banner-bg,
	#customer_register img.background {
		float:left;
		width:100%;
	}
		
	#assoc_register h1,
	#customer_register h1 {
		font-size:4em;
	}
	
	#assoc_register #register .btn-blue,
	#customer_register #register_customer .btn-blue {
		padding-left:2em;
		padding-right:2em;
	}




	
/* **** FROM WKGB.LESS **** */

	.quotation-page,
	#quote-details,
	header.minimised,
	header.minimised > #top > #minimal > #payment_security > img {
		width:100%;
	}


	header.minimised > #top > *,
	header.minimised > #top > #minimal > *,
	header.minimised > #top > #minimal > #order_help > #assistance > * {
		float:left;
	}



	#instructions-chars {
		padding-top:5px;
	}
	
	label.character_limit {
		background-color: #f4f4f4;
		border-radius: 3px;		
		font-weight:normal;
		padding: 2px 6px;
	}

	label.character_limit.char_limit_reached {
		color:#c00000;
	}


/*	6.20 Login error / failed .........................................			*/

	#error #comments,
	#error #continue,
	#register_failed #comments,
	#register_failed #continue {
		float:left;
		width:100%;
	}
	
	#error #comments,
	#error #continue,
	#register_failed #comments {
		padding:1em 0px;
	}

	#error #banner-caption .btn-blue {
		margin:1em 0px;
	}

	#error #banner-caption p,
	#error #comments p,
	#register_failed #comments p {
		font-size:1.8em;
	}
	
	#error #banner-caption {
		margin-bottom:2em;
	}
	


	form .group.err > input,
	form .group.err > select {					background-color:#FFE5E6;
												margin-bottom: 5px;}

	/*form .group.err > input:valid, 
	form .group.err > select:valid {			background-color:#fff; }*/

	.group span,
	form .group span,
	form .group.err *:valid + span {			color:#990000;
												float: left;
												font-size:0px;
												max-height:0px;
												transition-property: all;
												transition-duration: .3s;
												transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
												width:100%;	}

	.group.err > * + span,
	form .group.err > * + span,
	form .group.err > *:valid + span {			display:block;
												font-size:13px;
												letter-spacing:normal;
												margin-bottom:5px;
												max-height:17px !important;
												padding-top:0px;
												text-align: left;	}


/*	6.21 Page access error ............................................			*/
	
@media (min-width:768px) {
	#error #banner-bg,
	#page_access_error #banner-bg {
		position:absolute;
	}
}
	
	#error #banner-bg,
	#error #comments,
	#error img.background,
	#page_access_error #banner-bg,
	#page_access_error #comments,
	#page_access_error img.background {
		float:left;
		width:100%;
	}
	
	/*#page_access_error h1,
	#page_access_error h2 {
		color:#233047;
	}*/
	
	#page_access_error h1 {
		font-size:4em;
	}
	
	#page_access_error #comments {
		padding:2em 0px 4em 0px;
	}
	
	#page_access_error #banner-bg p {
		font-size:1.8em;
	}
	
	#page_access_error #comments p {
		font-size:2.4em;
	}
	





	.btn-blue.inv {
		background-color:#f0f0f0;
		color:#15233b !important;
	}

	.btn-blue.inv:hover {
		background-color:#e0e0e0;
		color:#05193A !important;
	}



/*	7.0 Navigation ............................................			*/

@media(max-width:1200px) {
	header.minimised > #top.container {
		padding-left:0px;
		padding-right:0px;
	}
}

	
	header #top #login #links {
		margin-left: 0px;
	}
		
	header #top #login #login-form {
		margin-bottom: 0.5em;
	}
	
	.navbar-wkgb {
		border-radius: 0.4em;
	}
	
@media (min-width: 767px) {	
	.navbar-wkgb .navbar-nav > li > a:hover, .navbar-wkgb .navbar-nav > li > a:focus {
		background-color:#40639d;
	}
}
	
	.navbar-wkgb .navbar-nav > .open > a, .navbar-wkgb .navbar-nav > .open > a:hover, .navbar-wkgb .navbar-nav > .open > a:focus {
		color:#233047;
	}
	
	header #top #assistance {
		display:none;
		float:right;
		/*margin-right:15px;*/
	}
	
	header #top #login #links.logged_in div {
		float:left;
		padding:0px 5px;
		width:33%;
		text-align: center;
	}
		
	header #top #login #links.logged_in div > img {
		margin-bottom:5px;
		max-height:60px;
		max-width:100%;
		text-align: center;
	}
		
	header #top #login #links.logged_in a:hover div p {
		text-decoration: underline;
	}
	
@media (min-width: 998px) {
	header #top #login #links.logged_in div {
	    margin-top:1em;
	}
}
	
@media (max-width: 767px) {
	.navbar-nav .open .dropdown-menu {
	    background-color: #eee;
	}
	
	.navbar-wkgb .navbar-nav > li > a,
	.navbar-wkgb .navbar-nav .open .dropdown-menu > li > a {
		font-size:2.3em;
		padding: 0.5em 0.25em 0.5em 0.75em;
	}

	.navbar-wkgb .navbar-nav > .open > a, .navbar-wkgb .navbar-nav > .open > a:hover, .navbar-wkgb .navbar-nav > .open > a:focus {
	    background-color: #c3b38d;
	}
	
	.navbar-wkgb .navbar-toggle {
		border-color: #233047;
	}
	
	.navbar-wkgb .navbar-toggle .icon-bar {
		background-color: #233047;
	}
		
	header #top #login #links.logged_in div > img {
		display:none;
	}
	
	header #top #login #links.logged_in div {
		float:left;
		padding:10px 15px 0px 0px;
		width:auto;
		text-align: left;
	}
}




@media screen and (min-width:998px) { /* LVB 2019-03-25 */	
	header.minimised > #top #minimal {
		width: 100%;
	}
	
	header.minimised > #top #minimal #logo {
		width: 25%;
	}
	
	header.minimised > #top #minimal #order_help {
		width: 45%;
	}
	
	header.minimised > #top #minimal #payment_security {
		width: 30%;
	}	
}


@media screen and (max-width:998px) { /* LVB 2019-03-25 */
	/*header #logo {		
		display:none;
	}*/
	
	header #top #minimal,
	header #top #minimal > * {
		float:left;
	}
	
	header #top #minimal {
		padding-top:15px;
	}
	
	header #top #minimal #logo {
		display:block;
		padding: 0px;
		width:30%;
	}
	
	header #top #minimal #order_help {
		width:70%;
	}
	
	header #top #minimal #order_help > * {
		padding:0px;
	}
	
	header #top #minimal #order_help #call,
	header #top #minimal #order_help #login {
		float:left;
		width:50%;
	}
	
	header #top #minimal #order_help #call {
		display:flex;
		display:-webkit-flex;
		-webkit-flex-flow: column;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		-webkit-align-items: center;
		-webkit-justify-content: center;
	}	
	
	header #top #minimal #order_help #call img {
		height: 15px;
		width: 165px;
	}	

	header #top #minimal #order_help #login {
		padding-left:0px;
		padding-right:0px;
	}	

	header #top #minimal #order_help #login #links,
	header #top #minimal #order_help #login #forgot {
		font-size: 0.72em;
		margin-top:5px;
	}	

	header #top #minimal #order_help #login-form {
		margin: 0em;
	}	
	
	header #top #minimal #order_help #login-form > div {
		background-image:none;
	}
	
	header #top #minimal #order_help #login-form > div input {
		background-color:#eee;
		margin-right: 1%;
		padding:5px 10px;
		width: 49%;
	}

	header #top #minimal #order_help #login-form button {
		border-radius: 2px;
		box-shadow: none;
		font-size: 1em;
		margin: 0px;
		padding: 5px;
	}	
	
	.navbar-wkgb .navbar-nav li > a {
		font-size: 16px;
	}
	
	

	header.minimised > #top.container {
		margin-left:auto;
		margin-right:auto;
		padding-left: 15px;
		padding-right: 15px;
		width:100%;
	}
	
	header.minimised > #top #minimal {
		display: flex;
		justify-content: space-evenly;
		width: 100%;
	}
	
	header.minimised > #top #minimal #logo {
		width: 25%;
	}
	
	header.minimised > #top #minimal #order_help {
		width: 40%;
	}
	
	header.minimised > #top #minimal #payment_security {
		padding: 11px 0px 0 20px;
		width: 25%;
	}	
}





@media screen and (max-width:768px) { /* LVB 2019-03-25 */
	header #logo {		
		display:block;
	}
	
	header #top #minimal {
		padding-top:5px;
	}
	
	/*header #top #minimal #logo,*/
	header #top #minimal #order_help #call {
		display:none;
	}
	
	header #top #minimal,
	header #top #minimal #logo,
	header #top #minimal #order_help,
	header #top #minimal #order_help #login {
		width:100%;
	}
	
	header #top #minimal #order_help #login #links {
		font-size: 1em;
	}	
	
	.navbar-wkgb .navbar-nav li > a {
		font-size: 24px;
		padding: 0.2em 0.25em 0.2em 0.75em;
	}
	
	
	
	

	header.minimised > #top.container {
		margin-left:auto;
		margin-right:auto;
		padding-left: 15px;
		padding-right: 15px;
		width:100%;
	}
	
	header.minimised > #top #minimal {
		display: block;
		width: 100%;
	}
	
	header.minimised > #top #minimal #logo {
		display: block;
		float: left;
		width: 48%;
	}
	
	header.minimised > #top #minimal #order_help {
		float: left;
		margin-top: 3px;
		width: 48%;
	}
	
	header.minimised > #top #minimal #payment_security {
		float: left;
		padding: 11px 0px 0 20px;
		width: 100%;
	}	
}





/*	1. Basic layout .................................................................................................................. */
	
	
	body#login-assocs,
	body#home {
		flex: 1;
		-webkit-flex: 1;
		position: relative;
	}





	section h1:first-of-type,
	section h2:first-of-type,
	#login-assocs #objectives > div > div {
		margin-top:calc(10px + 1vw);
	}



	
	
		

    nav #settings-menu-toggle {
		background-color: transparent;
		background-image: none;
		border: none;
		float: right;
		margin: 8px 10px 8px 15px;
		padding: 0px;
		position: relative;
	}
	
    nav #settings-menu-toggle:hover {
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
	}
	
	nav #settings-menu-toggle > span {
		background-color: #9ecf34;
		border-radius: 1px;
		display: block;
		height: 3px;
		margin: 3px 0px;
		width: 20px;
	}	
	
	@keyframes nav-settings-open {
		0% {	transform: translateX(0); }
		100% {	transform: translateX(-301px); }
	}
	
	@keyframes nav-settings-closed {
		0% {	transform: translateX(-301px); }
		100% {	transform: translateX(0); }
	}

	nav #settings {
		flex-direction: column;
		-webkit-flex-direction: column;
		align-items:flex-start;
		-webkit-align-items:flex-start;
		backdrop-filter:blur(10px) brightness(0.99);
		-webkit-backdrop-filter:blur(10px) brightness(0.99);
		height:100vh;
		list-style-type:none;
		padding:20px 15px;
		position:absolute;
		right:-301px;
		top:80px;
		width:300px;
	}

	nav #settings.open {
		animation: nav-settings-open .4s ease 0s 1 normal forwards;
		-webkit-animation: nav-settings-open .4s ease 0s 1 normal forwards;
		box-shadow: -20px 15px 20px rgb(50 50 50 / 7%);
	}

	nav #settings.closed:not(.preload) {
		animation: nav-settings-closed .4s ease 0s 1 normal forwards;
		-webkit-animation: nav-settings-closed .4s ease 0s 1 normal forwards;
		box-shadow:0px 0px 0px rgba(50, 50, 50, 0);
	}
	
	nav #settings li,
	nav #settings li a {
		width:100%;		
	}
	
	nav #settings li {
		padding:10px 0px;
	}
	
	nav #settings li a {
		border-color:#f0f0f0;
		color:#333;
		font-size:1em;
		padding-left:15px;
	}
	
	nav #settings li a:hover {
		color:#405E00;
		border-color:#9ecf34;
	}

	nav #settings li.greeting {
		color: #73a900;
	}
	
	
	.sticky_header {
		z-index:1;
	}	
		



	#breadcrumb {
		flex-direction:column;
		-webkit-flex-direction:column;
		/*border-bottom: 2px solid #e8f1d6;*/
		padding-bottom:3px;
		position:absolute;
		top:0px;
		width: 1170px;
	}

	#breadcrumb > ol {
		list-style-type:none;
		padding-left:0px;
		width:100%;
	}

	#breadcrumb > ol li {
		color:#555;
		float:left;
		font-size:0.7em;
		font-weight: 500;
		letter-spacing: 0.3px;
		padding: 0;
		width:auto;
	}

	#breadcrumb > ol li.sel {
		color:#000;
	}

	#breadcrumb > ol li:after {
		color:#9ecf34;
		content:'\e080';
		font-family: 'Glyphicons Halflings';
		font-size:10px;
		margin-left:8px;
		margin-right:8px;
		position: relative;
	}

	#breadcrumb > ol li:last-of-type:after {
		content: '';
		margin-right:0px;
	}

	#breadcrumb > ol li a {
		color:inherit;
	}




/*	Flex ............................................................................... */

	nav #settings,
	#breadcrumb,
	.tiger #heading {
		display: flex;
		display: -webkit-flex;
	}
	
	/*#breadcrumb,*/
	.tiger #heading {
		justify-content: center;
		-webkit-justify-content: center;
		flex-direction: row;
		-webkit-flex-direction: row;
	}



/*	General appearance .................................................................. */

	.tiger #heading,
	.tiger .ltgrey_tiger,
	#login-assocs.error .panel,
	#settings.tiger .panel {
		background-repeat:no-repeat !important;
		background-size: 70vw !important;
	}
	
	.tiger #heading {
		background:url('/_images/logo-f8f8f8.svg') center -5vw; 
		height:270px;
		position: relative;
		width:100%;
	}
	
	.tiger #heading img {
		max-height: 200px;
		margin-top: 30px;
		width: 180px;
	}
	
	.tiger .ltgrey_tiger {
		flex:1;
		-webkit-flex:1;
		background-color:#f8f8f8;
		float:left;
		background:#f4f4f4 url('/_images/logo-eeeeee.svg') center -26vw; 		
		margin-top:0px;
	}
	
	
	#home .tiger #heading,
	#login-assocs.registration_complete #heading {
		background:url('/_images/wado-ryu-emblem.svg') center 0vw;
		
	}
	
	#home .tiger .ltgrey_tiger,
	#login-assocs.registration_complete .ltgrey_tiger {
		background:#f4f4f4 url('/_images/wado-ryu-emblem-eee.svg') center -20vw; 
		
	}
	
	
	#activation #heading {
		background:url('/_images/goju-ryu-emblem.svg') center -5vw;		
	}
	
	#activation .ltgrey_tiger {
		background:#f4f4f4 url('/_images/goju-ryu-emblem-eee.svg') center -25vw; 		
	}

	#login-assocs.error .panel {
		background:url('/_images/shotokan-emblem.svg') center -50vw;		
		min-height:15vw;
	}	

	#settings.tiger .panel {
		background:url('/_images/shotokan-emblem.svg') center -60vw;		
		min-height:15vw;
	}
	
















/*	Media queries .................................................................. */


	@media (max-width: 991px) {
		
		#breadcrumb > ol {
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			-webkit-flex-direction: row;
			align-items: center;
			-webkit-align-items: center;
		}
		
				
		nav #settings-menu-toggle {
			height:30px;
		}
		
		nav #settings-menu-toggle > span {
			height:4px;
			margin:4px 0px;
			width:25px;
		}
		
		nav #settings {
			justify-content: initial;
			-webkit-justify-content: initial;
			height:85vh;
			top:75px;
		}
		
		nav #settings li {
			padding: 10px 0px 0px;
			text-align: right;
		}
		
		nav #settings li.greeting {
			padding-right:15px;
		}
		
		nav #settings li a {
			font-size:2rem;
			margin-top:0px;
			padding: 10px 15px;
		}

		#breadcrumb {
			width: 100%;
		}
		
		#breadcrumb > ol {
			justify-content:center;
			-webkit-justify-content:center;
		}	
		
		#breadcrumb > ol li:after {
			margin-left:5px;
			margin-right:5px;
		}
		
		.tiger #heading {
			height:300px;
			padding-top: 15px;
		}
		
		
		section#start-learning {
			margin: 0px;
		}	
			
		.tiger .ltgrey_tiger {
			background-position-y:-36vw;
		}
		
		#login-assocs.error .panel,
		#settings.tiger .panel {
			background-image: none !important;
		}
		
	}
	


	@media screen and (min-width: 992px) {		
		nav #settings .xs_only {
			display:none;
		}
	}
	