@font-face {
    font-family: 'hk_novaregular';
    src: url('../fonts/hknova-regular-webfont.woff2') format('woff2'),
         url('../fonts/hknova-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'hk_novamedium';
    src: url('../fonts/hknova-medium-webfont.woff2') format('woff2'),
         url('../fonts/hknova-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/**
 * Base Styling
 */
.clear {
	clear:both;
}

body {
	font-family: "hk_novaregular", sans-serif;
}

a {
}

a:hover,
a:focus {
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	font-family: "hk_novamedium", sans-serif;
	color: #2c4f8d;
}

strong, b {
	font-family: "hk_novamedium", sans-serif;
}

img { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

ul > li ul { list-style-type: circle; }
ol > li > ol { list-style-type: lower-alpha; }
ol > li > ol > li > ol	{ list-style-type: lower-roman; }
blockquote { font-family: Georgia, Times, "Times New Roman", serif; font-style: italic; padding: 0 8px 0 20px; border-left: 5px solid #cccccc; overflow: hidden; }

input[type='submit']:not(.btn) {
	border-radius: 3px;
	background: #e2e2e2;
	color: #333333;
	border: 1px solid #888888;
	cursor: pointer;
}

.btn-success {
	color: var(--white);
	background: #25284b;
	border-color: #25284b);
}

.btn-success:hover,
.btn-success:focus {
	background: #2c4f8d;
}

hr {
	background: grey;
    height: .5px;
    width: 100%;
}

/**
 * Site Header
 */

header.main {
	background-color: #ffffff);
}

header.main .global-bar {
	background-color: #25284b;
	color: var(--white);
	padding-top: .4rem;
	padding-bottom: .4rem;
}

header.main .social-icon {
	color: var(--white);
	border: 1px solid var(--white);
	border-radius: 50%;
	height: 30px;
	width: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	transition: color .2s, background-color .2s;
}

header.main .social-icon:hover,
header.main .social-icon:focus {
	background-color: var(--white);
	color: var(--primary);
	text-decoration: none;
}

header.main .logo img {
	margin-top: 0px;
}

@media (min-width: 1200px) {
	header.main {
		position: sticky;
		top: 0;
		z-index: 15;
		background: #ffffff;
		box-shadow: 0 0 1rem -.7rem #495057;
	}
}


/**
 * Main Dropdown Menu
 */

.ddmenu {
	position: relative;
	display: flex;
	align-items: center;
	z-index: 9;
	font-family: "hk_novamedium", sans-serif;
}

.ddmenu nav {
	display: none;
}

.ddmenu nav ul {
	display: inline-flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ddmenu nav li {
	position: relative;
	display: inline-flex;
	align-items: stretch;
}

.ddmenu nav a {
	display: block;
	padding: .6rem .85rem;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	font-size: .9rem;
	color: #25284b;
	display: flex;
	align-items: flex-end;
	transition: color .2s ease, background-color .2s ease;
	border-bottom: 2px solid transparent;
	font-size: 1rem;
}

.ddmenu nav a:hover,
.ddmenu nav a:focus,
.ddmenu nav a.active {
	text-decoration: none;
	border-bottom: 2px solid #2c4f8d;
	color: #2c4f8d;
}

.ddmenu nav li li {
	display: block;
	align-self: baseline;
}

.ddmenu nav li > ul {
	position: absolute;
	left: 0;
	top: 50%;
	min-width: 250px;
	display: block;
	visibility: hidden;
	opacity: 0;
	transition: all .2s ease-in-out;
	background-color: #fff;
}

.ddmenu nav > ul > li:hover > a:first-child,
.ddmenu nav > ul > li:active > a:first-child {
	background-color: #eee;
}

.ddmenu nav li > ul a {
	color: #333;
	text-transform: initial;
	width: 100%;
}

.ddmenu nav li > ul a:hover,
.ddmenu nav li > ul a:focus {
}

.ddmenu nav li > ul a:hover,
.ddmenu nav li > ul a:focus,
.ddmenu nav li > ul a.active {
	text-decoration: none;
}

.ddmenu nav li:hover > ul,
.ddmenu nav li:focus > ul {
	visibility: visible;
	opacity: 1;
	top: 100%;
}

/* stop last dropdown from being half outside site edge */
.ddmenu nav > ul > li:last-child > ul {
	right: 0; left: initial;
}

/* Responsive Menu Toggle Buttons */
.ddmenu-toggler,
.ddmenu .close-btn {
	visibility: hidden;
	pointer-events: none;
	font-size: 1.2rem;
	display: none;
	position: relative;
}

.ddmenu .submenu_toggler {
	display: none;
	visibility: hidden;
}

.ddmenu .btn-link {
	color: #2c4f8d;
}

.ddmenu .btn-link:hover,
.ddmenu .btn-link:focus {
	color: #25284b;
}

@media (min-width: 1100px) {
	.ddmenu nav {
		display: block;
	}

	.ddmenu [data-squidyToggler] {
		display: none;
	}
}


/**
 * Slideshow
 */

.slideshow {
	position: relative;
	width: 100%;
	max-height: 735px;
	overflow: hidden;
	z-index: 1;
}

.cycle-slideshow {
	width: 100%;
	height: auto;
	z-index: 1;
}

.cycle-slide {
    line-height: 0;
    width: 100%;
}

.cycle-slide img {
    line-height: 0;
    width: 100%;
}

.slideshow-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	color: #fff;
}

.slideshow-overlay * {
	color: inherit;
	left:32.33%;
}

.slideshow-overlay .desc {
	max-width: 90%;
}

.slideshow-overlay h1 {
	font-size: 1.8rem;
}

.slideshow-overlay .lead {
	font-size: 1rem;
}

@media (min-width: 768px) {
	.slideshow-overlay {
		display: flex;
		justify-content: end;
	}
}

@media (min-width: 992px) {
	.slideshow-overlay h1 {
		font-size: 3rem;
	}
	.slideshow-overlay .lead {
		font-size: 1.25rem;
	}
}

.slideshow-controls {
	position: absolute;
	top: 85%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	pointer-events: none;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.slideshow-controls a {
	pointer-events: initial;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0rem;
	width: 35px;
	height: 35px;
	background-color: #fff;
	border-radius: 50%;
	transition: background-color .2s;
	margin: 1rem;
}

.slideshow-controls a svg {
	transition: all .2s ease-in-out;
	width: 1.05rem;
	fill: #333;
}

.slideshow-controls a:hover,
.slideshow-controls a:focus {
	background-color: var(--blue);
}

.slideshow-controls a:hover svg,
.slideshow-controls a:focus svg {
	fill: #fff;
}

#next svg {
	margin-left: .2rem;
}

#prev svg {
	margin-right: .2rem;
}


/**
 * Blue Link Banner Section
 */

 section.blue-link-banner {
	padding: 2.5rem 0;
	color: var(--white);
	background-color: var(--primary);
}

section.blue-link-banner a {
	color: var(--white);
	display: flex;
	align-items: center;
	font-size: .9rem;
	text-decoration: none!important;
	padding: .5rem;
	border-radius: .4rem;
	transition: background-color .2s;
}

section.blue-link-banner a span:first-child {
	padding-right: .6rem;
}

section.blue-link-banner a:hover,
section.blue-link-banner a:focus {
	background-color: rgba(0,0,0,0.3);
}


/**
 * Subscribe Section
 */

section.subscribe {
	padding: 1.5rem 0;
	color: var(--white);
	background-color: var(--primary);
}

section.subscribe > .container {
	max-width: 900px;
}

section.subscribe .form-control {
	background-color: transparent;
	color: #fff;
	padding-top: 1rem;
	padding-bottom: 1rem;
	height: calc(2rem + 0.75rem + 2px);
}

section.subscribe .form-control::placeholder {
	color: #fff;
}

section.subscribe .invalid-feedback {
	display: none;
	width: 100%;
	margin-top: 0.25rem;
	font-size: 80%;
	color: #fff;
	background-color: #dc3545;
	border-radius: .4rem;
	padding: .7rem;
}



/**
 * Main Section
 */

section.main > .container:not(:empty) {
	padding-top: 3rem;
	padding-bottom: 2rem;
	flex-grow: 1;
    display: block;
    flex-direction: column;
    width: 100%;	
}

section.main > .container:last-child:not(:empty) {
	padding-bottom: 2rem;
}

section.main > .subpage-container {
	border-top: 1px solid #efefef;
}


/**
 * Product Categories Section
 */

section.categories {
	padding: 6rem 0;
}


/**
 * Contact Form Section
 */

section.contact {
	padding: 7rem 0;
	color: var(--white);
}

section.contact .form-control {
	background-color: transparent;
	color: #fff;
	padding-top: 1rem;
	padding-bottom: 1rem;
	height: calc(2rem + 0.75rem + 2px);
}

section.contact .form-control::placeholder {
	color: #fff;
}

section.contact textarea {
	min-height: 150px;
}

section.contact .invalid-feedback {
	display: none;
	width: 100%;
	margin-top: 0.25rem;
	font-size: 80%;
	color: #fff;
	background-color: #dc3545;
	border-radius: .4rem;
	padding: .7rem;
}


/**
 * Blue Banner Section
 */

section.blue-banner {
	padding: 7rem 0;
	color: var(--white);
}

section.blue-banner > .container {
	max-width: 900px;
}


/**
 * Hire Section
 */

section.hire {
	background-color: #f5f5f5;
	padding: 5rem 0 3rem;
}

section.hire .subpage-link {
	border: none;
	border-radius: 0;
}

section.hire .subpage-image {
	border-bottom: 0;
}

section.hire .subpage-image img {
	border-radius: .5rem;
	overflow: hidden;
}

section.hire .subpage-text {
	padding: 1.2rem 0;
	transition: color .2s;
}

section.hire a.subpage-link:hover .subpage-text,
section.hire a.subpage-link:focus .subpage-text {
	color: var(--blue);
}


/**
 * News & Updates Section
 */

section.news {
	padding: 5rem 0 3rem;
}

section.news .subpage-link {
	border: none;
	border-radius: 0;
}

section.news .subpage-image {
	border-bottom: 0;
}

section.news .subpage-image img {
	border-radius: .5rem;
	overflow: hidden;
}

section.news .subpage-text {
	padding: 1.2rem 0;
	transition: color .2s;
	text-align: left;
}

section.news a.subpage-link:hover .subpage-text,
section.news a.subpage-link:focus .subpage-text {
	color: var(--blue);
}


/**
 * Brands Section
 */

section.brands {
	padding: 5rem 0 4rem;
}

section.brands > .container {
	max-width: 1000px;
}


/**
 * Blog Sidebar
 * Post List Categories, Tag Cloud, & Popular Posts List
 */

.post-list-categories,
.post-list-tag-cloud,
.post-list-popular-posts {
	margin-bottom: 3rem;
}

.post-list-category,
.post-list-tag {
	margin-right: .4rem;
	margin-bottom: .4rem;
}

.post-list-popular-post {
	display: block;
	margin-bottom: .4rem;
}


/**
* Blog Post List View
*/

.post-list-item {
	padding: 1rem 1rem 2rem;
	display: flex;
	align-items: stretch;
}

.post-list-item a {
	color: inherit;
	text-decoration: none;
	background-color: #fff;
	display: block;
	flex-basis: 100%;
	border-radius: .5rem;
	overflow: hidden;
	border: 1px solid #efefef;
}

.post-list-item a:hover,
.post-list-item a:focus {
}

.post-list-item h3 {
}

.post-list-item img {
	width: 100%;
	height: 20rem;
	object-fit: cover;
	border-bottom: 4px solid var(--blue);
}

.post-list-item .post-item-text {
	padding: 1.5rem;
	color: #666;
	font-size: .85rem;
}


/**
* Blog Post Article View
*/

article.blog-post {
	margin-bottom: 1rem;
}

.post-image img {
	width: 100%;
	object-fit: cover;
}

.post-inner {
	margin: 0 auto;
	max-width: 60rem;
}

article.blog-post h1 {
	padding-top: 2rem;
	border-bottom: 4px solid #444;
	color: #444;
	font-weight: bold;
}

@media (max-width: 1000px) {
	article.blog-post h1.display-3 {
		font-size: 3rem;
	}
}

.post-author {
	padding: 1.5rem 0;
	margin-bottom: 1rem;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.post-share {
	padding-bottom: 1.5rem;
	padding-left: .3rem;
	margin-bottom: 2rem;
	vertical-align: middle;
	font-size: .9rem;
	color: #444;
}

.post-share strong {
	padding-right: 1.5rem;
}

.post-share-end {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.post-next-article {
	padding-left: .3rem;
	font-size: 1.35rem;
	font-weight: bold;
}

.post-comments-link {
	padding-left: .3rem;
	padding-top: 1rem;
	font-weight: bold;
}

.post-article {
	color: #555;
}

.post-article p {
	line-height: 1.9;
	margin-bottom: 3.5rem;
}

.post-article .full-width-image {
	margin-bottom: 3.5rem;
}

.post-article .full-width-image img {
	margin-left: -2rem;
	margin-right: -2rem;
	width: calc(100% + 4rem);
	max-width: initial;
}

article.blog-post blockquote {
	padding: .8rem 1.4rem;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 3.5rem;
	border-left: 10px solid #eee;
}

article.blog-post blockquote *:last-child {
	margin-bottom: 0;
}

/* Blog/Post Comments */
.post-comments {
	max-width: 60rem;
	margin: 0 auto;
	margin-bottom: 4rem;
	border-top: 4px solid #444;
	padding: .3rem;
	padding-top: 4rem;
}

.post-comment p {
	margin-bottom: .4rem;
}

.post-comment header {
	font-size: .9rem;
}

.post-comment-name,
.post-comment-name a {
	font-weight: bold;
	color: inherit;
}

.post-comment-date {
	color: #999;
}

.post-comment-avatar div {
	width: 45px;
	height: 45px;
	background-color: #ccc;
	color: #fff;
	font-size: 1.6rem;
	text-align: center;
	border-radius: .2rem;
	line-height: 45px;
	margin-right: 1rem;
}

.post-comment-replies {
	color: #666;
	font-size: .9rem;
	margin-top: 1.5rem;
	margin-left: 1rem;
	flex: 0 0 auto;
}

@media (min-width: 1200px)
{
	.post-comment-replies {
		margin-left: 4rem;
	}
}

.post-comment-form {
	margin-bottom: 2rem;
	padding-bottom: 4rem;
	border-bottom: 4px solid #444;
}


/* IMAGE STYLING */

.outerpair1 { background: url("../../images/upperrightfade.png") no-repeat right top; }
.outerpair2 { background: url("../../images/lowerleftfade.png") no-repeat left bottom; padding-top: 8px; padding-left: 8px; }
.shadowbox { background: url("../../images/shadow.png") bottom right; }
.innerbox { position: relative; left: -8px; top: -8px; }
.shadowbox img { border: 1px solid #333; vertical-align: bottom; }

.pageimagecenter { text-align: center; margin: 0 auto; padding: 0; max-width: 100%; }
.pageimageright { float: right; margin: 5px 0 5px 5px; padding: 0; max-width: 100%; }
.pageimageleft { float: left; margin: 5px 5px 5px 0; padding: 0; max-width: 100%; }
.pageimagenone img { margin: 3px; padding: 0; }


/* SOCIAL SHARING BUTTONS */

.social {
	margin-top:20px;
}

.social h6 {
	margin:0;
	line-height:0;
}

#social {
	height: auto;
	padding: 20px 0;
	overflow: hidden;
}


/**
 * Page Gallery
 */

.pagegalleryheading {
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

.pagegalleryinner {
	display: flex;
	flex-wrap: wrap;
}

.pagegalleryimage {
	flex: 0 0 50%;
}

@media (min-width: 830px) {
	.pagegalleryimage {
		flex: 0 0 25%;
	}
}

.pagegalleryimage a {
	display: block;
	position: relative;
	padding-bottom: 90%;
	height: 0;
	overflow: hidden;
}

.pagegalleryimage img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(90%);
	transition: filter 1s, transform .5s;
}

.pagegalleryimage a:hover img,
.pagegalleryimage a:focus img {
	filter: brightness(100%);
	transform: scale(1.3);
}


/**
 * Sitemap
 */

#sitemap a { text-decoration: none; }
.sitemapL2:before,
.sitemapL3:before,
.sitemapL4:before,
.sitemapL5:before,
.sitemapL6:before { content: "\00BB"; display: inline-block; margin: 0 3px 0 0; }
.sitemapL1 { margin: 0 0 5px 0;  }
.sitemapL1 a { font-size: 16px; text-transform: uppercase; font-weight: bold; }
.sitemapL2 { margin: 10px 0 3px 10px; }
.sitemapL2 a { color: #333333; text-transform: uppercase; }
.sitemapL3 { margin: 0 0 3px 20px; }
.sitemapL4 { margin: 0 0 3px 30px; }
.sitemapL5 { margin: 0 0 3px 50px; }
.sitemapL6 { margin: 0 0 3px 60px; }

/**
 * Subpages
 */

.subpage-link {
	text-align: center;
	z-index: 1;
	border: 1px solid #efefef;
	border-radius: .5rem;
	overflow: hidden;
}

a.subpage-link:hover {
	text-decoration: none;
}

a.subpage-link:focus {
	outline: 3px solid lightblue;
	z-index: 3;
}

.subpage-image {
	border-bottom: 4px solid #0a0b0d;
}

.subpage-image img {
	width: 100%;
	max-height: 100%;
	object-fit: cover;
}

.subpage-text {
	text-align: center;
	padding: 1.5rem;
	font-size: .9rem;
	color: #6e6e6e;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

.subpage-text h6 {
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.subpage-text .btn {
	padding-left: 1.7rem;
	padding-right: 1.7rem;
}


/**
 * Product List Options UI
 */

.product-options { text-align: right; }
.product-options div { display: inline-block; }
.product-options label:not(.view) { font-size: 13px; margin-left: 15px; }
.product-options label.view { font-size: 13px; padding: 5px 8px; display: inline-block; background-color: #eee; color: #333; border-radius: 3px; cursor: pointer; }
.product-options label.view:hover,
.product-options label.view:active { color: #f7941e; }
.product-options input.hidden { visibility: hidden; position: fixed; left: -9999px; }
.product-options input,
.product-options select { font-family: AvenirNextLTPro, Arial, sans-serif; font-size: 12px; padding: 4px; border-radius: 3px; border: none; background-color: #ece9e9; margin-bottom: 10px; text-align: left; }


/**
 * Refinement Filters
 */

 .refine-column {
	background-color: #f9f9f9;
	font-size: .9rem;
}

.refine {
	margin-bottom: 2.5rem;
}

@media(min-width: 750px) {
	.refine-column {
		position: sticky;
		top: 2rem;
		max-height: 75vh;
		overflow-y: auto;
	}
}

@media(min-width: 1100px) {
	.refine-column {
		top: 9rem;
	}
}

.refine .filterHead {
	font-size: .8rem;
}

.refine .filterSect {
	margin-bottom: 2rem;
}

.refine .filterSect label {
	margin: 0;
	padding-left: .4rem;
}

.refine .filterSubmit {
	padding-top: .6rem;
}

.refine .button-filter-clear {
	margin-left: .6rem;
}


/**
 * Product List Cards
 */

.product-list {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0 -1rem;
}

.product-list .no-results {
	padding: 1rem;
}

.product-card {
	position: relative;
	display: flex;
	align-items: stretch;
	padding: 1rem;
	background-color: white;
}

.product-card-inner {
	position: relative;
	width: 100%;
	border-radius: .5rem;
	overflow: hidden;
	border: 1px solid #efefef;
	display: flex;
	flex-direction: column;
}

.product-card-img {
	border-bottom: 4px solid var(--blue);
}

.product-card-img a {
	display: block;
}

.product-card-img img {
	width: 100%;
}

.product-card a {
	text-decoration: none;
}

.product-card h5 {
	margin-bottom: 1rem;
}

.product-card .tags {
	position: absolute;
	top: 5%;
	left: 0;
	pointer-events: none;
}

.product-card .tag {
	padding: .2rem .3rem;
	color: white;
	font-size: .7rem;
	font-weight: 600;
	border-radius: 0 .2rem .2rem 0;
	background-color: #6f6f6f;
	margin: 0 .2rem .2rem 0;
}

.product-card .tag.sale {
	background-color: #d24601;
}

.product-card .tag.new {
	background-color: #015ad2;
}

.product-card .tag.sold {
	display: inline-block;
	margin-left: .3rem;
	border-radius: .2rem;
}

.product-card-text {
	padding: 1rem;
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.productprice {
	padding-bottom: 1rem;
	font-size: 1.3rem;
}

.productwas {
	color: #d24601;
	margin-right: .3rem;
	font-size: .7rem;
}

.product-card .btns {
	margin-top: auto;
}

.product-card .btns i {
	margin-right: .5rem;
}

.product-card .btn {
	border-radius: .3rem;
}

.product-card .btn:not(:last-child) {
	margin-right: .4rem;
}


/**
 * Product Page Layout
 */


.productD_large		{ max-width: 100%; text-align: center; overflow: hidden; }
.productD_large a	{ background: url("../images/loading.gif") no-repeat 50% 50%; display: inline-block; width: 100%; height: auto; }
.productD_large img	{ max-width: 100%; height: auto; }

.productD_images {  }
.productD_thumb {
	display: inline-block;
	width: 138px;
	height: 103px;
	margin: 2px;
	background: #fff;
	line-height: 0;
}

.productD_thumb a {
	display: block;
	width: 100%;
	height: 100%;
}

.productD_thumb img	{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.productD_thumb a:hover,
.productD_thumb a:focus {
	z-index: 2;
	outline: 0;
	box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
}

.productD_detail { }
.productD_status { font-size: 16px; }
.available { color: #939598; }
.outofstock,
.soldout { color: var(--red); }

.productD_price		{ font-size: 2rem; margin-bottom: 15px; }
.productD_was		{ font-size: .9rem; text-decoration: line-through; color: var(--red); display: block; }
.productD_btns		{ margin-bottom: 20px; }
.productD_pdfs		{ padding: 10px; border-bottom: 1px solid #dddddd; }
.productD_pdf		{ display: inline-block; width: 50%; }
.productD_pdf img	{ max-width: 20px !important; margin-right: 6px; vertical-align: middle; }




/* Variables */
:root {
	--cartColourAccent: #ddd; /* Lines, close button etc. */
	--cartColourBackground: #f9f9f9; /* Backgorund of Cart Forms */
	--cartColourBackgroundAccent: #efefef; /* Backgorund of Cart Forms */
	--cartColourText: #555;
	--cartColourTextLight: #888;
	--cartColourLink: #555;
}


/* PRODUCT SPECS BOX */
#productTabs			{ padding-left:10px; width:95%;}
#productTabs > ul li		{ -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; }
#productTabs > ul		{ list-style: none; margin: 0; padding: 0; border-bottom: 2px solid #7c7c7c; }
#productTabs > ul li		{ background-color: transparent; font-weight: normal; display: inline-block; padding: 7px 18px; margin: 0; cursor: pointer; }
#productTabs > ul li.active	{ background-color: #efefef; font-weight: bold; }
#productTabs > div		{ background: #efefef; width:100%;}
#productTabs > div > div	{ display: none; }
#productTabs > div > div.active	{ display: block; }
#productTabs > div > div > h5 { color: #ffffff; text-transform: uppercase !important; background-color: var(--primary) }

#productTabs .review			{ display: inline-block; width: 99%; margin-bottom: 2%; vertical-align: top; }
#productTabs .review:nth-child(odd)	{ margin-right: 2%; }
#productTabs .specs h5		{ text-transform:none; padding: 0 5px; font-size: 1.2rem;}
#productTabs .group		{ -webkit-columns: 1; -moz-columns: 1; columns: 1; }
#productTabs .group > div:nth-child(odd) { background-color: #e2e2e2; }
#productTabs .specs label,
#productTabs .spec		{ display: inline-block; vertical-align: top; width: 66%; font-size: 0.85em; padding: 5px; box-sizing: border-box; color: #363636; }
#productTabs .specs label { width: 33%; text-transform: uppercase; font-weight: bold; }
#productTabs .full-width-spec	{ display: block; width: auto; }


/* CART v2 STYLING */

.c_div			{/* overflow: hidden;*/ margin-bottom: 4rem; }
.c_div table	{ width: 100%; border-collapse: collapse; }
/* Cart Summary / List of Items */
.cart th {
	color: var(--cartColourTextLight);
	font-weight: inherit;
	font-size: .7rem;
}
.cart tr:nth-child(odd) td	{
	background: var(--cartColourBackground);
}
.cart tr:nth-child(even) td	{
	background: var(--cartColourBackgroundAccent);
}
.cart th		{ padding: 3px 5px; }
.cart td		{
	padding: 3px 5px;
	height: 70px;
	color: var(--cartColourText);
}
td.c_del		{ width: 20px; padding: 3px 5px 3px 10px; }
td.c_del a		{ background: url("../../images/remove.png") no-repeat top left; display: inline-block; width: 20px; height: 20px; }
td.c_del a:hover,
td.c_del a:focus	{ background-position: bottom left; }
.c_img			{ width: 70px; }
.c_img img		{ width: auto; max-width: 70px !important; height: auto; }
.c_part			{ display: block; color: #777777; font-size: 10px; }
.c_unit			{ width: 60px; text-align: center; }
.c_qty			{ width: 60px; text-align: center; }
.c_sub			{ width: 70px; text-align: right; }
.c_opt			{ width: 60px; text-align: center; }

/* Totals & Voucher/Shipping */
#c_total {
	text-align: right;
	background: none;
	border-top: 1px solid var(--cartColourAccent);
}
.c_box {
	padding: 10px;
	background: var(--cartColourBackground);
	float: left;
	text-align: left;
}
.c_box label	{ display: block; }
.c_voucher		{ margin: 20px 5px 5px 0; }
.c_shipping		{ margin: 20px 5px 5px 0; }
.c_voucher input[type='text']	{ text-transform: uppercase; width: 200px; }
.c_totals		{
	width: 350px;
	max-width: 100%;
	padding: 1rem;
	margin: 20px -5px 10px 0; float: right; border-top: 1px solid var(--cartColourAccent);
	border-bottom: 1px solid var(--cartColourAccent);
}
.c_totals span {
	width: 95px;
	display: inline-block;
	vertical-align: top;
}
.c_freight span span {
	font-size: .7rem;
}
.c_total		{ display: block; font-size: 14px; font-weight: bold; color: #444444; }

.c_div input[type='checkbox'] + label { padding-left: .5rem; }









/* Buttons */
/*
#c_spBtn		{ padding: 2px 6px; font-size: 13px; border: none; border-radius: 3px; color: #ffffff; display: inline-block; text-decoration: none; cursor: pointer; }
#c_spBtn		{ background: #9995c2; }
#c_poBtn		{ background: #9995c2; color: #ffffff; }
#c_frBtn		{ background: #9995c2; color: #ffffff; }
#c_upBtn		{ background: #332C86; color: #ffffff; font-size: 9px; padding: 2px; margin-top: 4px; }
#c_ecBtn		{ background: #9995c2; color: #ffffff; float: right; }
#c_prBtn		{ background: #332c86; color: #ffffff; font-weight: bold; float: right; }
#c_ppBtn		{ margin: 0 auto; display: block; }
*/
/* Buttons */
#c_ecBtn,
#c_coBtn,
#c_prBtn {
	float: right;
}
/* Float / Clearfix */
.c_div:after {
	content: "";
	display: table;
	clear: both;
}

/* Steps / Progress Indicator */
#c_steps {
	display: flex;
	margin: 1rem 0;
}
#c_steps span {
	flex: 1 1 auto;
	border-bottom: 6px solid #cfcfcf;
	text-align: center;
	color: #aaa;
	padding: 4px 0;
	margin-bottom: -6px;
}
#c_steps span.active {
	border-bottom: 6px solid #d9b513;
	color: #333;
	font-weight: bold;
}
#c_steps span.done {
	border-bottom: 6px solid #eee;
	color: #ccc;
}

/* Messages */
#c_bigmsg		{ border: 2px dashed #13a6d9; width: 70%; padding: 10px; margin: 0 auto 10px auto; text-align: center; font-weight: bold; font-size: 15px; }
#c_mainmsg		{ background: #efefef; width: 50%; padding: 10px 10px 8px 10px; margin: 15px auto; text-align: center; }
#c_submsg		{ width: 50%; margin: 15px auto; text-align: center; color: #666666; }
#c_errmsg		{ background: #db4848; color: #ffffff; padding: 10px 10px 8px 10px; margin: 15px auto; text-align: center; }

/* Form (Step 2) */
.c_table label.c_err	{ color: #990000; }




/* ------ NEW STUFF -------------------- */







/* Details Form */
.c_div h2 {
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--cartColourAccent);
	padding-bottom: 1rem;
	text-align: center;
}

#form_detail,
#form_shipping,
#form_payment {
	width: initial!important;
	display: block!important;
	margin-left: 0!important;
	margin-bottom: 2rem;
	padding: 2rem;
	background-color: var(--cartColourBackground);
}

.c_table label {
	color: var(--cartColourText);
	margin: 0;
}
.c_table th	{
	font-weight: inherit;
	padding-top: .3rem;
}
.c_table tr {
	display: flex;
	flex-direction: column;
}

/* Payment Form Section */
#form_payment {
	margin-bottom: 3rem;
}

/* Payment Options Selection */
#form_payment span.orderPaymentType {
	margin-bottom: .5rem;
}
#form_payment > table {
	background-color: var(--cartColourBackgroundAccent);
	margin-bottom: 2rem;
}
#form_payment > table th {
	padding: 2rem 2rem 0;
}
#form_payment > table td {
	padding: 1rem 2rem 2rem;
}

/* Payment Detail Boxes */
.payment_detail_boxes {
	padding: 2rem;
	background-color: var(--cartColourBackgroundAccent);
}
.payment_detail_boxes th:empty {
	display: none;
}

/* Credit Card Form */
#c_cc label {
	margin: 0;
}
#c_cc tr {
	display: flex;
	flex-direction: column;
}
#c_cc tr:nth-child(4) td {
	display: flex;
	align-items: center;
}
#c_cc select[name='cart_submit[orderCardExpiryM]'] {
	margin-right: .6rem;
}
#c_cc select[name='cart_submit[orderCardExpiryY]'] {
	margin-left: .6rem;
}
#c_cc .c_table tr {
	display: flex;
	flex-direction: column;
}
/* CVV Help (Credit card help) */
#c_cvvhelp {
	padding-left: 8px;
}
#c_cvvhelp a {
	font-size: .8rem;
}
#c_cvvhelpbox {
	top: -140px;
	left: 60px;
	line-height: 0;
	z-index: 50;
	box-shadow: .4rem .4rem .9rem rgba(0,0,0,0.3);
	border-radius: .8rem;
	width: 250px;
}
/* Accepted Cards Images */
.c_cards img {
	vertical-align: middle;
	margin: 0 1px;
}



