@media screen and (max-device-width: 480px){
	
h1					{text-align:left!important;margin-left: 5px;}
big					{text-align:left!important;}
h1.biggerheading, h2.biggerheading	{font-size:25px}
	
	
a:link, a:visited, a:active{ font-family: Lato, sans-serif; font-size: 16px; line-height: 1.5em; font-weight: 800; font-style: normal; text-decoration: underline; color: #555555;}

a:hover{font-size: 16px; line-height: 1.5em; font-weight: bold; font-style: normal; text-decoration: underline; padding-right: 0px; padding-left: 0px; padding-top: 5px; padding-bottom: 5px; margin-right: 0px; margin-left: 0px; margin-top: 0px; margin-bottom: 0px; color: #00C800; border-color: #7D7D7D;}


strong {
font-family: Lato, sans-serif;
line-height: 28px;
font-weight: 800; /* Heavy over the Regular body text, as the main site (2026-11-11) */
font-style: normal;
color: #555555; /* mainfontcolour */
}



body { font-family: Lato, sans-serif; font-size: 14px; line-height: 1.5em; font-weight: normal; font-style: normal; color: #555555; }

p { font-family: Lato, sans-serif; font-size: 16px!important; line-height: 1.5em; font-weight: normal; font-style: normal; color: #555555; }





.tab_interior .bigheading	{float:left;}

.special-offer-banner	{margin-top:20px;}
#canvasWrapper		{width:100%!important;}

#page-header		{width:100%!important;
height:100px!important;
background:#01AEF0;
margin: 0px 0px 0px 0px;
border-bottom: 0px solid #3964a5;
}

#pageHeader{border-bottom: 0px solid #EBEBEB; padding-top: 0px; padding-bottom: 0px; border-color: #f1f1f1;}



/*-- New Mobile Header Feb 2025 --*/
#colheadermobile {
background: url(/storage/images/header-background-mobile.webp);
width: 100%;
height: 190px;
position: relative;
margin: 0px 0px 0px 0px;
}
/*-- New Mobile Header Feb 2025 --*/





#page-header-col-1	{width:95%!important; height:auto!important; margin-bottom:0px!important;}
/*#page-header-col-1 a img	{max-height: 65px;width: auto;}*/

.headingmain		{width:100%!important; height:100px!important; background:#01AEF0}
.headingmain img	{display:none!important;}
.headingleft		{width:100%!important; height:auto!important; margin-bottom:20px!important;}
.headingleft a img	{width:50%!important;}
.headingright2		{display:none;}
.headingright1		{display:none;}
.colnavigation		{display:none;}

#contentWrapper		{width:100%!important; margin-left:0px!important; float:left!important; padding-top: 0px!important;padding-left:0px!important;}

#pageFooter			{width:100%!important; float:left!important; height:auto!important;}
.mobile-nav	a img	{width:20%!important;}

li{font-size:14px;}

.rs-link-to-desktop	{}
.rs-link-to-responsive	{}
.weofferwordingbig,
.weofferlogo,
.weofferheadingartwork,
.weoffercontainerbase,
.weoffercontainer,
.weoffercontainerbig,
.weoffercontainerbig2,
.weoffercontainerbig3,
.weoffercontainerhome,
.contactcontainer,
.weofferfindoutmore,
.specialoffercontainer1,
.col1000,
.colleft2,
.colright2,
.col0,
.col1,
.col0rightnb,
.col0wording
{width: 100%!important;
padding: 10px 20px 10px 20px!important;
margin: 0px!important; text-align:left!important;}



.col1000 {
width: 1000px;
margin-top: 10px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding-top: 5px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
border-top: 2px solid #f1f1f1;
float: left;
text-align:justify;
background-color: #222222;
}


.col1000footer {
width: 100%!important;
margin-top: 30px!important;
margin-bottom: 0px!important;
margin-left: 0px!important;
margin-right: 0px!important;
padding-top: 0px!important;
padding-bottom: 0px!important;
padding-left: 0px!important;
padding-right: 0px!important;
border-top: 0px solid #f1f1f1;
float: left;
text-align:justify;
background-color: #222222;
}


.col0leftnb {width:100%!important; padding: 20px 30px 20px 30px!important; margin: 0px!important; text-align:left!important;}









.colmobilefullwidth
{
width: 100%!important; margin: 0px 0px 0px 0px;}
}






.form_table {
	width: auto;
    margin-top: 0px;
	margin-left: -3px;
	margin-right: -3px;
    padding-left: 0px;
	border-radius: 8px;
	border: 0px solid #1B4965;
	background: #1B4965;
	background-size: auto;
	color: #FFFFFF;
	overflow: hidden;
    box-shadow: none;
}







.colformfullwidth {
width: 100%;
margin-top: 0px;
margin-bottom: 30px;
margin-left: 0px;
margin-right: 0px;

padding-top: 0px;
padding-bottom: 0px;
padding-left: 0%;
padding-right: 0%;
background-color: #1B4965;
text-align: center;
}


.coldesktopfullwidth {
width: 100vw!important;
margin-top: 10px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;

padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
background-color: #1B4965;
}











	
.slideshow {width: 100%!important; margin: 0px 0px -60px 0px!important; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; border: none; float: left; text-align:justify;}




.colcontact1		{width:100%!important;}
.colcontact1 img	{margin-right:95px;}



.headinggreenmain, .headinggreenwide, .colcontactform	
					{width:100%!important; margin:0px 0 10px 0!important;}

.col0bb img			{padding:10px 0!important}


.col0 {width: 100%; height: auto; margin:20px 0px 0px 0px;
}

.col1 {width: 100%; height: auto; margin:20px 0px 0px 0px;
}
























/*-- Thumbs --*/
.colthumbexamples {width: 100%; height: 350px; margin: 10px 0px 10px 0px; padding: 0px 0px 0px 0px; float: left; text-align:justify;}

.colthumbexamples a {font-family: Lato, sans-serif; font-size: 14px; margin-left: 10px; line-height: 1.5em; font-weight: 300!important; text-decoration: none!important; color: #555555;}

.colthumbexamples img {width:100%; height:auto; margin: 0px 0px 0px 0px;}
/*-- Thumbs --*/




/*-- Key Tag Thumbs --*/
.colkeythumbexamples {width: 100%; height: 450px; margin: 10px 0px 10px 0px; padding: 0px 0px 0px 0px; float: left; text-align:justify;}

.colkeythumbexamples a {font-family: Lato, sans-serif; font-size: 14px; margin-left: 10px; line-height: 1.5em; font-weight: 300!important; text-decoration: none!important; color: #555555;}

.colkeythumbexamples img {width:100%; height:auto; margin: 0px 0px 0px 0px;}
/*-- Key Tag Thumbs --*/




/*-- Event Pass Thumbs --*/
.coleventthumbexamples {width: 100%; height: 450px; margin: 10px 0px 10px 0px; padding: 0px 0px 0px 0px; float: left; text-align:justify;}

.coleventthumbexamples a {font-family: Lato, sans-serif; font-size: 14px; margin-left: 10px; line-height: 1.5em; font-weight: 300!important; text-decoration: none!important; color: #555555;}

.coleventthumbexamples img {width:100%; height:auto; margin: 0px 0px 0px 0px;}
/*-- Event Pass Thumbs --*/





.note
{margin: 10px 0px 10px 10px;
padding: 0px 0px 0px 0px;
color: #37474F;
font-size: 16px;
font-weight: 600;
clear: both;
}
.note:hover
{margin: 10px 0px 10px 10px;
padding: 0px 0px 0px 0px;
color: #37474F!important;
font-size: 16px;
font-weight: 600;
clear: both;
}








	






.coliframevideo {
  /* FIXED 2026-09-04: was `width: 900px; height: 800px` -- desktop numbers left
     behind in the PHONE stylesheet, which is the one place they can never be
     right. On a 375px phone that column was 900px inside a canvas with
     overflow hidden, so 525px of every ink-sample video popup was clipped away
     with no scrollbar and no way to reach it. Same defect, and same fix, as
     .coliframe below -- see the note there for why editing this sheet cannot
     reach the responsive pages. */
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border-top: 0px solid #e1e1e1;
  float: none;
  box-sizing: border-box;
  text-align: left;
  font-family: Lato, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5em; color: #555555;
}



.coliframe {
  /* FIXED 2026-08-19: was `10%` - a missing zero, contradicted by its own
     comment on this line. On a 390px phone it made this column 39px wide
     (or 100px where the parent is the legacy 1000px block), so every page
     using .coliframe either clipped its content or shrank it to ~20px:
     the bleed diagrams, the key-tag proofs and the ink-sample videos all
     rendered as unreadable slivers. .coliframe is used on 133 pages.
     This sheet is loaded ONLY by navigation/header-basic.php, and only at
     max-device-width:480px, so the change cannot reach the responsive
     pages - it is the legacy phone stylesheet for the basic/popup pages. */
  width: 100% !important;   /* fills screen width properly */
  height: 100%;
  margin: 0;
  padding: 10px;            /* shorthand for all sides */
  border-top: 0px solid #e1e1e1;
  text-align: left;
  font-family: Lato, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5em;
  color: #555555;
  box-sizing: border-box;   /* makes padding included inside 100% */
}





.contactcontainermobile {
	padding: 0px;
	border: none; /* border: 0px solid #a0a0a0; */
	float: left;
	margin: 10px 0px 10px 0px; /* Margin: Top Right Bottom Left */
	text-align:left;
	position: relative;
	z-index: 10;
}

.colformmobile {width: 100%; margin: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 10px; border: none; float: left;
text-align:left;
}


.coliframemobile {width: 600px; height: 100%; margin: 0px; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; border-top: 0px solid #f1f1f1; float: left;
text-align:left;
font-family: Lato, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5em; color: #555555;
}

.coliframevideomobile {width: 600px; height: 600px; margin: 0px; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; border-top: 0px solid #f1f1f1; float: left;
text-align:left;
font-family: Lato, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5em; color: #555555;
}


.coliframemobile a, .coliframe span {
  font-family: Lato, sans-serif; font-weight: 700; font-size: 16px; line-height: 1.5em; color: #555555;
}






.heading10, .heading12, .heading14, .heading16, .heading18, .heading20, .heading22, .heading24, .heading26, .heading28, .heading30, .heading32, .heading34, .heading36, .heading38, .heading40, .heading42, .heading44, .heading46, .heading48, .heading50 {
	font-weight: 700;
	line-height: 1.5em;
	margin-top: 0px; 
	margin-bottom: 0px;
	margin-left: 0px;
}
.heading10 {font-size: 7px;}
.heading12 {font-size: 8px;}
.heading14 {font-size: 11px;}
.heading16 {font-size: 12px;}
.heading18 {font-size: 14px;}
.heading20 {font-size: 15px;}
.heading22 {font-size: 16px;}
.heading24 {font-size: 18px;}
.heading26 {font-size: 20px;}
.heading28 {font-size: 22px;}
.heading30 {font-size: 23px;}
.heading32 {font-size: 24px;}
.heading34 {font-size: 25px;}
.heading36 {font-size: 26px;}
.heading38 {font-size: 27px;}
.heading40 {font-size: 28px;}
.heading42 {font-size: 29px;}
.heading44 {font-size: 30px;}
.heading46 {font-size: 31px;}
.heading48 {font-size: 32px;}
.heading50 {font-size: 33px;}
.heading52 {font-size: 34px;}
.heading54 {font-size: 35px;}
.heading56 {font-size: 36px;}
.heading58 {font-size: 20px;}
.heading60 {font-size: 22px;}
.heading62 {font-size: 24px;}
.heading64 {font-size: 26px;}
.heading66 {font-size: 28px;}
.heading68 {font-size: 30px;}
.heading70 {font-size: 32px;}



h2.weofferheading {
	width: 330px; 
	height: auto; 
	padding: 0;
	margin: 25px;
	text-align:left;
 	font-weight: 700; 
 	font-size: 28px; 
 	line-height: 1.5em;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 40;
}



.contactfindoutmoremobile {
	width: 330px; 
	height: 49px; 
	padding: 0px; 
	margin: 0px; 
	position: absolute;
	bottom: 15px;
	right: -5px;
	z-index: 50;
}






.weofferwordingbase, div.weofferwording, .weofferwordingbig {
	padding: 0px;
	border: none; /* border: 0px solid #a0a0a0; */
	float: left;
	margin: 25px; /* Margin: Top Right Bottom Left */
	text-align:left;
	position: relative;
	position: absolute;
	top: 45px;
	left: 10px;
	z-index: 30;
 	font-weight: 400; 
 	font-size: 16px; 
 	line-height: 1.5em; 
 	color: #000000;
}



.weofferwordingmobile {
	width: 330px; 
	height: 80px;
}



.xmas {
	width: 100%;
	height: auto;
	float: left;
	margin: 10px 0px 10px 0px;
	padding: 5px 0px 5px 0px;
	background: #ffaaaa;
	border: 1px solid #a0a0a0;
	text-align:center;
}



.video-banner {width: 300px; height: 50px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; border-top: 0px solid #e1e1e1; float: left;
text-align:left;
font-family: Lato, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5em; color: #555555;
}



.colthumba {width: 50%; height: 160px; margin: 0px 0px 0px 0px; padding: 0px 12px 0px 12px; float: left;
}


.bigheading {font-size: 14px; line-height: 1.5em; font-weight: bold; font-style: normal; color: #555555;}





/* FONT SIZE 16PX */
.headinggreenmain	{font-size:16px!important;}
.col0nb	{font-size:6px!important;}
.col0leftnb	{
font-family: Lato, sans-serif; font-size: 16px!important; line-height: 1.5em; font-weight: normal; font-style: normal; color: #555555;
}

.col0,.col0wording	{
font-family: Lato, sans-serif; font-size: 16px!important; line-height: 1.5em; font-weight: normal; font-style: normal; color: #555555;


}


.col1	{
font-family: Lato, sans-serif; font-size: 16px!important; line-height: 1.5em; font-weight: normal; font-style: normal; color: #555555;
}





/**/






#mediaspace1_wrapper{width:9%!important;}
.weeklyleft			{width:90%!important; padding:0px!important}
.weeklyright		{width:90%!important;}




	

	
.imagehover			{padding: 0px 0 0px 0!important;}

#sidebar1Wrapper	{display:none;}

.bx-pager-link {margin: 0px 5px 10px 0!important;}
  
img		{max-width:100%!important;}
.mobile-only	{display:block!important;}
.desktop-only	{display:none!important;}
.mobile-copy	{padding:5%;}
.adspace-widget widget	{margin-left:-15px!important;}

.featured-right 	{display:none;}
#featured-products	{display:none;}
.feature-bar 		{display:none;}
.featured-advert	{display:none;}

.tab_content {padding: 5px 5px 5px 5px; display: none; /*position:absolute; top:20px;*/ position: relative; top: -20px;}


.tab_interior		{width:93%!important}
.tabcolrightbig		{display:none;}
.further			{display:none;}
.tabcolleftsmall	{width:100%!important; padding-right:0px!important}
.featured_container	{display:none;}
.tabcol4, .tabcol3	{width:100%!important}
.tabcol0			{width:100%!important}
ul.tabs				{width:92%!important; height:75px!important; float:none!important}

#container			{width:100%!important; background:#FFF!important; padding:none!important;}
#content			{width:100%!important; background:#FFF!important; float:none!important; padding:0px!important;}
.col-full			{width:100%!important; padding:none!important;}
#main				{width:100%!important; padding:none!important; padding-right:0px!important; margin-right:0px!important;}
#sidebar			{display:none;}

#wrapper			{width:100%!important; background:#FFF!important; padding:none!important;}
.wrapper			{width:100%!important; padding:none!important;}

.header				{width:100%!important; text-align:center!important; }
#navigation.col-full	{display:none!important}
.mobile-hide			{display:none!important}

.top-tabs		{display:none;}
.logo			{width:100%!important;}
.social-right	{display:none;}
#third1			{display:none;}
#third2			{display:none;}
#third3			{width:100%!important; height:auto!important; margin-bottom:10%!important;}
#footer			{width:90%!important; height:auto!important; padding:5%!important;}
.copyright		{display:none;}











.weoffercontainer {
	width: 100%;
	height: 270px; 
    background-repeat: no-repeat;
    background-size: 100% 31px;
    margin: 20px 0px 20px 0px;
    background-position: 0px 230px;
}

h2.weofferheadingleft, h2.weofferheadingleftbig {
	width: 640px; 
	height: 30px; 
	padding: 0;
	margin: 25px;
	text-align:left;
 	font-weight: 700; 
 	font-size: 26px; 
 	line-height: 1.5em;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 40;
}

h2.weofferheadingright, h2.weofferheadingrightbig {
	width: 640px; 
	height: 30px; 
	padding: 0;
	margin: 25px;
	text-align:left;
 	font-weight: 700; 
 	font-size: 26px; 
 	line-height: 1.5em;
	position: absolute;
	top: 0px;
	left: 395px;
	z-index: 40;
}



.weofferlogo {
	width: 200px; 
	height: 200px; 
	padding: 0px;  
	margin: 0px 20px 20px 0px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 20;
}

.weofferlogo img {
  max-width: 130px;
  max-height: 130px;
  margin: auto;
  display: block;
}

.weofferfindoutmore img {
  max-width: 130px;
  max-height: 130px;
  margin: -100px -40px 0px 0px !important;
  display: block;
}

.weofferlogoleft {
	width: 100px; 
	height: 100px; 
	padding: 0px;  
	margin:25px;
	position: absolute;
	bottom: 100px;
	left: -5px;
	z-index: 20;
}

.weofferlogoright {
	width: 100px; 
	height: 100px; 
	padding: 0px;  
	margin:25px;
	position: absolute;
	bottom: 100px;
	left: 390px;
	z-index: 20;
}

.weofferwordingleft {
	padding: 0px;
	border: none; /* border: 0px solid #a0a0a0; */
	float: left;
	margin: 25px; /* Margin: Top Right Bottom Left */
	position: absolute;
	top: 40px;
	left: 75px;
	z-index: 30;
	text-align:left;
 	font-weight: 400; 
 	font-size: 14px; 
 	line-height: 1.3em; 
 	color: #000000;
	width: 260px;
	height: 150px;
}

.weofferwordingright {
	padding: 0px;
	border: none; /* border: 0px solid #a0a0a0; */
	float: left;
	margin: 25px; /* Margin: Top Right Bottom Left */
	position: absolute;
	top: 40px;
	left: 465px;
	z-index: 30;
	text-align:left;
 	font-weight: 400; 
 	font-size: 14px; 
 	line-height: 1.3em; 
 	color: #000000;
	width: 260px;
	height: 150px;
}

.weofferfindoutmoreleft {
	width: 370px;
	height: 49px; 
	padding: 0px;
	margin: 25px;
	border: none;
	position: absolute;
	bottom: -10px;
	right: 408px;
	z-index: 50;
}

.weofferfindoutmoreright {
	width: 370px;
	height: 49px; 
	padding: 0px;
	margin: 25px;
	border: none;
	position: absolute;
	bottom: -10px;
	right: 10px;
	z-index: 50;
}

.weofferwording {
	width: 95%;
    height: 250px;
    margin: 0px 0px 0px 0px !important;
}




h2.weofferheading {
	width: 100%; 
	height: auto; 
	padding: 0;
	margin: 0px;
	text-align:left;
 	font-weight: 700; 
 	font-size: 26px; 
 	line-height: 1.5em;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 40;
}





h3.weofferheading {
	width: 100%; 
	height: auto; 
	padding: 0px 0px 0px 30px;
	margin: 0px;
	text-align:left;
 	font-weight: 700; 
 	font-size: 20px; 
 	line-height: 1.5em;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 40;
}



.bx-wrapper .bx-controls-direction a { /* adjust next and previous control position on mobile */
	position: absolute;
	top: 98%;
	margin-top: -16px;
	outline: 0;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	z-index: 8000;
}






.floatingbuttonenquire:hover {
background-position: 0 -43px;
}





/* main buttons */






		.mainbuttonquote {
		display: block;
		width: 300px;
		height: 49px;
		background: url(/storage/images/quotationbutton-sprite.webp) no-repeat 0 0;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.mainbuttonquote:hover {
		background-position: 0 -49px;
		}


		.mainbuttonseeexamples {
		display: block;
		width: 300px;
		height: 49px;
		background: url(/storage/images/seeexamplesbutton-sprite.webp) no-repeat 0 0;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.mainbuttonseeexamples:hover {
		background-position: 0 -49px;
		}



		.mainbuttonseemembershipexamples {
		display: block;
		width: 300px;
		height: 300px;
		background: url(/storage/images/seemembershipexamplesbutton-sprite.webp) no-repeat 0 0;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.mainbuttonseemembershipexamples:hover {
		background-position: 0 -300px;
		}




		.mainbuttonenquiry {
		display: block;
		width: 300px;
		height: 49px;
		background: url(/storage/images/enquirybutton-sprite.webp) no-repeat 0 0;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.mainbuttonenquiry:hover {
		background-position: 0 -49px;
		}




		.mainbuttonlearnmore {
		display: block;
		width: 300px;
		height: 49px;
		background: url(/storage/images/findoutmorebutton-sprite.webp) no-repeat 0 0;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.mainbuttonlearnmore:hover {
		background-position: 0 -49px;
		}



		.mainbuttonmembershiplearnmore {
		display: block;
		width: 4400px;
		height: 49px;
		background: url(/storage/images/findoutmoremembershipbutton-sprite.webp) no-repeat 0 0;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.mainbuttonmembershiplearnmore:hover {
		background-position: 0 -49px;
		}



















		.mainbuttonlearnmoresmall {
		display: block;
		width: 200px;
		height: 33px;
		background: url(/storage/images/findoutmorebutton-small-sprite.webp) no-repeat 0 0;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.mainbuttonlearnmoresmall:hover {
		background-position: 0 -33px;
		}




		.mainbuttonordernow {
		display: block;
		width: 300px;
		height: 49px;
		background: url(/storage/images/ordernowbutton-sprite.webp) no-repeat 0 0;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.mainbuttonordernow:hover {
		background-position: 0 -49px;
		}











.bigheading{ font-weight: 700; font-size: 24px; line-height: 1.5em; font-style: normal; color: #000000;}

span.footerheadingmobile {color: #ffffff; text-decoration: none; font-size: 22px!important; font-weight: 500; font-family: Lato, sans-serif; line-height: 30px;}


span.headeremailmobile1 {padding: 0px 0px 0px 0px; color: #000000; text-decoration: none; font-size: 18px!important; font-weight: 600; font-family: Lato, sans-serif; line-height: 28px;}

span.headeremailmobile2 {padding: 0px 0px 0px 0px; color: #000000; text-decoration: none; font-size: 9px!important; font-weight: 400; font-family: Lato, sans-serif; line-height: 16px;}


a.footermobile:link, a.footermobile:visited {color: #f1f1f1; text-decoration: none; font-size: 16px!important; font-weight: 400; font-family: Lato, sans-serif; line-height: 34px;}

a.footermobile:hover {color: #00C800; text-decoration: none; font-size: 16px!important; font-weight: 400; font-family: Lato, sans-serif; line-height: 34px;}


/* main buttons */











.navbar-fixed-top.cbp-af-header-shrink {
  height: 75px;
}










.headingfullwidth
{width: 100vw!important;
height: 100%!important;
max-height: 120px;
margin-top: 0px;
margin-bottom: 0px!important;
margin-left: 0px;
margin-right: 0px;
padding: 10px 10px 10px 10px;
background-color: #9DCEF9;
color: #37474F;
font-size: 16px!important;
text-align:center!important;
clear: both;
}
.headingfullwidth:hover
{width: 100vw!important;
height: 100%!important;
margin-top: 0px;
margin-bottom: 0px!important;
margin-left: 0px;
margin-right: 0px;
padding: 10px 10px 10px 10px;
background-color: #9DCEF9;
color: #37474F;
font-size: 16px!important;
text-align:center;
clear: both;
}


.homeheadingfullwidth
{width: 100vw!important;
height: 100%!important;
margin-top: 0px;
margin-bottom: 0px!important;
margin-left: 0px;
margin-right: 0px;
padding: 10px 10px 10px 10px;
background-color: #9DCEF9;
color: #37474F;
font-size: 16px!important;
text-align:center;
clear: both;
}
.homeheadingfullwidth:hover
{width: 100vw!important;
height: 100%!important;
margin-top: 0px;
margin-bottom: 0px!important;
margin-left: 0px;
margin-right: 0px;
padding: 10px 10px 10px 10px;
background-color: #9DCEF9;
color: #37474F;
font-size: 16px!important;
text-align:center;
clear: both;
}

















.mobilebox {
width: 100%!important;
margin: 10px 0px 10px 0px;
padding: 0px 0px 15px 0px;
border-top: 0px solid #f1f1f1;
float: left;
text-align:justify;
}

.cyan-background {
background-color: #1B4965;
}

.darkteal-background {
background-color: #123A52;
}

.softskyblue-background {
background-color: #9DCEF9;
}

.coolgrey-background {
background-color: #ECEFF1;
}

.warmsand-background {
background-color: #F5F5F5;
}

.softmint-background {
background-color: #C8E6C9;
}

.darkgrey-background {
background-color: #37474F;
}











#colheaderbanner { /*-- sets banner size and colour behind header buttons --*/
width: 100%;
height: 92px;
margin: 0px 0px 0px 0px;
background-color: #1B4965;
z-index: 5250;
}





#colmenubuttons { /*-- sets banner size and colour behind menu buttons --*/
width: 100%;
aspect-ratio: 19 / 3; /* portrait phone shape */
margin: 0px 0px 0px 0px;
background-color: #1B4965;
border-top: 0px solid black; /* width + style + colour */
border-bottom: 6px solid #123A52; /* width + style + colour */
index: 5250;
}









/* Misc styles */
small {
font-family: Lato, sans-serif;
font-size: 10px;
line-height: 28px;
font-weight: normal;
font-style: normal;
}

small6 {
font-family: Lato, sans-serif;
font-size: 6px;
line-height: 28px;
font-weight: normal;
font-style: normal;
}


small8 {
font-family: Lato, sans-serif;
font-size: 8px;
line-height: 28px;
font-weight: normal;
font-style: normal;
}

small10 {
font-family: Lato, sans-serif;
font-size: 10px;
line-height: 28px;
font-weight: normal;
font-style: normal;
}

small12 {
font-family: Lato, sans-serif;
font-size: 10px;
line-height: 28px;
font-weight: normal;
font-style: normal;
}

small14 {
font-family: Lato, sans-serif;
font-size: 14px;
line-height: 28px;
font-weight: normal;
font-style: normal;
}

small16 {
font-family: Lato, sans-serif;
font-size: 16px;
line-height: 28px;
font-weight: normal;
font-style: normal;
}

small18 {
font-family: Lato, sans-serif;
font-size: 18px;
line-height: 28px;
font-weight: normal;
font-style: normal;
}

small20 {
font-family: Lato, sans-serif;
font-size: 20px;
line-height: 28px;
font-weight: normal;
font-style: normal;
}

small22 {
font-family: Lato, sans-serif;
font-size: 22px;
line-height: 28px;
font-weight: normal;
font-style: normal;
}

small24 {
font-family: Lato, sans-serif;
font-size: 24px;
line-height: 28px;
font-weight: normal;
font-style: normal;
}










span.weofferwording10 {font-weight: 300;font-size: 8px;line-height: 1.6em;}

span.weofferwording12 {font-weight: 300;font-size: 10px;line-height: 1.6em;}

span.weofferwording14 {font-weight: 700;font-size: 11px;line-height: 1.6em;}

span.weofferwording16 {font-weight: 700;font-size: 12px;line-height: 1.6em;}

span.weofferwording18 {font-weight: 700;font-size: 13px;line-height: 1.6em;}

span.weofferwording20 {font-weight: 700;font-size: 14px;line-height: 1.6em;}

span.weofferwording22 {font-weight: 700;font-size: 15px;line-height: 1.6em;}

span.weofferwording24 {font-weight: 700;font-size: 15px;line-height: 1.6em;}

span.weofferwording26 {font-weight: 700;font-size: 15px;line-height: 1.6em;}

span.weofferwording28 {font-weight: 700;font-size: 15px;line-height: 1.6em;}

span.weofferwording30 {font-weight: 700;font-size: 15px;line-height: 1.6em;}

span.weofferwording32 {font-weight: 700;font-size: 15px;line-height: 1.6em;}

span.weofferwording34 {font-weight: 700;font-size: 15px;line-height: 1.6em;}

span.weofferwording36 {font-weight: 700;font-size: 15px;line-height: 1.6em;}

span.weofferwording38 {font-weight: 700;font-size: 15px;line-height: 1.6em;}

span.weofferwording40 {font-weight: 700;font-size: 15px;line-height: 1.6em;}

span.weofferwording42 {font-weight: 700;font-size: 15px;line-height: 1.6em;}

span.weofferwording44 {font-weight: 700;font-size: 15px;line-height: 1.6em;}

span.weofferwording46 {font-weight: 700;font-size: 15px;line-height: 1.6em;}

span.weofferwording48 {font-weight: 700;font-size: 15px;line-height: 1.6em;}

span.weofferwording50 {font-weight: 700;font-size: 15px;line-height: 1.6em;}

span.weofferwording52 {font-weight: 700;font-size: 15px;line-height: 1.6em;}

span.weofferwording54 {font-weight: 700;font-size: 15px;line-height: 1.6em;}





.stickymobile {
  position: sticky;
  top: 0;
  width: 100%;
  background: #f6f6f6;
  z-index: 2000;
  height: 100px;
  overflow: hidden;
}


/* keep ALL images proportional on mobile devices (this sheet is media-scoped to max-device-width 480px).
   Fixes aspect distortion where width/height attrs meet width-constraining responsive CSS — incl. shared-content
   images outside .mobile-only (e.g. inks pages logo blocks). 2026-07-21 v2 */
img { height: auto; }