@charset "utf-8";
/* CSS Document */

@media screen { 
/* --- core elements --------------------------------------------------------------------------- */


.desktop-only	{display:block!important;}
.mobile-only	{display:none!important;}
.switch-to-mobile	{display:block;}



/* Base Page Structure CSS */

#pageBodyWrapper {clear: both; } 
#canvasWrapper, #content {overflow:hidden; }
#pageHeader{border-bottom: 0px solid #EBEBEB; padding-top: 0px; padding-bottom: 5px; border-color: #f1f1f1;}

#canvasWrapper {width: 1200px; margin-right: auto; margin-left: auto; margin-top: 0px; background-color: #efefef;  padding: 0px 0px 0px 0px;}

#contentWrapper {width: 1200px; font-size: 20px; line-height: 28px; font-weight: normal; font-style: normal; padding-left: 0px!important; padding-top: 0px; color: #555555; float:left;}













#contentWrapperfancybox {width: 1000px; height: 1000px;}

.weeklyleft {width: 390px; margin: 0px; padding-left: 0px; padding-right: 30px; padding-top: 10px; padding-bottom: 10px; border: none; float: left;
}

.weeklyright {width: 500px; margin: 0px; padding-left: 5px; padding-right: 5px; padding-top: 30px; padding-bottom: 10px; border: none; float: left;
}

.col0 {width: 1140px; margin: 0px 0px 0px 0px; padding: 20px 30px 20px 30px; float: left; text-align:justify;
}

.col0left {width: 400px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; float: left; text-align:justify;
}

.col0right {width: 740px; margin: 0px 0px 0px 0px; padding: 30px 10px 0px 0px; float: right; text-align:justify;
}


.col0wording {width: 710px; margin: 20px 15px 20px 30px; padding: 0px 0px 0px 0px; float: left; text-align:justify;
}

.col0buttons {width: 370px; margin: 20px 30px 20px 15px; padding: 0px 0px 0px 0px; float: right; text-align:justify;
}



.col1 {width: 1200px; margin: 0px 0px 50px 0px; padding: 0px 0px 0px 30px; float: left; text-align:justify;
}


.coliframe {width: 1000px; 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: 'Lota, sans-serif', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5em; color: #000000;
}

.coliframe strong{ font-size: 16px; line-height: 1.5em; font-weight: bold; font-style: normal; color: #000000;}

.coliframevideo {width: 800px; height: 800px; margin: 0px; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; border-top: 0px solid #f1f1f1; float: left;
text-align:left;
font-family: 'Lota, sans-serif', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5em; color: #000000;
}

.coliframe a, .coliframe span {
  font-family: 'Lota, sans-serif', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.5em;
}

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

.colformfullwidth
{width: 1200px;
margin: 0px 0px 60px 0px;
padding: 0px 0px 0px 0px;
border: none;
float: left;
text-align: center;
background-color: #00A8CC;
}

.coldesktopfullwidth
{width: 1200px!important;
margin-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

.headingfullwidth
{width: 1140px!important;
height: 40px!important;
margin-top: 0px;
margin-bottom: 0px!important;
margin-left: 0px;
margin-right: 0px;
padding: 30px 30px 30px 30px;
background-color: #B3E5FC;
color: #37474F;
clear: both;
}


.homeheadingfullwidth
{width: 1140px!important;
height: 40px!important;
margin-top: 0px;
margin-bottom: 0px!important;
margin-left: 0px;
margin-right: 0px;
padding: 30px 30px 30px 30px;
background-color: #B3E5FC;
color: #37474F;
clear: both;
}



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




.col0leftnb {width: 806px; margin-top: 20px; padding-right: 30px; padding-left: 30px; padding-top: 0px; padding-bottom: 10px; border: none; float: left;
text-align:justify;
font-family: Lota, sans-serif; font-size: 20px; line-height: 28px; font-weight: 300; font-style: normal;
}

.col0rightnb {width: 300px; margin-top: 20px; padding-right: 30px; padding-left: 0px; padding-top: 0px; padding-bottom: 10px; border: none; float: left;
text-align:justify;
}

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









/*-- Thumbs --*/
.colthumbexamples {width: 565px; height: auto; margin: 20px 0px 0px 30px; padding: 0px 0px 0px 0px; float: left; text-align:justify;}

.colthumbexamples a {font-family: Lota, sans-serif; font-size: 20px; line-height: 1em; font-weight: 300!important; text-decoration: none!important; color: #555555;}

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



/*-- Key Tag Thumbs --*/
.colkeythumbexamples {width: 565px; height: 700px; margin: 20px 0px 0px 30px; padding: 0px 0px 0px 0px; float: left; text-align:justify;}

.colkeythumbexamples a {font-family: Lota, sans-serif; font-size: 20px; line-height: 1em; font-weight: 300!important; text-decoration: none!important; color: #555555;}

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



/*-- Event Pass Thumbs --*/
.coleventthumbexamples {width: 565px; height: 650px; margin: 20px 0px 0px 30px; padding: 0px 0px 0px 0px; float: left; text-align:justify;}

.coleventthumbexamples a {font-family: Lota, sans-serif; font-size: 20px; line-height: 1em; font-weight: 300!important; text-decoration: none!important; color: #555555;}

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
















.colthumbinksz {width: 300px; height: 450px; margin: 0px 15px 0px 20px; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; border-bottom: 0px solid #f1f1f1; float: left;
text-align:justify;
}

.colthumbinksnew {width: 325px; height: 150px; margin: 0px; padding-left: 0px; padding-right: 10px; padding-top: 10px; padding-bottom: 0px; border-bottom: 0px solid #f1f1f1; float: left;
text-align:justify;
}

.colthumbinksnewsmall {width: 250px; height: 70px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; border-bottom: 0px solid #f1f1f1; float: left;
text-align:justify;
}

.colthumba {width: 220px; height: 130px; margin-left: 0px; margin: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 80px; border-bottom: 0px solid #f1f1f1; float: left;
text-align:center;
}


/* END Base Structure CSS */
/* Page CSS */









/*-- New Header Feb 2025 --*/

#colaboveheader { /*-- sets the entire header size --*/
background-color: #005F6B;
width: 1200px;
height: 75px;
position: relative;
z-index: 5600;
margin: 0px 0px 0px 0px;
}

#colheader { /*-- sets the entire header size --*/
background-color: #00A8CC;
width: 1200px;
height: 245px;
position: relative;
z-index: 5000;
margin: 0px 0px 0px 0px;
padding: 10px 0px 0px 0px;
border-top: 0px solid #ffffff; /* 2px white top border */
border-bottom: 2px solid #ffffff; /* 2px white bottom border */

}

#colheadercpcardslogo { /*-- sets size of Colour Plastic Cards logo --*/
width: 700px;
height: 60px;
position: absolute;
z-index: 5300;
margin: 0px 0px 0px 0px;
}

#colheaderyearslogo { /*-- sets size of over 30 years logo --*/
background-color: #005F6B;
width: 215px;
height: 290px;
position: absolute;
z-index: 5280;
margin: 0px 0px 0px 0px;
}

#colheaderspecialoffer { /*-- sets size of special offer image --*/
width: 430px;
height: 190px;
position: relative;
z-index: 5250;
margin: -225px 20px 0px 0px;
float: right;
}

#colheadermenu { /*-- sets banner size and colour behind menu buttons --*/
width: 1200px;
height: 105px;
position: relative;
float: left;
margin: 0px 0px 0px 0px;
background-color: #00A8CC;
z-index: 5250;
border-bottom: 6px solid #005F6B;
}
/*-- New Header Feb 2025 --*/

/* HTML Element Base Styles */
html { height: 100%; }

img { border: 0 none; -ms-interpolation-mode: bicubic; }