/**
 * Lower Contact Message
 */

#contact { clear: both; width: auto; margin: 20px auto; color: #000000; font-size: 14px; text-align: center; }
#contact a { color: #ffffff; text-decoration: none; }

.maps {
	padding-top: 2rem;
}

.maps iframe {
	min-height: 300px;
}


/**
 * Social Icons
 */

.social-icon {
	padding: .3rem;
}


/**
 * Contact Page
 */

#contactform #contact_thanks { padding: 15px; margin: 0 auto; width: 100%; text-align: center; border: 1px solid var(--cartColourBackgroundAccent); background: var(--cartColourBackground); }

#contactpage {
	background-color: var(--cartColourBackground);
	padding: 2rem;
	margin-bottom: 4rem;
}
iframe { width: 100%; border: none; }
#contact-us iframe { height:400px; padding-top: 40px; }


/**
* Site Forms
*/

.form .error {
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
}

.form {
	display: flex;
	flex-wrap: wrap;
}

.form > div {
	flex: 0 0 100%;
	margin-bottom: 1rem;
}

/* Submit button has a submit text label, hide it */
.form > div:last-of-type label {
	display: none;
	visibility: hidden;
	pointer-events: none;
}

/**
 * Footer
 */

footer.main {
	padding-top: 7rem;
	clear: both; /* Don't like it, but provides a little layout protection where floats are used larger than the document flow */
	background: #efefef;
	background-size: cover;
	color: #495057;
	font-size: 16px;
}

