@charset "UTF-8";

/* bootstrap */

.dropdown-menu 
{
	/*max-width:98%;	*/
}
p
{
	margin-bottom: 1.5rem;
	color: #555555;
}




@font-face {
  font-family: WorkSans;
  src: url(/fonts/WorkSans.ttf);
}


/* ############ nav bar ##################*/



.navbar-brand
{
	font-family: "Century Gothic";
	font-size:20px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
	letter-spacing: -1px;
}
.navbar-brand-23
{
	font-family: "WorkSans";
	font-size:30px;
	letter-spacing: -1px;
	color: #fff;
	text-decoration:none;
	margin: -5px 20px 0 0;
}

.navbar-brand-23:hover {
  color: #fff; /* Bootstrap's standard red */
  text-decoration: none; /* Optional: remove underline if any */
}


.navbar-dark .navbar-nav .nav-link {
   font-family: "Century Gothic";
   font-size:20px;
   color: #fff;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
   letter-spacing: -1px;
}

.navbar-dark-23 .navbar-nav-23 .nav-link-23{
   font-family: "WorkSans";
   font-size:16px;
   color:#CCC;
   text-decoration:none;
   margin: 0 25px -2px 0;
}

.navbar-dark-23 .navbar-nav-23 .nav-link-23:hover {
  color: #FFF;
}

.navbar-dark
{
	background:#4a4a4a; 
	border-top: 1px solid #FFF; 
	border-bottom:1px solid #fff;
	box-shadow: 0px 1px #4a4a4a;
	padding: 5px 0 5px 0;
}
.navbar-dark-23
{
	background:#212529; 
 
	border-bottom:1px solid #fff;

	padding: 20px 0 20px 0;
}
@media (max-width: 768px) {
.navbar-brand
{
	font-size:18px;
}
.navbar-brand-23
{
	font-size:18px;
}
.navbar-dark .navbar-nav .nav-link {
    font-size:18px;
}
.navbar-dark-23 .navbar-nav-23 .nav-link-23 {
    font-size:18px;
	
}
}


@media (min-width: 768px) {
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}
.navbar-expand-lg-23 .navbar-nav-23 .nav-link-23 {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}
}







/* ##############################*/













#save_text
{
	font-size: 14px;	
}

.page-header
{
	background: #FFF;
	padding: 20px;
	margin: 20px 0 20px 0;
	outline: 1px solid #FFF;
    border: 1px dashed #929292;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}
.page-header h1 {
    font-family: "Century Gothic";
    font-size: 32px;
    color: #5f5f5f;
    font-weight: bold;
	margin:0;
	
}
@media (max-width: 768px) {
.page-header h1 {
	font-size: 24px;
}
}





.page-header p
{
	color: #505050;
	font-size: 20px;
	margin: 0;
}
.page-header2
{
	background: linear-gradient(to right, #86b5db, #a0c3df, #86b5db);
	border: 2px solid #fff;
	margin: 20px 0 20px 0;
	padding: 20px;
}
.page-header2 h1
{
	margin:0 0 15px 0;
	font-family: "Century Gothic";
	font-size:32px;
	color:#fff;
	 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);

	border-bottom: 1px dashed #e5e5e5;
}
.page-header2 p
{
	color: #505050;
	font-size: 20px;
	margin: 0;
}




.bm10
{
	margin: 0 0 10px 0 !important;	
}
.bm20
{
	margin: 0 0 20px 0 !important;	
}
.bm30
{
	margin: 0 0 30px 0 !important;	
}
.bm40
{
	margin: 0 0 40px 0 !important;	
}
.tm10
{
	margin: 10px 0 0 0 !important;		
}
.tm20
{
	margin: 20px 0 0 0 !important;		
}
.tm30
{
	margin: 30px 0 0 0 !important;	
}
.tm40
{
	margin: 40px 0 0 0 !important;	
}
.h100
{
	height: 100px;	
}

.quicklista{
	list-style-type: none !important;
	padding:0;
}
.quicklista li
{
	font-size: 22px;
	color: #555;
	list-style-type: none !important;
	margin: 0 0 15px 0;
	padding: 0 0 0 40px;
	line-height: 28px;
}
@media (max-width: 768px)
{
	.quicklista li
	{
		font-size: 18px;
		color: #555;
		list-style-type: none;
		margin: 0 0 15px 0;
		padding: 0 0 0 40px;
		line-height: 28px;
	}
}

.nicelist
{
	padding:0;
}
.nicelist li
{
	font-size: 18px;
	color: #555;
	list-style-type: none;
	margin: 0 0 15px 0;
	padding: 0 0 0 40px;
	line-height: 28px;
	position: relative;
}

.nicelist li:before
{
	position: absolute;
	font-family: FontAwesome;
	content: "\f00c";
	font-size: 26px;
	color: #93deae;
	text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.6);
	left: 0;
}