body { border: 0px; height: 100%; margin: 0px; padding: 0px; margin-right: auto; margin-left: auto; background-color: #000000; color: #000000; } /* mainfont */



















td { background: transparent; border: 0px; margin: 0px; padding: 0px; }

/* Main body font */
p { margin: 10px 0px 10px 0px;
    font-family: Lota, sans-serif;
    font-size: 20px; /* mainfont */
    font-weight: 300;
    line-height: 28px;
    color: #555555; /* mainfontcolour */
}
/* Main body font */


#contentWrapper
    {
    font-family: Lota, sans-serif;
    font-size: 20px!important; /* mainfont */
    font-weight: 300;
    line-height: 28px;
    color: #555555; /* mainfontcolour */
}



/* Main Font Declaration */
body {
    font-family: Lota, sans-serif;
    font-size: 20px!important; /* mainfont */
    font-weight: 300;
    line-height: 28px;
    color: #555555; /* mainfontcolour */
}
/* Don't need all of these font-family: 'Lota, sans-serif's everywhere, set Lota, sans-serif as default, then override other fonts where required. */


/* H Headings */
h1, h2, h3, h4, h5, h6 {
margin: 0px;
padding: 0px;
font-family: Avenir Next, sans-serif;
font-weight: bold;
}

h1{ font-size: 24px; line-height: 1.5em; font-weight: bold; font-style: normal; padding-bottom: 5px; padding-top: 10px;}
h3{ font-size: 14px; line-height: 1.5em; font-weight: bold; font-style: normal; padding-bottom: 5px;}
h2{ font-size: 16px; line-height: 1.5em; font-weight: bold; font-style: normal; padding-bottom: 5px;}
ul { list-style-type: square; /* naturally. */ margin: 1em 0 1em; padding: 0; padding-left: 2em; }
form { margin:0; padding: 0; }
/* H Headings */

/* Links */
a { -moz-outline:none; } 
a:link, a:visited, a:active {
line-height: 28px;
font-weight: bold;
font-style: normal;
text-decoration: underline;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
color: #555555; /* mainfontcolour */
border-color: #7D7D7D;
background-repeat: no-repeat;}

a:hover {
line-height: 28px;
font-weight: bold;
font-style: normal;
text-decoration: underline;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
color: #00C800;
border-color: #7D7D7D;}
/* Links */

textarea, select { font: 8pt Arial, Tahoma, Verdana, Helvetica, sans-serif; }
textarea { height: 120px; }

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

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

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

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

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

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

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

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

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












big {
font-family: Lota, sans-serif;
font-size: 24px;
line-height: 28px;
font-weight: bold;
font-style: normal;
}

big26 {
font-family: Lota, sans-serif;
font-size: 26px;
line-height: 28px;
font-weight: bold;
font-style: normal;
}

big24 {
font-family: Lota, sans-serif;
font-size: 24px;
line-height: 28px;
font-weight: bold;
font-style: normal;
}


big22 {
font-family: Lota, sans-serif;
font-size: 22px;
line-height: 28px;
font-weight: bold;
font-style: normal;
}

big20 {
font-family: Lota, sans-serif;
font-size: 20px;
line-height: 28px;
font-weight: bold;
font-style: normal;
}

big18 {
font-family: Lota, sans-serif;
font-size: 18px;
line-height: 28px;
font-weight: bold;
font-style: normal;
}

big16 {
font-family: Lota, sans-serif;
font-size: 16px;
line-height: 28px;
font-weight: bold;
font-style: normal;
}

big14 {
font-family: Lota, sans-serif;
font-size: 14px;
line-height: 28px;
font-weight: bold;
font-style: normal;
}

big12 {
font-family: Lota, sans-serif;
font-size: 12px;
line-height: 28px;
font-weight: bold;
font-style: normal;
}

strong {
font-family: Lota, sans-serif;
line-height: 28px;
font-weight: bold;
font-style: normal;
color: #555555; /* mainfontcolour */
}

highlight {
font-family: Lota, sans-serif;
line-height: 28px;
font-weight: normal;
font-style: normal;
color: #00E100;}
/* Misc styles */




















/* EM Size Declaration */
em{
font-size: 20px; /* mainfont */
line-height: 28px;
font-weight: bold;
font-style: normal;
color: #555555; /* mainfontcolour */
}



@media screen and (min-width: 480px) {
.switch-to-mobile	{display:none;}
}






/*Scroller navigation bullets*/

/* --- Core layout containers --------------------------------------------------------------- */








.terms {
	width: 100%; 
	margin: 0px; 
	padding-right: 0px; 
	padding-top: 10px; 
	padding-bottom: 10px; 
	float: left;
	text-align:justify;
	text-decoration: none;
	font-size: 18px;
	font-family: Helvetica, sans-serif;
	font-weight: 300;
	color: #777777;
	line-height: 28px;
}

.terms h2 .hover {
	text-decoration: none;
	font-size: 18px;
	font-family: Helvetica, sans-serif;
	font-weight: 300;
	color: #00C800;
}

.terms a {
	text-decoration: none;
    color: #000000;
	font-weight: 600;
	line-height: 1;
}

.terms strong {
	text-decoration: none;
	font-size: 18px;
	font-family: Helvetica, sans-serif;
	font-weight: 600;
	color: #777777;
}

.terms a:hover {
	text-decoration: none;
	color: #00C800;
	font-weight: 600;
	line-height: 1;
}

span.termslink {
	text-decoration: none;
	font-size: 18px;
	font-family: Helvetica, sans-serif;
	font-weight: 500;
	color: #777777;
}

span.termslink a:hover {
	text-decoration: none;
	font-size: 18px;
	font-family: Helvetica, sans-serif;
	font-weight: 300;
	color: #00C800;
}




























.pretty {
	width: 100%; 
	margin: 0px; 
	padding-right: 0px; 
	padding-top: 10px; 
	padding-bottom: 10px; 
	float: left;
	text-align:justify;
	text-decoration: none;
	font-size: 18px;
	font-family: Avenir Next;
	font-weight: medium;
	color: #777777;
	line-height: 28px;
}

.pretty h2 .hover {
	text-decoration: none;
	font-size: 18px;
	font-family: Avenir Next;
	font-weight: medium;
	color: #00C800;
}

.pretty a {
	text-decoration: none;
    color: #000000;
	font-weight: bold;
	line-height: 1;
}

.pretty strong {
	text-decoration: none;
	font-size: 18px;
	font-family: Avenir Next;
	font-weight: bold;
	color: #777777;
}

.pretty a:hover {
	text-decoration: none;
	color: #00C800;
	font-weight: bold;
	line-height: 1;
}

span.prettylink {
	text-decoration: none;
	font-size: 18px;
	font-family: Avenir Next;
	font-weight: 500;
	color: #777777;
}

span.prettylink a:hover {
	text-decoration: none;
	font-size: 18px;
	font-family: Avenir Next;
	font-weight: bold;
	color: #00C800;
}



































.extras {
	width: 100%; 
	margin: 0px; 
	padding-right: 0px; 
	padding-top: 0px; 
	padding-bottom: 0px; 
	float: left;
	text-align:justify;
	text-decoration: none;
	font-size: 12px;
	line-height: 23px;
	font-family: Helvetica, sans-serif;
}
.extras {
	font-weight: 300;
	color: #777777;
	font-size: 12px;
	line-height: 23px;
}
.extras a {
	color: #000000;
	font-size: 12px;
	font-weight: 400;
	line-height: 23px;
}
.extras a:hover {
	color: #00C800;
}


.extras big {
	color: #000000;
	font-size: 12px;
	font-weight: 600;
	line-height: 23px;
}

.extras strong {
	color: #777777;
	font-size: 12px;
	font-weight: 600;
	line-height: 23px;
}

.extras small {
	font-size: 9px;
	font-weight: 400;
	line-height: 23px;
	color: #777777;

}

.mainfooter {width: 1200px; height:auto;
margin-top: 40px; margin-bottom: 0px; margin-left: 0px ; margin-right: 0px ;
padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px;
background-image: url("../storage/images/mainfooter-background-fullwidth.webp");
border-top: 0px solid #f1f1f1; float: left;
text-align:justify;
background-repeat: no-repeat; background-size: 1200px auto;
}










.copyright {width: 1200px;
margin-top: 0px; margin-bottom: 5px; margin-left: 0px ; margin-right: 0px ;
padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px;
border-top: 0px solid #f1f1f1; float: left;
text-align:centre;
}


.footercolumn {width: 320px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 1%;
margin-right: 1%;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
z-index: 11;
float: left;
line-height: 14px;
}






a.header:link, a.header:visited {color: #ffffff; text-decoration: none; font-size: 16px; font-weight: 300; font-family: Lota, sans-serif; line-height: 16px;}


a.footera:link, a.footera:visited
{color: #ffffff; text-decoration: none; font-size: 30px!important; font-weight: 600; font-family: Lota, sans-serif; line-height: 24px;}
a.footera:hover
{color: #00C800; text-decoration: none; font-size: 30px!important; font-weight: 600; font-family: Lota, sans-serif; line-height: 24px;}


a.footerb:link, a.footerb:visited {color: #f1f1f1; text-decoration: none; font-size: 15px!important; font-weight: 400; font-family: Lota, sans-serif; line-height: 20px;}
a.footerb:hover {color: #00C800; text-decoration: none; font-size: 15px!important; font-weight: 400; font-family: Lota, sans-serif; line-height: 20px;}


a.footerc:link, a.footerc:visited {color: #f1f1f1; text-decoration: none; font-size: 14px!important; font-weight: 500; font-family: Lota, sans-serif;}
a.footerc:hover {color: #00C800; text-decoration: none; font-size: 14px!important; font-weight: 500; font-family: Lota, sans-serif;}



.mainfooter span {color: #ffffff; text-decoration: none; font-size: 14px!important; font-weight: 500; font-family: Lota, sans-serif; line-height: 28px;}

span.smalltext{font-size: 9px; line-height: 1em; font-weight: normal; font-style: normal;}

span.footer8 {color: #ffffff; text-decoration: none; font-size: 8px!important; font-weight: 400; font-family: Lota, sans-serif; line-height: 10px;}

span.footer10 {color: #ffffff; text-decoration: none; font-size: 10px!important; font-weight: 400; font-family: Lota, sans-serif; line-height: 12px;}

span.footer12 {color: #ffffff; text-decoration: none; font-size: 12px!important; font-weight: 400; font-family: Lota, sans-serif; line-height: 14px;}

span.footer13 {color: #ffffff; text-decoration: none; font-size: 12px!important; font-weight: 400; font-family: Lota, sans-serif; line-height: 13px;}

span.footer14 {color: #ffffff; text-decoration: none; font-size: 14px!important; font-weight: 400; font-family: Lota, sans-serif; line-height: 18px;}

span.footer16 {color: #ffffff; text-decoration: none; font-size: 16px!important; font-weight: 400; font-family: Lota, sans-serif; line-height: 16px;}

span.footer18 {color: #ffffff; text-decoration: none; font-size: 18px!important; font-weight: 400; font-family: Lota, sans-serif; line-height: 18px;}

span.footerheading {color: #ffffff; text-decoration: none; font-size: 18px!important; font-weight: 600; font-family: Lota, sans-serif; line-height: 28px;}

span.footeraddress {color: #ffffff; text-decoration: none; font-size: 18px!important; font-weight: 200; font-family: Lota, sans-serif; line-height: 24px;}

span.footeraddressbold {color: #ffffff; text-decoration: none; font-size: 18px!important; font-weight: 600; font-family: Lota, sans-serif; line-height: 24px;}


span.cyan {color: #00A8CC!important;}
span.darkteal {color: #005F6B!important;}
span.softskyblue {color: #B3E5FC!important;}
span.coolgrey {color: #ECEFF1!important;}
span.warmsand {color: #F5F5F5!important;}
span.softmint {color: #C8E6C9!important;}
span.darkgrey {color: #37474F!important;}
span.softgrey {color: #DAD7D9!important;}


.xmas {
	width: 1140px; 
	height: 390px; 
	float: left;
	margin: 10px 0px 10px 0px;
	padding: 5px 0px 5px 0px;
	background-image: url("/storage/images/xmas-scene.webp");
	border: 1px solid #a0a0a0;
	text-align:center;
}






@media screen and (min-width:1025px) {
	.imagehover
	{
		opacity:1.0;
		filter:alpha(opacity=100); /* For IE8 and earlier */
	}

.imagehover:hover
	{
		opacity:0.8 !important;
		filter:alpha(opacity=80); /* For IE8 and earlier */
	}




	.imagehovermenu
	{
		opacity:1.0;
		filter:alpha(opacity=100); /* For IE8 and earlier */
	}

.imagehovermenu:hover
	{
		opacity:0.6 !important;
		filter:alpha(opacity=60); /* For IE8 and earlier */
	}
}



/* Disable iphone font resizing */
@media screen and (max-device-width: 480px){
	body{
	  -webkit-text-size-adjust: none;
	}
}

/* header links */

a.header:link, a.header:visited {color: #ffffff; text-decoration: none; font-size: 16px; font-weight: 300; font-family: Lota, sans-serif; line-height: 16px;}
a.header:hover {color: #00C800; font-size: 16px; font-weight: 300; font-family: Helvetica, sans-serif; line-height: 16px;}


a.headera:link, a.headera:visited {color: #ffffff; text-decoration: none; font-size: 20px!important; font-weight: 300; font-family: Lota, sans-serif; line-height: 22px;}
a.headera:hover {color: #00C800; text-decoration: none; font-size: 20px; font-weight: 300; font-family: Lota, sans-serif; line-height: 22px;}


a.headerb:link, a.headerb:visited {color: #ffffff; text-decoration: none; font-size: 12px!important; font-weight: 300; font-family: Lota, sans-serif; line-height: 1.8em; letter-spacing: 1px;}
a.headerb:hover {color: #00C800; text-decoration: none; font-size: 12px; font-weight: 300; font-family: Lota, sans-serif; line-height: 1.8em; letter-spacing: 1px;}


a.headerc:link, a.headerc:visited {color: #ffffff; text-decoration: none; font-size: 22px!important; font-weight: 500; font-family: Lota, sans-serif; line-height: 1em;}
a.headerc:hover {color: #00C800; text-decoration: none; font-size: 22px; font-weight: 500; font-family: Lota, sans-serif; line-height: 1em;}


a.headeremail18:link, a.headerc:visited {color: #ffffff; text-decoration: none; font-size: 18px!important; font-weight: 500; font-family: Lota, sans-serif; line-height: 1.5em;}
a.headeremail18:hover {color: #00C800; text-decoration: none; font-size: 18px; font-weight: 500; font-family: Lota, sans-serif; line-height: 1.5em;}


a.headeremail20:link, a.headerc:visited {color: #ffffff; text-decoration: none; font-size: 20px!important; font-weight: 500; font-family: Lota, sans-serif; line-height: 1.5em;}
a.headeremail20:hover {color: #00C800; text-decoration: none; font-size: 20px; font-weight: 500; font-family: Lota, sans-serif; line-height: 1.5em;}


a.headeremail22:link, a.headerc:visited {color: #ffffff; text-decoration: none; font-size: 22px!important; font-weight: 500; font-family: Lota, sans-serif; line-height: 1.5em;}
a.headeremail22:hover {color: #00C800; text-decoration: none; font-size: 22px; font-weight: 500; font-family: Lota, sans-serif; line-height: 1.5em;}


a.headeremail23:link, a.headerc:visited {color: #ffffff; text-decoration: none; font-size: 23px!important; font-weight: 500; font-family: Lota, sans-serif; line-height: 1.5em;}
a.headeremail23:hover {color: #00C800; text-decoration: none; font-size: 23px; font-weight: 500; font-family: Lota, sans-serif; line-height: 1.5em;}

a.headeremail24:link, a.headerc:visited {color: #ffffff; text-decoration: none; font-size: 24px!important; font-weight: 500; font-family: Lota, sans-serif; line-height: 1.5em;}
a.headeremail24:hover {color: #00C800; text-decoration: none; font-size: 24px; font-weight: 500; font-family: Lota, sans-serif; line-height: 1.5em;}

a.headeremail25:link, a.headerc:visited {color: #ffffff; text-decoration: none; font-size: 25px!important; font-weight: 500; font-family: Lota, sans-serif; line-height: 1.5em;}
a.headeremail25:hover {color: #00C800; text-decoration: none; font-size: 25px; font-weight: 500; font-family: Lota, sans-serif; line-height: 1.5em;}





.headersmall {color: #ffffff; text-decoration: none; font-size: 10px; font-weight: 300; font-family: Lota, sans-serif; line-height: 1.3em; float: right;}

.headersmall11 {color: #ffffff; text-decoration: none; font-size: 11px; font-weight: 300; font-family: Lota, sans-serif; line-height: 1.3em; float: right;}

.headersmall12 {color: #ffffff; text-decoration: none; font-size: 12px; font-weight: 300; font-family: Lota, sans-serif; line-height: 1.3em; float: right;}

.headersmall14 {color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 300; font-family: Lota, sans-serif; line-height: 1.3em; float: right;}

.headersmall16 {color: #ffffff; text-decoration: none; font-size: 16px; font-weight: 300; font-family: Lota, sans-serif; line-height: 1.3em; float: right;}

.headertel {color: #ffffff; text-decoration: none; font-size: 24px; font-weight: 300; font-family: Lota, sans-serif; line-height: 1.5em; float: right;}





.information p {margin: 0; padding-bottom: 20px;}
.hidden {position: absolute; left: -999em; top: -999em;}


.buttonhover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
padding-top: 0px;
}
.buttonhover:hover
{
opacity:0.85;
filter:alpha(opacity=85); /* For IE8 and earlier */
padding-top: 0px; 
}











/* Heading Custom Classes */

.heading{ font-weight: 700; font-size: 13px; line-height: 1.5em; font-style: normal; padding-right: 25px; padding-left: 25px; padding-top: 10px; padding-bottom: 10px; margin-top: 10px; margin-bottom: 25px; background-color: #000000; color: #1dafed; border: 0px solid #FF0000; border-radius: 25px; box-shadow: 5px 5px 5px #888888; float: left;}


.heading-yellow{ font-weight: 700; font-size: 22px; line-height: 1.5em; font-style: normal; padding-right: 25px; padding-left: 25px; padding-top: 10px; padding-bottom: 10px; margin-top: 10px; margin-bottom: 25px; background-color: #ffff00; color: #ff0000; border: 2px solid #FF0000; border-radius: 25px; box-shadow: 5px 5px 5px #888888; float: left; text-align:center;}





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

.header { margin-bottom: 2em; }

.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.25em;
	margin-top: 0px; 
	margin-bottom: 0px;
	}

.heading10:hover, .heading12:hover, .heading14:hover, .heading16:hover, .heading18:hover, .heading20:hover, .heading22:hover, .heading24:hover, .heading26:hover, .heading28:hover, .heading30:hover, .heading32:hover, .heading34:hover, .heading36:hover, .heading38:hover, .heading40:hover, .heading42:hover, .heading44:hover, .heading46:hover, .heading48:hover, .heading50:hover, .heading52:hover, .heading54:hover, .heading56:hover, .heading58:hover, .heading60:hover, .heading62:hover, .heading64:hover, .heading66:hover, .heading68:hover, .heading70:hover {
	color: #00C800;
	}

.heading10 {font-size: 10px;}
.heading12 {font-size: 12px;}
.heading14 {font-size: 14px;}
.heading16 {font-size: 16px;}
.heading18 {font-size: 18px;}
.heading20 {font-size: 20px;}
.heading22 {font-size: 22px;}
.heading24 {font-size: 24px;}
.heading26 {font-size: 26px;}
.heading28 {font-size: 28px;}
.heading30 {font-size: 30px;}
.heading32 {font-size: 32px;}
.heading34 {font-size: 34px;}
.heading36 {font-size: 36px;}
.heading38 {font-size: 38px;}
.heading40 {font-size: 40px; line-height: 100%;}
.heading42 {font-size: 42px; line-height: 100%;}
.heading44 {font-size: 44px; line-height: 100%;}
.heading46 {font-size: 46px; line-height: 100%;}
.heading48 {font-size: 48px; line-height: 100%;}
.heading50 {font-size: 50px; line-height: 100%;}
.heading52 {font-size: 52px; line-height: 100%;}
.heading54 {font-size: 54px; line-height: 100%;}
.heading56 {font-size: 56px; line-height: 100%;}
.heading58 {font-size: 58px; line-height: 100%;}
.heading60 {font-size: 60px; line-height: 100%;}
.heading62 {font-size: 62px; line-height: 100%;}
.heading64 {font-size: 64px; line-height: 100%;}
.heading66 {font-size: 66px; line-height: 100%;}
.heading68 {font-size: 68px; line-height: 100%;}
.heading70 {font-size: 70px; line-height: 100%;}

	

h1.heading10:hover, h1.heading12:hover, h1.heading14:hover, h1.heading16:hover, h1.heading18:hover, h1.heading20:hover, h1.heading22:hover, h1.heading24:hover, h1.heading26:hover, h1.heading28:hover, h1.heading30:hover, h1.heading32:hover, h1.heading34:hover, h1.heading36:hover, h1.heading38:hover, h1.heading40:hover, h1.heading42:hover, h1.heading44:hover, h1.heading46:hover, h1.heading48:hover, h1.heading50:hover, h1.heading52:hover, h1.heading54:hover, h1.heading56:hover, h1.heading58:hover, h1.heading60:hover, h1.heading62:hover, h1.heading64:hover, h1.heading66:hover, h1.heading68:hover, h1.heading70:hover
	
h2.heading10:hover, h2.heading12:hover, h2.heading14:hover, h2.heading16:hover, h2.heading18:hover, h2.heading20:hover, h2.heading22:hover, h2.heading24:hover, h2.heading26:hover, h2.heading28:hover, h2.heading30:hover, h2.heading32:hover, h2.heading34:hover, h2.heading36:hover, h2.heading38:hover, h2.heading40:hover, h2.heading42:hover, h2.heading44:hover, h2.heading46:hover, h2.heading48:hover, h2.heading50:hover, h2.heading52:hover, h2.heading54:hover, h2.heading56:hover, h2.heading58:hover, h2.heading60:hover, h2.heading62:hover, h2.heading64:hover, h2.heading66:hover, h2.heading68:hover, h2.heading70:hover
	
h3.heading10:hover, h3.heading12:hover, h3.heading14:hover, h3.heading16:hover, h3.heading18:hover, h3.heading20:hover, h3.heading22:hover, h3.heading24:hover, h3.heading26:hover, h3.heading28:hover, h3.heading30:hover, h3.heading32:hover, h3.heading34:hover, h3.heading36:hover, h3.heading38:hover, h3.heading40:hover, h3.heading42:hover, h3.heading44:hover, h3.heading46:hover, h3.heading48:hover, h3.heading50:hover

h4.heading10:hover, h4.heading12:hover, h4.heading14:hover, h4.heading16:hover, h4.heading18:hover, h4.heading20:hover, h4.heading22:hover, h4.heading24:hover, h4.heading26:hover, h4.heading28:hover, h4.heading30:hover, h4.heading32:hover, h4.heading34:hover, h4.heading36:hover, h4.heading38:hover, h4.heading40:hover, h4.heading42:hover, h4.heading44:hover, h4.heading46:hover, h4.heading48:hover, h4.heading50:hover, h3.heading52:hover, h3.heading54:hover, h3.heading56:hover, h3.heading58:hover, h3.heading60:hover, h3.heading62:hover, h3.heading64:hover, h3.heading66:hover, h3.heading68:hover, h3.heading70:hover

h5.heading10:hover, h5.heading12:hover, h5.heading14:hover, h5.heading16:hover, h5.heading18:hover, h5.heading20:hover, h5.heading22:hover, h5.heading24:hover, h5.heading26:hover, h5.heading28:hover, h5.heading30:hover, h5.heading32:hover, h5.heading34:hover, h5.heading36:hover, h5.heading38:hover, h5.heading40:hover, h5.heading42:hover, h5.heading44:hover, h5.heading46:hover, h5.heading48:hover, h5.heading50:hover, h5.heading52:hover, h5.heading54:hover, h5.heading56:hover, h5.heading58:hover, h5.heading60:hover, h5.heading62:hover, h5.heading64:hover, h5.heading66:hover, h5.heading68:hover, h5.heading70:hover
	
h6.heading10:hover, h6.heading12:hover, h6.heading14:hover, h6.heading16:hover, h6.heading18:hover, h6.heading20:hover, h6.heading22:hover, h6.heading24:hover, h6.heading26:hover, h6.heading28:hover, h6.heading30:hover, h6.heading32:hover, h6.heading34:hover, h6.heading36:hover, h6.heading38:hover, h6.heading40:hover, h6.heading42:hover, h6.heading44:hover, h6.heading46:hover, h6.heading48:hover, h6.heading50:hover

div.heading10:hover, div.heading12:hover, div.heading14:hover, div.heading16:hover, div.heading18:hover, div.heading20:hover, div.heading22:hover, div.heading24:hover, div.heading26:hover, div.heading28:hover, div.heading30:hover, div.heading32:hover, div.heading34:hover, div.heading36:hover, div.heading38:hover, div.heading40:hover, div.heading42:hover, div.heading44:hover, div.heading46:hover, div.heading48:hover, div.heading50:hover, div.heading52:hover, div.heading54:hover, div.heading56:hover, div.heading58:hover, div.heading60:hover, div.heading62:hover, div.heading64:hover, div.heading66:hover, div.heading68:hover, div.heading70:hover

p.heading10:hover, p.heading12:hover, p.heading14:hover, p.heading16:hover, p.heading18:hover, p.heading20:hover, p.heading22:hover, p.heading24:hover, p.heading26:hover, div.heading28:hover, p.heading30:hover, p.heading32:hover, p.heading34:hover, p.heading36:hover, p.heading38:hover, p.heading40:hover, p.heading42:hover, p.heading44:hover, p.heading46:hover, div.heading48:hover, p.heading50:hover, p.heading52:hover, p.heading54:hover, p.heading56:hover, p.heading58:hover, div.heading60:hover, p.heading62:hover, p.heading64:hover, p.heading66:hover, p.heading68:hover, p.heading70:hover, p.heading72:hover, p.heading74:hover, p.heading76:hover, p.heading78:hover, p.heading80:hover {
	
	color:#37474F;
	}




h1.biggerheading, h2.biggerheading, h2.smallheading, h2.bitbiggerheading {
	color: #000000;
	font-style: bold;
	text-align:left;
	padding-bottom: 10px;
}
h1.biggerheading {
	font-size: 24px;
}
h2.biggerheading {
	font-size: 24px;
}
h2.biggerheading24 {
	font-size: 24px;
}
h2.smallheading {
	font-size: 18px;
}
h2.bitbiggerheading {
	font-size: 20px;
}

h3.biggerheading {
	font-size: 24px;
}
h3.biggerheading24 {
	font-size: 24px;
}
h3.smallheading {
	font-size: 18px;
}
h3.bitbiggerheading {
	font-size: 20px;
}

/* End Heading Styles */
#sidebar1Wrapper {
display: block;
float: left;
width: 166px;
padding: 0;}

.verticalNavigationBarWrapper .section {
	border-right: 1px solid #f1f1f1;
	font-weight: 400;
	font-style: normal;
	padding: 5px 0px 0px 0px;
	margin: 0px 0px -11px 0px;
	border-color: #f1f1f1;
}


/*New CSS for main pages*/
/* containers */

.featured_container {
	width:690px; 
	height:349px;
	margin: 0 auto;
    position: relative;
}

















.specialoffercontainer1 {width: 1140px; margin: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 0px; border-top: 0px solid #f1f1f1; float: left;
text-align:justify;
 font-weight: 400; font-size: 14px; line-height: 1.5em;
}

.specialoffercontainer1 td
{ font-weight: 400; font-size: 14px; line-height: 1.5em;
}


.specialoffercontainer1 a
{ font-weight: 700; font-size: 14px; line-height: 1.5em;
}

.specialoffercontainer1 big
{ font-weight: 700; font-size: 14px; line-height: 1.5em;
}


.specialoffercontainer1 strong
{ font-weight: 700; font-size: 14px; line-height: 1.5em;
}


.specialoffercontainer1 small
{ font-weight: 100; font-size: 12px; line-height: 1em;
}























.weofferwording p, .weofferwordingfull p 
{ 
font-weight: 300;
font-size: 26px; /* mainfont */
font-family: Lota, sans-serif;
line-height: 1.3em;
color: #555555;
}



.weofferwordingbig, .weofferwordingfull, .weofferwordingfull a, .weofferwordingfull span, .weofferwordingleft, .weofferwordingright, .weofferwordingleft span, .weofferwordingright span, .weofferwordingleft a, .weofferwordingright a, .weofferwording a, .weofferwordingbig, .weofferwording span, .weofferwordingbig span, .weofferwordingsmall span
{ 
font-weight: bold; 
font-size: 26px; /* mainfont */
font-family: Lota, sans-serif;
line-height: 38px;
color: #555555;

}



span.weofferwording10 {font-weight: 300;font-size: 10px;line-height: 1.5em;}
span.weofferwording12 {font-weight: 300;font-size: 12px;line-height: 1.5em;}
span.weofferwording14 {font-weight: 700;font-size: 14px;line-height: 1.5em;}
span.weofferwording16 {font-weight: 700;font-size: 16px;line-height: 1.5em;}
span.weofferwording18 {font-weight: 700;font-size: 18px;line-height: 1.5em;}
span.weofferwording20 {font-weight: 700;font-size: 20px;line-height: 1.5em;}
span.weofferwording22 {font-weight: 700;font-size: 22px;line-height: 1.5em;}
span.weofferwording24 {font-weight: 700;font-size: 24px;line-height: 1.5em;}
span.weofferwording26 {font-weight: 700;font-size: 26px;line-height: 1.5em;}
span.weofferwording28 {font-weight: 700;font-size: 28px;line-height: 1.5em;}
span.weofferwording30 {font-weight: 700;font-size: 30px;line-height: 1.5em;}
span.weofferwording32 {font-weight: 700;font-size: 32px;line-height: 1.5em;}
span.weofferwording34 {font-weight: 700;font-size: 34px;line-height: 1.5em;}
span.weofferwording36 {font-weight: 700;font-size: 36px;line-height: 1.5em;}
span.weofferwording38 {font-weight: 700;font-size: 38px;line-height: 1.5em;}
span.weofferwording40 {font-weight: 700;font-size: 40px;line-height: 1.5em;}
span.weofferwording42 {font-weight: 700;font-size: 42px;line-height: 1.5em;}
span.weofferwording44 {font-weight: 700;font-size: 44px;line-height: 1.5em;}
span.weofferwording46 {font-weight: 700;font-size: 46px;line-height: 1.5em;}
span.weofferwording48 {font-weight: 700;font-size: 48px;line-height: 1.5em;}
span.weofferwording50 {font-weight: 700;font-size: 50px;line-height: 1.5em;}
span.weofferwording52 {font-weight: 700;font-size: 52px;line-height: 1.5em;}
span.weofferwording54 {font-weight: 700;font-size: 54px;line-height: 1.5em;}













































/* We offer Containers */
/* For future new containers, use the base class (weoffercontainerbase), then make a new class specifying height, width and background-image */

.weoffercontainerbase, .weoffercontainer, .weoffercontainerdouble, .weoffercontainerbig, .weoffercontainerbig2, .weoffercontainerbig2b, .weoffercontainerbig2c, .weoffercontainerbig2d, .weoffercontainerbig3, .weoffercontainerbig4, .weoffercontainerbig5, .weoffercontainerbig6, .weoffercontainerbig7, .weoffercontainerbig8, .weoffercontainerbig9, .weoffercontainerbig10, .weoffercontainerhome, .contactcontainer, .contactcontainerleft, .contactcontainerright,.weoffercontainerdoublecontact, .weoffercontainersmall {
	padding: 0px 15px 290px 0px;
	border: none; /* border: 0px solid #a0a0a0; */
	float: left;
	margin: 0px 0px 60px 0px; /* Margin: Top Right Bottom Left */
	text-align: left;
	position: relative;
	z-index: 10;
    background-color: #b3e5fc;
    border-color: #00adef;
    border-style: solid;
    border-width: 0px;
    overflow: hidden;
}



.weoffercontainer {
	width: 1200px;
	height: 380px;
}



.weoffercontainersmall {
	width: 640px;
	height: 210px;
}



.weoffercontainerdouble {
	width: 1200px;
	height: 230px; 
}

.weoffercontainerdoublecontact {
	width: 1200px;
	height: 230px; 
}


.weoffercontainerbig {
	width: 1200px;
	height: 440px;
}

.weoffercontainerbig2 {
	width: 1200px;
	height: 880px; 
}

.weoffercontainerbig2b {
	width: 1200px;
	height: 740px; 
}

.weoffercontainerbig2c {
	width: 1200px;
	height: 540px;
}

.weoffercontainerbig2d {
	width: 1200px;
	height: 370px;
}

.weoffercontainerbig3 {
	width: 1200px;
	height: 1200px; 
}

.weoffercontainerbig4 {
	width: 1200px;
	height: 1700px; 
}

.weoffercontainerbig5 {
	width: 1200px;
	height: 1200px; 
}

.weoffercontainerbig6 {
	width: 1200px;
	height: 1100px; 
}

.weoffercontainerbig7 {
	width: 1200px;
	height: 1300px; 
}

.weoffercontainerbig8 {
	width: 1200px;
	height: 1200px; 
}

.weoffercontainerbig9 {
	width: 1200px;
	height: 1500px; 
}

.weoffercontainerbig9 {
	width: 1200px;
	height: 1600px; 
}

.weoffercontainerbig10 {
	width: 1200px;
	height: 2000px; 
}

.weoffercontainerhome {
	width: 1200px;
	height: 230px;
}







.cyan-background {
background-color: #00A8CC;
}

.darkteal-background {
background-color: #005F6B;
}

.softskyblue-background {
background-color: #B3E5FC;
}

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

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

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

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
























	
	
/* We offer text */

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

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


.weofferwordingfull {
	padding: 0px;
	border: none; /* border: 0px solid #a0a0a0; */
	float: left;
	margin: 30px 30px 30px 30px; /* Margin: Top Right Bottom Left */
	position: relative;
	top: -15px;
	left: 0px;
	z-index: 30;
	text-align:left;
 	font-weight: 400; 
 	font-size: 14px; 
 	line-height: 1.5em; 
 	color: #000000;
}

.weofferwordingbig {
	width: 1060px;
	height: 290px;
}

.weofferwordingfull {
	width: 1140px;
	height: 400px;
}

.weofferwording {
    width: 830px; 
	height: 400px;
}






















/* We Offer Headings */

.weofferfindoutmore {
	width: 370px;
	height: 49px; 
	padding: 0px 0px 0px 0px;
	border: none;
	position: absolute;
	bottom: 30px;
	right: 0px;
	z-index: 50;
}

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

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





















h2.weofferheading, h3.weofferheading {
	width: 1200px; 
	height: 35px; 
	padding: 60px 30px 30px 30px;
	margin: -30px 0px 0px 0px;
	text-align:left;
 	font-weight: 700; 
 	font-size: 44px;
    font-family: 'Lota, sans-serif', sans-serif;
    color: #FFFFFF; /* font colour of weoffer headings */
    line-height: 0.9em;
	position: relative;
	top: 0px;
	left: 0px;
	z-index: 40;
    background-color: #005F6B; /* background colour of weoffer headings */
}

h2.weofferheadingsmaller, h3.weofferheadingsmaller {
	width: 1200px; 
	height: 35px; 
	padding: 60px 30px 30px 30px;
	margin: -30px 0px 0px 0px;
	text-align:left;
 	font-weight: 700; 
 	font-size: 42px;
    font-family: 'Lota, sans-serif', sans-serif;
    color: #FFFFFF; /* font colour of weoffer headings */
 	line-height: 1em;
	position: relative;
	top: 0px;
	left: 0px;
	z-index: 40;
    background-color: #005F6B; /* background colour of weoffer headings */
}










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

.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: 480px;
	z-index: 20;
}







/* Fade bottom of webpages */
.fade_bottom {

position: fixed;
z-index: 99;
bottom: 0;
left: 0;
width: 100%;
height: 20em;
pointer-events: none;
background: url("/storage/images/bottom-fade.webp") bottom center no-repeat;
}
/* Fade bottom of webpages */


















/* CSS buttons and sprites with hover */

/* header special offer General */
.headerspecialofferplasticcards {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-plastic-cards-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferplasticcards:hover {
background-position: 0 -192px;
}
/* header special offer General */



/* header special offer angling */
.headerspecialofferangling {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-angling-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferangling:hover {
background-position: 0 -192px;
}
/* header special offer angling */



/* header special offer archery */
.headerspecialofferarchery {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-archery-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferarchery:hover {
background-position: 0 -192px;
}
/* header special offer archery */



/* header special offer athletics */
.headerspecialofferathletics {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-athletics-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferathletics:hover {
background-position: 0 -192px;
}
/* header special offer athletics */



/* header special offer badminton */
.headerspecialofferbadminton {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-badminton-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferbadminton:hover {
background-position: 0 -192px;
}
/* header special offer badminton */


/* header special offer biodegradable */
.headerspecialofferbiodegradable {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-biodegradable-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferbiodegradable:hover {
background-position: 0 -192px;
}
/* header special offer biodegradable */



/* header special offer boating */
.headerspecialofferboating {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-boating-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferboating:hover {
background-position: 0 -192px;
}
/* header special offer boating */



/* header special offer bodybuilding */
.headerspecialofferbodybuilding {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-bodybuilding-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferbodybuilding:hover {
background-position: 0 -192px;
}
/* header special offer bodybuilding */



/* header special offer bowling */
.headerspecialofferbowling {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-bowling-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferbowling:hover {
background-position: 0 -192px;
}
/* header special offer bowling */



/* header special offer boxing */
.headerspecialofferboxing {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-boxing-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferboxing:hover {
background-position: 0 -192px;
}
/* header special offer boxing */



/* header special offer canoeing */
.headerspecialoffercanoeing {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-canoeing-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialoffercanoeing:hover {
background-position: 0 -192px;
}
/* header special offer canoeing */



/* header special offer combo-cards */
.headerspecialoffercombo {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-combo-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialoffercombo:hover {
background-position: 0 -192px;
}
/* header special offer combo-cards */



/* header special offer cricket */
.headerspecialoffercricket {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-cricket-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialoffercricket:hover {
background-position: 0 -192px;
}
/* header special offer cricket */



/* header special offer cycling */
.headerspecialoffercycling {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-cycling-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialoffercycling:hover {
background-position: 0 -192px;
}
/* header special offer cycling */



/* header special offer ecotough */
.headerspecialofferecotough {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-ecotough-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferecotough:hover {
background-position: 0 -192px;
}
/* header special offer ecotough */



/* header special offer event passes */
.headerspecialofferevent {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-event-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferevent:hover {
background-position: 0 -192px;
}
/* header special offer event passes */



/* header special offer football */
.headerspecialofferfootball {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-football-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferfootball:hover {
background-position: 0 -192px;
}
/* header special offer football */



/* header special offer gift cards */
.headerspecialoffergift {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-gift-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialoffergift:hover {
background-position: 0 -192px;
}
/* header special offer gift cards */



/* header special offer golf */
.headerspecialoffergolf {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-golf-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialoffergolf:hover {
background-position: 0 -192px;
}
/* header special offer golf */



/* header special offer gym */
.headerspecialoffergym {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-gym-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialoffergym:hover {
background-position: 0 -192px;
}
/* header special offer gym */



/* header special offer hockey */
.headerspecialofferhockey {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-hockey-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferhockey:hover {
background-position: 0 -192px;
}
/* header special offer hockey */



/* header special offer hotel key cards */
.headerspecialofferhotelkeycards {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-hotel-key-cards-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferhotelkeycards:hover {
background-position: 0 -192px;
}
/* header special offer hotel key cards */



/* header special offer key tags */
.headerspecialofferkey {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-key-tags-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferkey:hover {
background-position: 0 -192px;
}
/* header special offer key tags */



/* header special offer leisure */
.headerspecialofferleisure {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-leisure-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferleisure:hover {
background-position: 0 -192px;
}
/* header special offer leisure */



/* header special offer loyalty cards */
.headerspecialofferloyalty {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-loyalty-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferloyalty:hover {
background-position: 0 -192px;
}
/* header special offer loyalty cards */



/* header special offer loyalty cards */
.headerspecialoffersalonloyaltycards {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-salon-loyalty-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialoffersalonloyaltycards:hover {
background-position: 0 -192px;
}
/* header special offer loyalty cards */





/* header special offer membership cards */
.headerspecialoffermembership {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-membership-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialoffermembership:hover {
background-position: 0 -192px;
}
/* header special offer membership cards */



/* header special offer metallic plastic cards */
.headerspecialoffermetallic {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-metallic-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialoffermetallic:hover {
background-position: 0 -192px;
}
/* header special offer metallic plastic  cards */



/* header special offer motorsport */
.headerspecialoffermotorsport {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-motorsport-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialoffermotorsport:hover {
background-position: 0 -192px;
}
/* header special offer motorsport */



/* header special offer plastic-free board cards */
.headerspecialofferplasticfreeboard {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-plastic-free-board-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferplasticfreeboard:hover {
background-position: 0 -192px;
}
/* header special offer plastic-free board cards */



/* header special offer pool and snooker */
.headerspecialofferpool {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-pool-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferpool:hover {
background-position: 0 -192px;
}
/* header special offer pool and snooker */



/* header special offer rfid */
.headerspecialofferrfid {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-rfid-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferrfid:hover {
background-position: 0 -192px;
}
/* header special offer rfid */



/* header special offer rowing */
.headerspecialofferrowing {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-rowing-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferrowing:hover {
background-position: 0 -192px;
}
/* header special offer rowing */



/* header special offer rugby */
.headerspecialofferrugby {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-rugby-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferrugby:hover {
background-position: 0 -192px;
}
/* header special offer rugby */



/* header special offer running */
.headerspecialofferrunning {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-running-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferrunning:hover {
background-position: 0 -192px;
}
/* header special offer running */



/* header special offer sailing */
.headerspecialoffersailing {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-sailing-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialoffersailing:hover {
background-position: 0 -192px;
}
/* header special offer sailing */



/* header special offer satin black */
.headerspecialoffersatinblack {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-satin-black-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialoffersatinblack:hover {
background-position: 0 -192px;
}
/* header special offer satin black */



/* header special offer shooting */
.headerspecialoffershooting {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-shooting-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialoffershooting:hover {
background-position: 0 -192px;
}
/* header special offer shooting */



/* header special offer social club */
.headerspecialoffersocial {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-social-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialoffersocial:hover {
background-position: 0 -192px;
}
/* header special offer social club */



/* header special offer sports club */
.headerspecialoffersports {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-sports-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialoffersports:hover {
background-position: 0 -192px;
}
/* header special offer sports club */



/* header special offer squash */
.headerspecialoffersquash {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-squash-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialoffersquash:hover {
background-position: 0 -192px;
}
/* header special offer squash */



/* header special offer swimming */
.headerspecialofferswimming {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-swimming-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferswimming:hover {
background-position: 0 -192px;
}
/* header special offer swimming */



/* header special offer tennis */
.headerspecialoffertennis {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-tennis-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialoffertennis:hover {
background-position: 0 -192px;
}
/* header special offer tennis */



/* header special offer frosted */
.headerspecialofferfrosted {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-frosted-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferfrosted:hover {
background-position: 0 -192px;
}
/* header special offer frosted */



/* header special offer triathlon */
.headerspecialoffertriathlon {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-triathlon-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialoffertriathlon:hover {
background-position: 0 -192px;
}
/* header special offer triathlon */



/* header special offer walking */
.headerspecialofferwalking {
display: block;
width: 380px;
height: 192px;
background: url("/storage/images/header-special-offer-walking-sprite.webp") 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferwalking:hover {
background-position: 0 -192px;
}
/* header special offer walking */



/* header special offer white */
.headerspecialofferwhite {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-white-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferwhite:hover {
background-position: 0 -192px;
}
/* header special offer white */



/* header special offer yachting */
.headerspecialofferyachting {
display: block;
width: 380px;
height: 192px;
background: url(/storage/images/header-special-offer-yachting-sprite.webp) 0 0;
background-repeat: no-repeat; background-size: 380px auto;
}
.headerspecialofferyachting:hover {
background-position: 0 -192px;
}
/* header special offer yachting */










































		.freeartwork {
		display: block;
		width: 640px;
		height: 229px;
		background: url(/storage/images/free-artwork-sprite.webp);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 640px auto;
		overflow: hidden;
		}

		.freeartwork:hover {
		background-position: 0 -230px;
        overflow: hidden;
		}






		.checkartwork {
		display: block;
		width: 640px;
		height: 229px;
		background: url(/storage/images/check-artwork-sprite.webp);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 640px auto;
        overflow: hidden;
		}

		.checkartwork:hover {
		background-position: 0 -230px;
		}













		





























































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

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




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











































































































/* main buttons */















		.mainbuttonquote {
		width: 300px;
		height: 49px;
		display: inline-block;
		background: url(/storage/images/quotationbutton-sprite.webp);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 300px auto;
        overflow: hidden;
		}

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












		.mainbuttonseeexamples {
		width: 300px;
		height: 49px;
		display: inline-block;
		background: url(/storage/images/seeexamplesbutton-sprite.webp);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 300px auto;
        overflow: hidden;
		}

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



		.mainbuttonseeallexamples {
		width: 300px;
		height: 49px;
		display: inline-block;
		background: url(/storage/images/seeallexamplesbutton-sprite.webp);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 300px auto;
        overflow: hidden;
		}

		.mainbuttonseeallexamples:hover {
		background-position: 0 -49px;
        overflow: hidden;
		}



















		.mainbuttonseemembershipexamples {
		width: 287px;
		height: 277px;
        display: inline-block;
		background: url(/storage/images/seemembershipexamplesbutton-sprite.webp);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 287px auto;
        overflow: hidden;
        clear: both;
		}

		.mainbuttonseemembershipexamples:hover {
        background-position: 0px -277px;
        overflow: hidden;
        clear: both;

		}


























		.mainbuttonenquiry {
		display: inline-block;
		width: 300px;
		height: 49px;
		background: url(/storage/images/enquirybutton-sprite.webp);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 300px auto;
        overflow: hidden;
		}

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




		.mainbuttonlearnmore {
		display: inline-block;
		width: 300px;
		height: 49px;
		background: url(/storage/images/findoutmorebutton-sprite.webp);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 300px auto;
        overflow: hidden;
		}

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



		.mainbuttonspecialoffers {
		display: inline-block;
		width: 300px;
		height: 49px;
		background: url(/storage/images/see-more-special-offers-sprite.webp);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 300px auto;
        overflow: hidden;
		}

		.mainbuttonspecialoffers:hover {
		background-position: 0 -49px;
        overflow: hidden;
		}




		.mainbuttonmembershiplearnmore {
		display: inline-block;
		width: 440px;
		height: 49px;
		background: url(/storage/images/findoutmoremembershipbutton-sprite.webp);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 440px auto;
        overflow: hidden;
		}

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



		.mainbuttonloyaltylearnmore {
		display: inline-block;
		width: 440px;
		height: 49px;
		background: url(/storage/images/findoutmoreloyaltybutton-sprite.webp);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 440px auto;
        overflow: hidden;
		}

		.mainbuttonloyaltylearnmore:hover {
		background-position: 0 -49px;
        overflow: hidden;
		}




		.downloadtemplate {
		width: 360px;
		height: 49px;
        display: inline-block;
		background: url(/storage/images/downloadtemplates-sprite.webp);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 360px auto;
		overflow: hidden;
		}
		.downloadtemplate:hover {
		background-position: 0 -49px;
        overflow: hidden;
		}






		.downloadexample {
		width: 360px;
		height: 49px;
        display: inline-block;
		background: url(/storage/images/downloadexamples-sprite.webp);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 360px auto;
        overflow: hidden;
		}
		.downloadexample:hover {
		background-position: 0 -49px;
        overflow: hidden;
		}



		.downloadpdfguide {
		width: 360px;
		height: 49px;
        display: inline-block;
		background: url(/storage/images/downloadpdfguide-sprite.webp);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 360px auto;
		overflow: hidden;
		}
		.downloadpdfguide:hover {
		background-position: 0 -49px;
        overflow: hidden;
		}


		.downloadfreeartworkguide {
		width: 400px;
		height: 49px;
        display: inline-block;
		background: url(/storage/images/freeartworkservicebutton-sprite.webp);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 400px auto;
		overflow: hidden;
		}
		.downloadfreeartworkguide:hover {
		background-position: 0 -49px;
        overflow: hidden;
		}


		.downloadcmykcolourguide {
		width: 400px;
		height: 49px;
        display: inline-block;
		background: url(/storage/images/downloadcmykcolourchart-sprite.webp);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 400px auto;
		overflow: hidden;
		}
		.downloadcmykcolourguide:hover {
		background-position: 0 -49px;
        overflow: hidden;
		}


		.downloadhighresolutionguide {
		width: 400px;
		height: 49px;
        display: inline-block;
		background: url(/storage/images/downloadhighresolution-sprite.webp);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 400px auto;
		overflow: hidden;
		}
		.downloadhighresolutionguide:hover {
		background-position: 0 -49px;
        overflow: hidden;
		}



















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







		.mainbuttonspecialoffers {
		display: inline-block;
		width: 300px;
		height: 49px;
		background: url(/storage/images/see-more-special-offers-sprite.webp);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 300px auto;
        overflow: hidden;
		}

		.mainbuttonspecialoffers:hover {
		background-position: 0 -49px;
        overflow: hidden;
		}



		.mainbuttonordernow {
		display: inline-block;
		width: 300px;
		height: 49px;
		background: url(../storage/images/ordernowbutton-sprite.webp);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 300px auto;
        overflow: hidden;
		}

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














/* main buttons */







































		.viewphoto {
		display: block;
		width: 110px;
		height: 36px;
		background: url(/storage/images/view-photograph-sprite.webp) no-repeat 0 0;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.viewphoto:hover {
		background-position: 0 -36px;
		}



		.viewvideo {
		display: block;
		width: 110px;
		height: 36px;
		background: url(/storage/images/view-video-sprite.webp) no-repeat 0 0;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.viewvideo:hover {
		background-position: 0 -36px;
		}





		.emailusbutton {
		display: inline-block;
		width: 300px;
		height: 49px;
		background: url(/storage/images/emailusbutton-sprite.webp);
        background-position: 0px 0px;
        background-repeat: no-repeat;
        background-size: 300px auto;
        overflow: hidden;
		}

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





































		.inkcolourblack {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/01-black-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourblack:hover {
		background-position: 0 -50px;
		}







		.inkcolourgreydark {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/02-greydark-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourgreydark:hover {
		background-position: 0 -50px;
		}

		.inkcolourgreymedium {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/03-greymedium-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourgreymedium:hover {
		background-position: 0 -50px;
		}

		.inkcolourgreylight {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/04-greylight-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;

		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourgreylight:hover {
		background-position: 0 -50px;
		}

		.inkcolourwhite {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/05-white-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;

		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourwhite:hover {
		background-position: 0 -50px;
		}

		.inkcolourivory {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/06-ivory-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourivory:hover {
		background-position: 0 -50px;
		}

		.inkcolourclear {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/07-clear-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourclear:hover {
		background-position: 0 -50px;
		}

		.inkcolourbluenavy {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/08-bluenavy-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourbluenavy:hover {
		background-position: 0 -50px;
		}

		.inkcolourbluedark {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/09-bluedark-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourbluedark:hover {
		background-position: 0 -50px;
		}

		.inkcolourbluemedium {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/10-bluemedium-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourbluemedium:hover {
		background-position: 0 -50px;
		}

		.inkcolourbluelight {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/11-bluelight-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourbluelight:hover {
		background-position: 0 -50px;
		}

		.inkcolourbluepale {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/12-bluepale-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourbluepale:hover {
		background-position: 0 -50px;
		}

		.inkcolourreddark {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/13-reddark-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourreddark:hover {
		background-position: 0 -50px;
		}

		.inkcolourredmedium {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/14-redmedium-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourredmedium:hover {
		background-position: 0 -50px;
		}

		.inkcolourredlight {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/15-redlight-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourredlight:hover {
		background-position: 0 -50px;
		}

		.inkcolourburgundy {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/16-burgundy-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourburgundy:hover {
		background-position: 0 -50px;
		}

		.inkcolourbrowndark {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/17-browndark-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourbrowndark:hover {
		background-position: 0 -50px;
		}

		.inkcolourbrownmedium {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/18-brownmedium-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourbrownmedium:hover {
		background-position: 0 -50px;
		}

		.inkcolourbrownlight {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/19-brownlight-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourbrownlight:hover {
		background-position: 0 -50px;
		}

		.inkcolourdarkpink {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/20-darkpink-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourdarkpink:hover {
		background-position: 0 -50px;
		}

		.inkcolourpurple {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/21-purple-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourpurple:hover {
		background-position: 0 -50px;
		}

		.inkcolourlilac {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/22-lilac-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourlilac:hover {
		background-position: 0 -50px;
		}

		.inkcolourlightpink {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/23-lightpink-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourlightpink:hover {
		background-position: 0 -50px;
		}

		.inkcolouryellowdark {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/24-yellowdark-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolouryellowdark:hover {
		background-position: 0 -50px;
		}

		.inkcolouryellowbright {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/25-yellowbright-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolouryellowbright:hover {
		background-position: 0 -50px;
		}

		.inkcolourorange {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/26-orange-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourorange:hover {
		background-position: 0 -50px;
		}

		.inkcolourgreendark {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/27-greendark-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourgreendark:hover {
		background-position: 0 -50px;
		}

		.inkcolourgreenmedium {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/28-greenmedium-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourgreenmedium:hover {
		background-position: 0 -50px;
		}

		.inkcolourgreenlight {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/29-greenlight-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourgreenlight:hover {
		background-position: 0 -50px;
		}

		.inkcolourgreenbright {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/30-greenbright-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourgreenbright:hover {
		background-position: 0 -50px;
		}

		.inkcolourturquoise {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/31-turquoise-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourturquoise:hover {
		background-position: 0 -50px;
		}

		.inkcolourmetallicdarkblue {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/32-metallicdarkblue-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourmetallicdarkblue:hover {
		background-position: 0 -50px;
		}

		.inkcolourmetalliclightblue {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/33-metalliclightblue-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourmetalliclightblue:hover {
		background-position: 0 -50px;
		}

		.inkcolourmetallicgreen {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/34-metallicgreen-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourmetallicgreen:hover {
		background-position: 0 -50px;
		}

		.inkcolourmetallicturquoise {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/35-metallicturquoise-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourmetallicturquoise:hover {
		background-position: 0 -50px;
		}

		.inkcolourmetallicpurple {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/36-metallicpurple-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourmetallicpurple:hover {
		background-position: 0 -50px;
		}

		.inkcolourmetallicred {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/37-metallicred-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourmetallicred:hover {
		background-position: 0 -50px;
		}

		.inkcolourmetallicpink {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/38-metallicpink-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourmetallicpink:hover {
		background-position: 0 -50px;
		}

		.inkcolourmetallicsilver {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/39-metallicsilver-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourmetallicsilver:hover {
		background-position: 0 -50px;
		}

		.inkcolourmetallicgold {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/40-metallicgold-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourmetallicgold:hover {
		background-position: 0 -50px;
		}

		.inkcolourmetalliccopper {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/41-metalliccopper-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourmetalliccopper:hover {
		background-position: 0 -50px;
		}

		.inkcolourholoprint {
		display: block;
		width: 250px;
		height: 50px;
		background: url(/storage/images/ink-colour-thumbs/42-holoprint-ink-sprite.webp) no-repeat 0 0;
        background-size: 250px auto;
		overflow: hidden;
		text-indent: -15000px;
		font-size: 0px;
		line-height: 0px;
		}

		.inkcolourholoprint:hover {
		background-position: 0 -50px;
		}













































/* Drop down menu */
.menu
{
    background: transparent; /* background colour menu */
    border-radius: 15px;
    margin-top: 8px;
    margin-bottom: 8px;
    float: left;
}


.menu ul
{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  z-index: 5050;
  position: relative;
}




.menu ul li
{
  /*background: #008acc;*/ /* background colour of main buttons */
  list-style: none;
  padding: 4px 4px 0px 4px;
  position: relative;
  transition: 0s;
  display: block;
}

.menu ul li:hover ul
{
  display: block;
  position: absolute;
  margin-top: 0px;
  margin-left: 33px;
  background: #005F6B; /* Dark teal background colour of dropdown behind buttons */
  border-radius: 15px;
  width: 230%;
  padding: 10px 2px 10px 0px;
  box-shadow: 10px 10px 33px 0px rgba(0, 0, 0, 0.5)
}


.menu ul li menuitem a:hover
{
  background: #00A8CC; /* Cyan colour of selected menu item with mouse over */
  border-radius: 15px;
}




.menu ul li a
{
  color: #B3E5FC;
  text-decoration: none;
  padding: 0px 0px 0px 20px;
  font-size: 18px; /* font size */
  display: flow-root;
  text-align: left; /* position of text in drop down list */
  line-height: 40px;
  font-weight: 400;
  font-family: "Avenir Next";
}



/* outline colour of buttons on mouse over - make this the same as above */
/*.menu li:hover {
  background: #000000; 
  cursor: default;
}
/* outline colour of buttons on mouse over - make this the same as above */


.menu ul li ul
{
  display: none;
}


.menu a {
  text-decoration: none;
}

.menu nav {
  font-family: "Avenir Next";
}

.menu ul {
  background: transparent; /* background colour of main menu */
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.menu li {
  color: #fff;
  /*background: #28c60f;*/ /* background colour of buttons */
  display: block;
  float: left;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition-duration:  0.5s;
  border-radius: 0px;
}
  
.menu li a {
color: #fff;
}


.menu ul li ul {
  background: #28c60f;
  visibility: hidden;
  opacity: 0;
  min-width: 12rem; /* minimum width of dropdowns */
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  left: 0;
  display: none;
  font-size: 30px;
}

.menu ul li:hover > ul,
.menu ul li:focus-within > ul, /* this is the line we add */
.menu ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

.menu ul li ul li {
  clear: both;
  width: 96%;
}





























/* header button email us BUTTON */
.headeremailusbutton {
width: 320px;
height: 81px;
display: inline-block;
background: url(/storage/images/header-email-us-sprite.webp);
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 320px auto;
overflow: hidden;
}
.headeremailusbutton:hover {
background-position: 0px -81px;
overflow: hidden;
}
/* header button email us BUTTON */



/* header button email us BANNER */
.headeremailusbanner {
width: 600px;
height: 75px;
display: inline-block;
background: url(/storage/images/header-email-us-sprite.webp);
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 600px auto;
overflow: hidden;
}
.headeremailusbanner:hover {
background-position: 0px -75px;
overflow: hidden;
}
/* header button email us BANNER */






/* banner button Design Service */
.bannerfreeartworkbutton {
width: 125px;
height: 115px;
background: url("/storage/images/banner-free-artwork-button-sprite.webp") 0px 0px;
background-repeat: no-repeat; background-size: 125px auto;
overflow: hidden;
}
.bannerfreeartworkbutton:hover {
background-position: 0 -115px;
}
/* header button Design Service */












/* new menu button graphics */

/* Free Photorealistic Proof */
.dropdown-free-photorealistic-proof-button {
width: 256px;
height: 22px;
display: inline-block;
background: url(../storage/images/dropdown-free-photorealistic-proof-button-sprite.webp);
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 256px auto;
overflow: hidden;
}     
.dropdown-free-photorealistic-proof-button:hover {
background-position: 0px -22px;
overflow: hidden;
}
/* Free Photorealistic Proof */



/* design service */
.dropdown-design-service-button {
width: 217px;
height: 22px;
display: inline-block;
background: url(../storage/images/dropdown-design-service-button-sprite.webp);
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 217px auto;
overflow: hidden;
}     
.dropdown-design-service-button:hover {
background-position: 0px -22px;
overflow: hidden;
}
/* design service */



/* Order Now */
.dropdown-order-now-button {
width: 125px;
height: 22px;
display: inline-block;
background: url(../storage/images/dropdown-order-now-button-sprite.webp);
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 125px auto;
overflow: hidden;
}     
.dropdown-order-now-button:hover {
background-position: 0px -22px;
overflow: hidden;
}
/* Order Now */



/* Get Your Quote Now */
.dropdown-get-your-quote-now-button {
width: 221px;
height: 22px;
display: inline-block;
background: url(../storage/images/dropdown-get-your-quote-now-button-sprite.webp);
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 221px auto;
overflow: hidden;
}     
.dropdown-get-your-quote-now-button:hover {
background-position: 0px -22px;
overflow: hidden;
}
/* Get Your Quote Now */



/* BIG Get Your Quote Now */
.header-get-your-quote-now-button {
width: 442px;
height: 42px;
display: inline-block;
background: url(../storage/images/header-get-your-quote-now-button.webp);
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 442px auto;
overflow: hidden;
}     
.header-get-your-quote-now-button:hover {
background-position: 0px -43px;
overflow: hidden;
}
/* BIG Get Your Quote Now */



/* Help & Info */
.dropdown-help-and-info-button {
width: 123px;
height: 22px;
display: inline-block;
background: url(../storage/images/dropdown-help-and-info-button-sprite.webp);
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 123px auto;
overflow: hidden;
}     
.dropdown-help-and-info-button:hover {
background-position: 0px -22px;
overflow: hidden;
}
/* Help & Info */



/* View All Card Types */
.dropdown-view-all-card-types-button {
width: 132px;
height: 22px;
display: inline-block;
background: url(../storage/images/dropdown-view-all-card-types-sprite.webp);
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 132px auto;
overflow: hidden;
}     
.dropdown-view-all-card-types-button:hover {
background-position: 0px -22px;
overflow: hidden;
}
/* View All Card Types */



/* Example Designs */
.dropdown-example-designs-button {
width: 183px;
height: 22px;
display: inline-block;
background: url(../storage/images/dropdown-example-designs-button-sprite.webp);
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 183px auto;
overflow: hidden;
}     
.dropdown-example-designs-button:hover {
background-position: 0px -22px;
overflow: hidden;
}
/* Example Designs */



/* Personalisation Service */
.dropdown-personalisation-service-button {
width: 238px;
height: 22px;
display: inline-block;
background: url(../storage/images/dropdown-personalisation-service-button-sprite.webp);
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 238px auto;
overflow: hidden;
}     
.dropdown-personalisation-service-button:hover {
background-position: 0px -22px;
overflow: hidden;
}
/* Personalisation Service */



/* Artwork Guides */
.dropdown-artwork-guides-button {
width: 168px;
height: 22px;
display: inline-block;
background: url(../storage/images/dropdown-artwork-guides-button-sprite.webp);
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 168px auto;
overflow: hidden;
}     
.dropdown-artwork-guides-button:hover {
background-position: 0px -22px;
overflow: hidden;
}
/* Artwork Guides */



/* Contact us / Enquire */
.dropdown-contact-us-enquire-button {
width: 214px;
height: 22px;
display: inline-block;
background: url(../storage/images/dropdown-contact-us-enquire-button-sprite.webp);
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 214px auto;
overflow: hidden;
}     
.dropdown-contact-us-enquire-button:hover {
background-position: 0px -22px;
overflow: hidden;
}
/* Contact us / Enquire */



/* Ink / Foil Colours */
.dropdown-ink-foil-colours-button {
width: 179px;
height: 22px;
display: inline-block;
background: url(../storage/images/dropdown-ink-foil-colours-button-sprite.webp);
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 179px auto;
overflow: hidden;
}     
.dropdown-ink-foil-colours-button:hover {
background-position: 0px -22px;
overflow: hidden;
}
/* Ink / Foil Colours */








/* More info when clicked */
    .more-info {
      max-height: 0;
      overflow: hidden;
      transition: max-height 1s ease;
      background: #f0f0f0;
      border-left: 1px solid #f0f0f0;
      border-radius: 0px;
      font-family: Arial, sans-serif;
    }

    #toggle:checked ~ .more-info {
      max-height: 1200px; /* Enough to show all content */
    }
/* More info when clicked */







.headersticky {
    background: #333;
    color: white;
    padding: 10px;
    text-align: center;
}

.sticky-header-desktop {
    background: #f4f4f4;
    padding: 10px 20px;
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 20; /* Sticks to the top of the viewport */
    z-index: 1000; /* Make sure it stays on top */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow */
}

.contentsticky {
    padding: 15px;
    height: 2000px; /* To create a scrollable area */
}



















  .gallery {
    display: flex;
    flex-wrap: wrap;           /* allow images to wrap onto new rows */
    gap: 60px;                 /* space between images */
    justify-content: center;   /* justify the row of images */
    float: left;
  }


    .gallery img {
    flex: 1 1 500px;          /* grow, shrink, and base width */
    width: 500px;             /* default / fallback width */
    max-width: 500px;         /* sets maximum permitted width of image */
    min-width: 350px;         /* sets minimum permitted width of image */
    height: auto;             /* set image proportions */
    border-radius: 8px;
    object-fit: cover;        /* Ensures the image fills its box completely while preserving aspect ratio; some parts may be cropped so the box has no empty space */
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,.15);  /*Adds a shadow with zero offset and zero blur, which in practice makes the shadow invisible (you could change these values later to create a visible soft shadow) */
  }










  .briefspec {
    display: flex;
    max-width: 1200px;
    flex-wrap: wrap;           /* allow images to wrap onto new rows */
    gap: 0px 0px;              /* space between images */
    justify-content: center;   /* justify the row of images */
	float: left;
	padding: 0px 0px 0px 0px;
  }


    .briefspec img {
    flex: 1 1 225px;          /* grow, shrink, and base width */
    width: 225px;             /* default / fallback width */
    max-width: 350px;         /* sets maximum permitted width of image */
    min-width: 100px;         /* sets minimum permitted width of image */
    height: auto;             /* set image proportions */
    border-radius: 8px;
    object-fit: cover;        /* Ensures the image fills its box completely while preserving aspect ratio; some parts may be cropped so the box has no empty space */
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,.15);  /*Adds a shadow with zero offset and zero blur, which in practice makes the shadow invisible (you could change these values later to create a visible soft shadow) */
  }








.grid-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 10px;
  margin: 30px 0px 30px 30px;
}


.grid-row {
  display: flex;
  gap: 30px;
  justify-content: flex-start;
  flex-wrap: wrap; /* allows items to spill onto new rows */
}


.grid-row-centre {
  justify-content: center;
}


.grid-row a {
  flex: 0 0 calc(20% - 30px);
  display: block;
  line-height: 0 !important;
  text-decoration: none !important;
}

.grid-row a:hover {
  text-decoration: none !important;
  line-height: 0 !important;
}

.grid-row img {
  width: 100%;
  height: auto;
  display: block;
}


.grid-container a.fancybox,
.grid-row a.fancybox {
  display: block;
  line-height: 0 !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.grid-container a.fancybox:hover,
.grid-container a.fancybox:active,
.grid-container a.fancybox:focus,
.grid-row a.fancybox:hover,
.grid-row a.fancybox:active,
.grid-row a.fancybox:focus {
  line-height: 0 !important;
  text-decoration: none !important;
  outline: none;
}




.grid-row a.fancybox,
.grid-container a.fancybox {
  display: block;
  line-height: 0 !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  font-size: 0 !important;
}

.grid-row a.fancybox:link,
.grid-row a.fancybox:visited,
.grid-row a.fancybox:active,
.grid-row a.fancybox:hover,
.grid-row a.fancybox:focus,
.grid-container a.fancybox:link,
.grid-container a.fancybox:visited,
.grid-container a.fancybox:active,
.grid-container a.fancybox:hover,
.grid-container a.fancybox:focus {
  line-height: 0 !important;
  text-decoration: none !important;
  font-size: 0 !important;
  outline: none !important;
}







@media (max-width: 768px) {

.grid-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 10px;
  margin: 30px 0px 30px 0px;
}


.grid-row {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }

.grid-row a {
  flex: 0 0 calc(30% - 0px);
  line-height: 0 !important;
  text-decoration: none !important;
}
  


}





















.testcss {
	width: 690px;
	margin: 15px 0px 15px 0px; /* Margin: Top Right Bottom Left */
	padding: 0px 0px 0px 0px; /* Padding: Top Right Bottom Left */
	border-top: 2px solid #f1f1f1;
	float: left;
    text-align:justify;
    border-radius: 15px;
    border: 2px solid #cccccc;
    height: 600px;
    background: grey; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(white, grey); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(white, grey); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(white, grey); /* For Firefox 3.6 to 15 */
    background: linear-gradient(white, grey); /* Standard syntax (must be last) */
}









/* Price examples */
  .price-section { font-family: Arial, Helvetica, sans-serif; padding: 2rem 1.5rem 0rem 1.5rem; max-width: 600px; }
  .price-heading { font-size: 22px; font-weight: 700; color: #333; margin: 0 0 6px; }
  .price-sub { font-size: 14px; color: #666; margin: 0 0 20px; }
  .price-table { width: 100%; border-collapse: collapse; font-size: 15px; }
  .price-table thead tr { background: #00A8CC; color: #fff; }
  .price-table thead th { padding: 12px 16px; text-align: left; font-weight: 600; font-size: 14px; }
  .price-table thead th:last-child { text-align: right; }
  .price-table tbody tr { border-bottom: 1px solid #e8e8e8; }
  .price-table tbody tr:last-child { border-bottom: none; }
  .price-table tbody tr:hover { background: #fdf5f6; }
  .price-table td { padding: 11px 16px; color: #333; }
  .price-table td:last-child { text-align: right; font-weight: 600; color: #00A8CC; }
  .qty-badge { display: inline-block; background: #f5f5f5; border-radius: 4px; padding: 2px 10px; font-size: 14px; font-weight: 700; color: #333; min-width: 40px; text-align: center; }
  .popular-row td { background: #fff8f8; }
  .popular-badge { display: inline-block; background: #00A8CC; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 3px; margin-left: 8px; font-weight: 600; vertical-align: middle; }
  .vat-note { font-size: 12px; color: #888; margin-top: 12px; }
  .vat-note span { color: #00A8CC; font-weight: 600; }











































}