footer.main .logo {
	display: block;
}

footer.main h5 {
	color: #495057;
	font-size: 17px;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

footer.main i {
	padding-right: 0;
}

footer.main a {
	text-decoration: none;
	color: #2c4f8d;
	display: inline-block;
}

footer.main a:hover,
footer.main a:focus {
	color: #25284b;
}

footer.main .quick-menu ul {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
}

footer.main .quick-menu li {
	list-style: none;
	margin: 0 0 .5rem 0;
	padding: 0;
	position: relative;
	text-transform: uppercase;
	font-weight: 600;
}

footer.main .quick-menu.legal-menu ul {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
}

footer.main .quick-menu.legal-menu li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 1px;
	height: 40%;
	background-color: #9f9f9f;
	transform: translateY(-40%);
}

footer.main .quick-menu.legal-menu li a {
	padding: .3rem .5rem;
}

footer.main .quick-menu a {
	text-decoration: none;
}

footer.main .legal {
	padding: 3.5rem 0;
	margin-top: 5rem;
	border-top: 1px solid #9f9f9f;
}


/**
 * Custom Document Scroll Bars
 * Ref: https://css-tricks.com/custom-scrollbars-in-webkit/
 * For firefox
 */

/* Scrollbar modification for firefox */
* {
	scrollbar-width: thin;
}