@media (max-width: 768px) {
.nicelist li
{
	font-size: 15px;
	padding: 0 0 0 30px;
	line-height: 20px;
}

.nicelist li:before
{
	font-size: 20px;
}
}



.bulletlist
{
	padding:0;
}
.bulletlist li
{
	font-size: 18px;
	color: #555;
	list-style-type: disc;
	margin: 0 0 0 40px;
	padding: 0 0 0 10px;
	line-height: 28px;
	position: relative;
}


@media (max-width: 768px) {
.bulletlist li
{
	font-size: 15px;
	padding: 0 0 0 10px;
	line-height: 20px;
}
}




.modal-header
{
	background: #333;
	color: #FFF;
}
.modal-header .close
{
	color: #FFF;
}
.modal-body
{
	paddding: 20px;
	background: #82b1d8;
}





/* custom */

body
{
	background: #82b1d8;
	background: linear-gradient(to right, #82b1d8, #a5c3dc, #82b1d8);
	
}

@font-face {
    font-family: "Century Gothic";
    src: url(gothic.TTF);
}

.whitebg
{
	background: #FFF;
}

.emailtel
{
	font-family: "Century Gothic";
	font-size:20px;
	color: #246092;
}

.hero
{
	margin: 20px 0 20px 0;
}

.reviews
{
	background: #FFF;
	border-top: 1px dashed #999;
	border-bottom: 1px dashed #999;
	margin: 20px 0 20px 0;
	padding: 10px;
}
.reviews-title p
{
	font-family: "Century Gothic";
	font-size:30px;
	line-height: 40px;
	color: #73a5cd;
}
.reviews-title p span
{
	font-family:Tahoma, Geneva, sans-serif;
	font-size:20px;
	line-height: 20px;
	color: #555;
}
.reviews-single p
{
	margin:0;
	font-size:17px;
	line-height: 22px;
}
.reviews-single p span
{
	font-size:14px;
	font-weight: bold;
	color: #999;
}
@media (max-width: 992px) {
.reviews-title p{
    font-size:24px;
}
.reviews-single p
{
	font-size:15px;
	line-height: 20px;
}

}




.pagecontent, .homepagecontent
{
	background: #FFF;
	padding: 20px;
	outline: 1px solid #FFF;
    border: 1px dashed #929292;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
	margin: 0 0 20px 0;
}
.pagecontent
{
	min-height: 500px !important;	
}
.pagecontent h2, .homepagecontent h2
{
	font-family: "Century Gothic";
	font-size:26px;
	font-weight: normal;
	color: #698499;
}
.pagecontent h3,  .homepagecontent h3
{
	font-family: "Century Gothic";
	font-size:20px;
	font-weight: bold;
	color: #333;
	margin: 0;
}
p
{
	font-size:15px;
	color: #555555;
}
.hdots
{
	height: 1px;
	border-top: 1px dashed #CCC;
}
@media (max-width: 768px) {
.pagecontent h2, .homepagecontent h2
{
	font-size: 20px;
}
.pagecontent h3,  .homepagecontent h3
{
	font-size: 18px;
}
p
{
	font-size:15px;
}
}

.homepage-belowbanner
{
	background-color: rgba(0, 0, 0, 0.25);
	padding: 5px;
	border-bottom: 5px solid #555;
	font-family: "Century Gothic";
	font-size:18px;
	color:#FFF;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
	margin: 0 0 20px 0;
}



.page-belowbanner
{
	background-color: #f2f2f2;
	padding: 12px;
	border-bottom: 4px solid #dcdcdc;
	border-top: 4px solid #dcdcdc;
	margin: 0 0 20px 0;
}
.page-belowbanner p
{
	padding: 0;
	font-family: "Century Gothic";
	font-size:18px;
	color:#505050;
	margin: 0;
	font-weight:bold;
}

.productbox
{
	background:#e1e1e1;
	
	border: 2px solid #FFF;
	outline: 1px solid #999;
	overflow: hidden;
	margin: 0 0 20px 0;
	padding:0 0 10px 0;
}

.productbox h2
{
	margin:15px 0 15px 0;
	padding:3px;
	font-family: "Century Gothic";
	font-size:22px;
	color:#FFF;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
	background: #757575;
	border-top: 2px #63727d solid;
	border-bottom: 2px #63727d solid;
	text-align: center;
}
.productbox img, .sub-productbox img
{
	
}
.productbox p, .sub-productbox p
{
	margin: 0 15px 0 15px;
}
.product-image, .sub-product-image
{
	text-align:center;
	padding: 0 15px 10px 15px;
}
.sub-productbox
{
	background:#e1e1e1;	
	background: linear-gradient(#e1e1e1, #ffffff, #e1e1e1);
	border: 2px solid #FFF;
	overflow: hidden;
	margin: 0 0 20px 0;
}

.sub-productbox h3
{
	margin:15px 0 15px 0;
	padding:3px;
	font-family: "Century Gothic";
	font-size:22px;
	color:#404040;
	text-align: center;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	font-weight: bold;
}


.tablehead
{
    background: #4a4a4a;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #fff;
    box-shadow: 0px 1px #4a4a4a;
    padding: 5px 0 5px 0;
	
}
.tablehead th
{
	color: #FFF;
	font-family: "Century Gothic";
	font-size: 24px;
	font-weight: normal;
}
.table td
{
	font-size: 18px;
	color:#333;
}
@media (max-width: 768px) {
.table td
{
	font-size: 15px;
}
}


.btn
{
    color: #FFF;
	font-family: "Century Gothic";
	font-size: 20px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
	transition: border 0.3s;
	box-shadow: 0px 1px #4a4a4a;
	word-break: break-word;
	white-space: normal;
}
.btn:hover
{
	color: #FFF;
	border: 1px solid #FFF;
}
.btn-red
{
	background: linear-gradient(#e66465, #c23f4c);
}
.btn-grey
{
	background: linear-gradient(#666, #333);
}
.btn-green
{
	background: linear-gradient(#68da7e, #3ead6a);
}
.btn-blue
{
	background: linear-gradient(#8bb6d9, #799fbe);
}

.brands
{
	background: #FFF;
	border-top: 1px dashed #999;
	border-bottom: 1px dashed #999;
	margin: 0 0 20px 0;
	padding: 10px 0 10px 0;
}


.banner
{
	padding: 80px 20px 80px 20px;
	background-image: url(images/banner-bg8.png);
	background-repeat: no-repeat;
	background-position: 100% 50%;
	 
}
@media (max-width: 1200px) {
.banner
{
	background-size: 50%;
}
}
@media (max-width: 992px) {
.banner
{
	padding: 20px 20px 20px 20px;
	background-size: 50%;
}
}

.banner h1
{
	font-family: "Century Gothic";
	font-size: 34px;
	color: #666666;
	line-height: 28px;
	margin-bottom: 20px;
}
.banner p
{
	font-family: "Century Gothic";
	font-size: 28px;
	color: #FFF;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
.banner-btn
{
	padding: 10px 30px 10px 30px;
}

@media (max-width: 768px) {
.banner
{
	background-image: none;
	text-align: center;
}


.banner h1
{
	font-size: 26px;
}
.banner p
{
	font-size: 22px;
}


.new_banner
{
	text-align: center;
}
.new_banner h1
{
	font-size: 26px;
}
.new_banner p
{
	font-size: 22px;
}

}


.text-red
{
	color: #da5656 !important;
}
.text-red2
{
	color: #fe5154 !important;
	font-size: 32px !important;
	font-weight: bold;
}

.thumbimg
{
    outline: 2px solid #ffffff;
    border: 1px solid #e1e1e1;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
}
.thumbimg2
{
    outline: 1px solid #fff;
    border: 1px solid #cecece;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);

}

.homeinfo
{
	padding: 15px;
}
.homeinfo h1
{
	padding: 0;
	margin: 0;
	font-family: "Century Gothic";
	font-size: 30px;
	color: #2d7dd6;
}





.samples-section
{
	background: #FFF;
	padding: 20px;
	margin: 0 0 20px 0;
}
.samples-section img
{
	border: 2px solid #fff;
	outline: 1px solid #b8b8b8;
	margin: 0 0 10px 0;
}


.reviewordertable
{
	margin: 0 0 40px 0;	
}
.reviewordertable td
{
	padding: 8px;
}
.reviewordertable th
{

	background: #4a4a4a;
	font-family: "Century Gothic";
	font-size: 26px;
	color: #fff;
	font-weight: normal;
	
	
	background: #4a4a4a;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #fff;
    box-shadow: 0px 1px #4a4a4a;
    padding: 5px 0 5px 10px;
}

.orderform
{
	background: #e0e0e0;
	border: 2px solid #fff;
	outline: 1px solid #ccc;
	padding: 10px;
	margin: 15px 0 30px 0;
}

.orderform label
{
	margin: 0;
	font-weight: bold;
	color: #555;
}
.orderform label span
{
	font-weight: normal;
	font-style: italic;
}

.orderform h2
{
	font-family: "Century Gothic";
	font-size: 30px;
	color: #73a5cd;
	border-bottom: 1px dashed #CFCFCF;
	margin: 0 0 20px 0;
}

.infobox
{
	margin: 0 0 20px 0;
	padding: 10px;
}
.infobox h2
{
	margin:1px 0 10px 0;
	padding:3px;
	font-family: "Century Gothic";
	font-size:18px;
	font-weight: bold;
	color:#404040;
	border-bottom: 1px dashed #333;
}

@media (min-width: 992px) {
.cta100
{
	height: 100px;
}
}
.cta, .cta100
{
    /* background: linear-gradient(to right, #86b5db, #a0c3df, #86b5db); */
    background-color: #f0e1c2;
    border: 2px solid #fff;
    outline: 1px solid#bcbcbc;
    margin: 0 0 20px 0;
    padding: 15px;
    overflow: hidden;
}
.cta h2, .cta100 h2
{
    margin: 0 0 5px 0;
    font-family: "Century Gothic";
    font-size: 23px;
    color: #594319;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0);
    /* border-bottom: 1px dashed #e5e5e5; */
}
.cta p, .cta100 p
{
	color: #7e7e7e;
	font-size: 16px;
	margin: 0;
	line-height: 20px;
}

.quickquery {
    background: #e3e3e3;
    padding: 10px;
    margin: 15px 0 15px 0;
    outline: 1px solid #d6d6d6;
    border: 2px solid#ffffff;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
}
.quickquery label
{
	margin: 0;
	font-weight: bold;
	color: #555;	
}



.review-page-single
{
	border-bottom: 1px dashed #CCC;
	margin: 0 0 20px 0;
	
}
p.review-page-customer
{
	font-size: 22px;
	padding: 0 ;
	margin: 0;
}
p.review-page-quote
{
	font-size: 18px;
	padding: 0;
	margin: 0;
}
p.review-page-date
{
	font-size: 16px;
	padding: 0;
	margin: 0 0 10px 0;
	color: #999;
}


@media (max-width: 768px) {
p.review-page-quote
{
	font-size: 15px;
}
{
	font-size: 13px;
}
p.review-page-customer
{

	font-size: 20px;
}
}


.fa-star, .fa-star-o
{
	color:#febf14;
}
.fa-quote-left, .fa-quote-right
{
	color:#999;
}
















.rating { 
  border: none;
  float: left;
  text-align: center;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 30px;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > label { 
	color: #555; 
	float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #e4b021; cursor:pointer; } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #febf14; cursor:pointer; } 




/* getaddress.io */

#postcode_lookup, #bill_postcode_lookup
{
	margin: 0 0 20px 0;	
	overflow: hidden;
}
#opc_input
{
	width: 48%;	
	display: block;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	float: left;
	}
#opc_button
{
	width: 48%;
	padding: 5px;
    line-height: 1.5;
	float: right;
	
}
#opc_dropdown
{
	width: 100%;	
	display: block;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	float: left;
	margin: 10px 0 0 0;
}
#opc_error_message
{
	margin: 10px 0 0 0;
	color: #F00;
}








footer
{
	background: #212529;
	border-top: 1px solid #FFF;
}

footer ul{margin:0;padding:20px 0 0 0;}
footer ul li{margin:0;padding:0;list-style-type:none;display:block;margin:0;}
footer .firstlink{margin:0 0 5px 0 !important;}
footer ul li a:link,
footer ul li a:visited,
footer ul li a:active{text-decoration:none;font-size:14px;color:#ccc;margin:0 0 0 10px;font-family:"WorkSans" !important; }
footer ul li a:hover{text-decoration:underline;}
footer ul .firstlink a:link,
footer ul .firstlink a:visited,
footer ul .firstlink a:active{font-size:22px !important;color:#dc3545 !important;margin:0 0 0 10px !important;font-family:"WorkSans", Arial, Helvetica, sans-serif !important;}
footer ul .firstlink a:hover{text-decoration:none;}






































#pagecontainer h1
{
	font-family: "WorkSans";
	font-size:36px;
	color: #111;
	margin: 0 0 20px 0;
}
#pagecontainer h2
{
	font-family: "WorkSans";
	font-size:28px;
	color: #111;
}
#pagecontainer h3
{
	font-family: "WorkSans";
	font-size:22px;
	color: #111;
}
#pagecontainer h5
{
	font-family: "WorkSans";
	font-size:18px;
	color: #323c49;
}
#pagecontainer p
{
	font-family: "WorkSans";
	font-size:15px;
	color: #111;
}
#pagecontainer a
{
	font-family: "WorkSans";
	font-size:15px;
	color: #5183cf;
}

.breadcrumb{
	background-color: #FFF;
}

#pagecontainer ul li
{
	font-family: "WorkSans";
	font-size:15px;
	color: #111;
}
#pagecontainer button
{
	font-family: "WorkSans";
	font-size:15px;
	color: #fff;
}
#pagecontainer .btn
{
	font-family: "WorkSans";
	font-size:15px;
	color: #fff;
}
.flex-grow-1
{
	flex-grow: 1 !important;
}


#pagecontainer label,
#pagecontainer input,
#pagecontainer option,
#pagecontainer textarea
{
	font-family: "WorkSans";
	font-size:15px;
	color: #111;
}

#pagecontainer .image-shadow
{
-webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.25);
box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.25);
}

#pagecontainer  .table-striped>thead {
   background-color: white;
 }
#pagecontainer  .table-striped>tbody>tr:nth-child(odd)>td, 
#pagecontainer  .table-striped>tbody>tr:nth-child(odd)>th {
   background-color: #f8fafc;
 }
#pagecontainer  .table-striped>tbody>tr:nth-child(even)>td, 
#pagecontainer  .table-striped>tbody>tr:nth-child(even)>th {
   background-color: #fff;
 }