/* Sets the dimensions of the entire scrollbar */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

/* The grabbable scrollbar button  */
::-webkit-scrollbar-thumb {
    background: -webkit-gradient(linear,left top,left bottom,from(#333333),to(#fff));
    background: linear-gradient(180deg,#c9c9c9,#c9c9c9);
	border-radius: 7px;
	margin-left:-7px
}

/* The vertical scrollbar background */
::-webkit-scrollbar-track {
    background: var(--drawerColourAccent);
}


/**
 * Drawer Styling
 * Menu, Fancy Cart, and other stuff
 */

/* Variables */
:root {
	--drawerColourAccent: rgba(0,0,0,0.1); /* Lines, close button etc. */
	--drawerColourBackground: #fff;
	--drawerColourText: #666;
	--drawerColourLink: #555;
	--overlayColour: rgba(0,0,0,0.4); /* Background property for overlays */
}

.drawer-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--overlayColour);
	opacity: 0;
	z-index: 91;
	transition: opacity .3s ease;
	visibility: hidden;
}

.drawer-overlay.visible {
	opacity: 1;
	visibility: visible;
}

.drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	transform: translateX(-110%);
	width: 350px;
	max-width: 95%;
	height: 100%;
	background-color: #fff;
	color: var(--drawerColourText);
	box-shadow: 0 0 2rem -1rem rgba(0,0,0,1);
	z-index: 91;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: opacity .3s ease, transform .3s ease;
}

.drawer.visible {
	transform: translateX(0);
}

.drawer-header {
	border-bottom: 1px solid var(--drawerColourAccent);
	padding: .8rem .5rem;
	margin: 0 .5rem;
}

.drawer-header .drawer-title {
	margin: 0;
	color: var(--drawerColourText);
	font-weight: 300;
	letter-spacing: 1px;
}

.drawer-header .drawer-close {
	color: var(--drawerColourText);
	font-size: 130%;
	padding: 0 .8rem;
}

.drawer-content {
	overflow: hidden;
	overflow-y: auto;
	flex: 1 1 auto;
	padding-bottom: 3rem;
}


/**
 * Drawer Menu
 */

.drawer nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.drawer nav div {
	display: flex;
}

.drawer nav a {
	display: block;
	flex: 1 1 auto;
	color: var(--drawerColourLink);
	border-bottom: 1px solid var(--drawerColourAccent);
	text-decoration: none;
	text-transform: uppercase;
	font-size: .9rem;
	letter-spacing: 1px;
}

.drawer nav a span {
	display: inline-block;
	padding: .8rem 1rem;
}

.drawer nav ul li .toggler {
	display: done;
	align-items: center;
	padding: 0 1.2rem;
	font-size: 120%;
	border-left: 1px solid var(--drawerColourAccent);
	cursor: pointer;
}

.drawer nav ul li ul .toggler {
	border-left: transparent;
	background-color: transparent;
	font-size: 100%;
}

.drawer nav li ul li a {
	padding-left: 1.6rem;
	text-transform: initial;
}

.drawer nav li ul li ul li a {
	padding-left: 2.5rem;
}

/* Submenu (Closed State) */
.drawer nav li ul {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.5s ease-out, opacity .2s ease-out;
}

/* Submenu (Open State) */
.drawer nav li ul.visible {
	max-height: 3000px;
	opacity: 1;
}


/**
 * Responsive Styling
 */

@media (max-width: 1050px) {
	/**
	 * Header
	 */

	header.main .logo img {
		max-height: 90px;
	}
}

@media (max-width: 830px) {
	#contactpage { width: 100%; padding: 0; }
	#contactform { width: 100%; }

	/* Product */
	.grid-view .product-card { flex-basis: 33%; }
}

@media (max-width: 760px) {
	.slideshow-overlay * {
		left: 0%;
	}
	.slideshow-overlay .desc {
		max-width: 100%;
	}
	
}

/* RESPONSIVE FOR MOBILE */
@media (max-width: 640px) {
	/* HTML Sitemap */
	#sitemap > div		{ float: none !important; width: auto !important; }

	/* Contact */
	#contacttext iframe	{ width: 100%; }
	
	/* Site Forms */
	.form > div		{ margin: 0 0 8px 0; }
	.form > div > label	{ width: 100%; float: none; margin: 0 0 5px 0; }
	.form > div > div	{ width: 100%; float: none; }
	.form input[type=text],
	.form input[type=email],
	.form input[type=url],
	.form input[type=password],
	.form input[type=tel],
	.form input[type=number],
	.form textarea,
	.form select		{ width: 100%; }		
}


/**
 * Debug
 */

#debug { position: relative; padding: 10px 15px; text-align: left; background: #cfdaff; border-top: 12px solid #c4d2ff; border-bottom: 12px solid #c4d2ff; }
#debug h1 { border: none; color: #001b51; text-transform: none; text-decoration: none; }
#debug pre { color: #000d27; }