@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
/* ==|== primary styles =====================================================
   Author: Silverink
   ========================================================================== */

/* ==|== Easibuild Structural Elements =====================================================
   Structural elements such as mainContent/Wide, submenu etc. Ideally these elements will change
   to HTML5 tags...  aside, article etc.
   ========================================================================== */
html { -webkit-font-smoothing: antialiased; }

a {text-decoration: none;}
a:link { color: #777;}
a:visited { color: #777;}
a:active { color: #000;}
a:hover { color: #000;text-decoration: none;}
a:focus, a:active { color: #000;}



body { positon: relative; overflow-x: hidden; font-family:'Gill Sans W04 Roman', sans-serif; color: #777; font-size: 16px; } /* FIXED HEADER HEIGHT */

#bottomTextNew {margin-top: 40px; }
	#bottomTextNew h1 {font-size: 20px;}
.ContactDetails h1, .ContactForm h1 {font-size: 1em;}
	.ContactForm label, #questionForm label {display: block;}
	.ContactForm div, #questionForm div {margin-bottom: 10px;}
	.ContactForm input[type='text'], .ContactForm input[type='tel'], .ContactForm input[type='email'], .ContactForm textarea {border: 1px solid #888;}
	.notEmail {display: none;}

blockquote {border: none; margin: 0px; padding: 0px; font-size: 16px;}

.dataTables_length {float: right;}
.dataTables_info {float: right;}
.dataTables_paginate {}
.paginate_button_disabled {opacity: 0.4; -moz-opacity: 0.4;}
.paging_full_numbers {color: #257f5b;}
.dataTables_wrapper {margin-top: 0px}

#findAStockistButton2 img {width: 100%; height: auto;}
h1 {color: #000; letter-spacing: 0.08em;  font-family: "Gill Sans W04 Roman"; font-size: 16px; line-height: 22px; margin-top: 0px;  margin-bottom: 30px; text-transform: uppercase; text-align: left ;}

h2 {font-size: 20px; margin-bottom: 0px; }

h3 {font-size: 18px;}


h5 {font-size:16px;}
img {max-width: 100%; height: auto !important;}

.StockMasterTable img {max-width: 202px;}

#logo img {width: auto; height: auto; max-height:100%; cursor: pointer;}
#topBanner {background: rgba(255,255,255,0.7)}
#currentTagList {display: none;}
/* ==|== Everything Else =====================================================================
   Alphabetically ordered unles it's nested (.level2 will be nested with #submenu for example)
   =========================================================================================== */
.breadcrumb {display: none;}

/* CAROUSEL */
.carousel {height: 300px;}
	.carousel-inner {height: 300px}
	.carousel .item { width: 100%; height:100%;}
		.slideImage {background-size: cover; height:100%;}

/* GALLERY */
body[data-template='Gallery'] figure {background-repeat: no-repeat; background-size: cover; background-position: center center; cursor: pointer; height: 250px; margin-bottom: 30px;border: 1px solid #c6c6c6; position: relative;}
	body[data-template='Gallery'] figcaption {background: #f3f4f8; position: absolute; bottom: 0px; width: 100%; padding: 5%; text-align: center; text-transform: uppercase; height: 60px; vertical-align: middle;}
body[data-template='Gallery'] li {list-style-type: none; margin:0; text-align: center;}
body[data-template='Gallery'] .controls{
        width:50px;
        display:block;
        padding-top:8px;
        font-weight:bold;
        font-size: 1em;
    }
    body[data-template='Gallery'] .next {
        float:right;
        text-align:right;
    }
footer {clear: both;}
footer .container {font-size: 13px; line-height: 140%; padding: 10px; border-top: 1px solid #dcd8d7; padding-top: 50px; margin-top: 35px;}
footer ul {padding: 0; margin: 0; list-style-type: none;}

#galleryModal .modal-body {text-align: center;}
	.img-responsive {margin: auto;}

.Img10pxBorder {margin: 10px;}

	.itembox1, .itembox2, .itembox3, .itembox4, .itembox5, .itembox6, .itembox7, .itembox8, .itembox9, .itembox10, .itembox11, .itembox12, .itembox13, .itembox14, .itembox15 { position: relative; overflow: hidden; float: left; width: 202px; height: 180px; margin-left: 25px; _margin-left: 25px; margin-bottom: 10px; margin-top: 20px; text-align: center; border:1px solid #888; padding-top:5px; padding-bottom:5px;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0px 0px 5px #bbb; -webkit-box-shadow: 0px 0px 5px #bbb; box-shadow: 0px 0px 5px #bbb;
	}


	.landingPageLogo {position: absolute; top: 1px; right: 1px; width: 86px; height: 26px; }
	.franchiseeDesc {position: absolute; bottom: 5px; right: 1px; width: 198px; height: 26px; font-size: 12px;}


.leftImg {float: left; margin: 10px;}
.rightImg {float: right; margin: 10px;}


#logo {width: 140px; height: 70px; margin: 20px auto 10px auto; position: relative; top: 30px; cursor: pointer;}


.month li, .year li {display: none;}
.month li.monthName, .month li.yearName {display: block;}
#map_canvas {width: 100%; min-height: 150px;}

.navbar-toggle {border: 1px solid #efefef;}
	.navbar-toggle .icon-bar {background: #efefef;}
pre {
  padding: 15px;

  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre; /* CSS2 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
  border: none;
  background: none;
}

/* NEWS */
.newsFrontPage figure {min-height: 300px; background-size: cover;}

previewDiv {max-width: 100px;}

/* SILVERINK LINK */
#silverinkWebDesign {
	font-size: 10px;
	font-family: helvetica, arial;
	margin-left: -2px;
	margin-top: 5px;
}

#silverinkWebDesign 	a {
	color: #888;
}


#socialShareLinks {line-height: 25px; vertical-align: bottom; text-align: right; margin-top: 20px; padding-top: 10px; border-top: 1px solid #efefef;}
	#socialShareLinks b {vertical-align: middle;line-height: 25px;}
	#socialShareLinks a {width: 30px; height: 30px; margin: 5px; vertical-align: middle; line-height: 30px; display: inline-block; zoom: 1;}
		#socialShareLinks a img {max-width: 30px; max-height: auto; line-height: 30px;}


.stockistCard {width: 30%; float: left; min-width: 250px; min-height: 200px;}


.StockMasterTable {margin-top: 10px; margin-bottom: 10px; width: 100% !important; display: none;}
.StockMasterTable thead {background-color: #0d3056; }
	.StockMasterTable th {text-align: left; padding: 5px; font-size: 14px; color: #fff;cursor: pointer;}
	.StockMasterTable  td {border-bottom: 1px solid #fff;}
	.even td, .odd td {padding: 5px;}
	.even td {background-color: #e9e9e9}
	.odd td {background-color: #f5f5f5;}



/****************************************************************************/
/* DROPDOWN MENU */
.navbar-collapse {padding: 0;}

.in .navbar-nav li {border-bottom: 1px solid #e6e6e6}
	.in .navbar-nav li:last-child {border-bottom: none;}
.mobileCatSelect.dropdown.open .caret{
    border-top: none;
    border-bottom: 4px solid #000000;
}
.mobileCatSelect .dropdown-menu {border: none !important; box-shadow: none !important; position: relative !important;}
	.mobileCatSelect .dropdown-toggle {display: block;}
.navbar {margin-bottom: 0px;text-align: center; }
	.navbar-toggle {position: relative; left: 10px; float: none; }

	.navbar-nav {margin: 0px ;}
.navbar-toggle {border: none;}
.navbar-toggle .icon-bar {
	background: rgb(0,0,0)
}


	.mobileSubMenuButton {display: block; background: rgb(100,100,100); text-align: center; color: rgb(255,255,255); position: relative; line-height: 20px;}
		.mobileSubMenuButton button { padding: 0px !important;}
		.mobileSubMenuButton button[aria-expanded="true"] .caret {border-top: none;
    border-bottom: 4px solid #fff;}
    .mobileSubMenuButton .navbar-toggle {left: 0;}

	.navbar-header {text-align: center; position: relative; margin-bottom: 10px;}
	.openContainer .col-sm-8 {margin-top: 40px;}

#SubMenuFooter {height: 10px;}
#subMenu {list-style-type: none !important; margin: 0 !important; font-size: 14px;}
#subMenu ul {list-style-type: none !important; margin: 0; padding: 0; text-align: left;}
	#subMenu li.level3 {margin-left: 15px;}
	#subMenu ul:first-child {margin-top: -3px; }
	#subMenu ul {padding-bottom: 10px; margin: 0 !important;  margin-bottom: 20px;}
	#subMenu ul li {padding: 15px 0px; border-top: 1px solid #f3f1f1; margin: 0;}
	#subMenu ul li a {display: block;}
		#subMenu li:first-child {border-top: none;}
	#subMenu li.selected a {color: #000;}


	#SubMenuUl {padding-left: 0px; margin-left: 0px; list-style-type: none; margin-bottom: 30px; border: 1px solid rgb(100,100,100)}
	#SubMenuUl li {font-size: 0.8em; padding: 8px 0px; border-top: 1px solid #F3F1F1;}
	#SubMenuUl li:first-child {border-top: none;}
	#SubMenuUl li a:hover {background: none;}


	#topMenu {
	height: 		auto;
	border-top: 1px solid #dcd8d7; border-bottom: 1px solid #dcd8d7;
	width: 100%;
	font-family:'Gill Sans W04 Roman', sans-serif; font-size: 14px; text-transform: uppercase;
	margin-top: 10px;
}
	#topMenu ul li {
		font-size: 1em;
		background: rgb(255,255,255);
		margin: 0px !important;
		display: block;

	}
	#topMenu li:hover {
		visibility:		inherit; /* fixes IE7 'sticky bug' */
	}
	#topMenu li a {padding: 10px 0px;}
	#topMenu li {
		position:		relative;
	}
	#topMenu a {
		color: #777;
		font-weight:100;
		letter-spacing: 0.071428571428571428571428571428571em; 		/* 1px / 14pt */
		display:		block;
		position:		relative;

	}
	#topMenu li > a:hover, #topMenu li.selected > a {background: none; color: #000; }
	.dropdown-menu {margin-top: 1px; border-color: #dcd8d7; box-shadow: none; font-size: 0.875em;}
	.dropdown-menu a {padding: 0;}

	/** END DROPDOWN MENUS **/
	/************************/



/* ==|== media queries ======================================================
   Media Queries for Responsive Design.
   These override the primary ('mobile/desktop first') styles
   Modify as content requires.
   ========================================================================== */




/*===============================*/
/* 480 - LANDSCAPE MOBILE LAYOUT */
/*===============================*/

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}





















/*=====================*/
/* 768 - TABLET LAYOUT */
/*=====================*/
@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */
	#logo {width: 260px; height:100px; top: 20px;}

  #mobileMenu {display: none !important;}
	.openContainer .col-sm-8 {margin-top: 0px;}

  #topBanner {margin-bottom: 40px;}

	#SubMenuUl {border: none;}


  	/****************************************************************************/
	/* DROPDOWN MENU */
#topMenu {max-height: 53px; text-align: center;}
	#topMenu ul {min-width: 100%;}
#topMenu ul li { display: inline; margin-left: 10px; margin-top: 0px;}

	#topMenu ul li {
		margin: 0px !important;
		display: inline-block;

	}
	#topMenu li:hover {
		visibility:		inherit; /* fixes IE7 'sticky bug' */
	}
	#topMenu li a {padding: 0px 10px; line-height: 53px;}
	#topMenu li {
		float:			none;
	}
	#topMenu a {
		color: #777;
		font-weight:100;
		letter-spacing: 0.071428571428571428571428571428571em; 		/* 1px / 14pt */
		display:		block;
		position:		relative;
		font-size: 0.75em;
		height: 51px;


	}
	/* 		border-bottom: 2px solid transparent;
 */
	#topMenu li > ul li {display: block; width:100%;}
	#topMenu li.selected > a {background: none; color: #000;box-shadow: inset 0 -2px 0px rgba(0, 0, 0, 0.3);} /*  border-bottom: 2px solid #dcd8d7; */
		#topMenu li:hover a {border: none !important}
	/* #topMenu li.selected > ul li a { box-shadow: inset 0 -10px 7px rgba(0, 0, 0, 0.3);} */

	#topMenu li > ul li a { line-height: 40px;}

	.dropdown-menu {margin-top: -1px !important; border-bottom-color: #dcd8d7; border-top-color: transparent; border-left-color: #dcd8d7; border-right-color: #dcd8d7; box-shadow: none;}

	/** END DROPDOWN MENUS **/
	/************************/

}












/*=======================*/
/* 1024 - DESKTOP LAYOUT */
/*=======================*/
@media only screen and (min-width: 992px) {
  /* Style adjustments for viewports 1024px and over go here */
  	#topMenu a { font-size: 1em; }
	#topMenu a { margin: 0px 2px; }


}










/* WIDE DESKTOP LAYOUT */
@media only screen and (min-width: 1200px) {
  /* Style adjustments for viewports 1200px and over go here */
  	#topMenu a { margin: 0px 10px; }

}




































/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.

RESPONSIVE TABLE
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	.respTable table, .respTable thead, .respTable tbody, .respTable th, .respTable td, .respTable tr {
		display: block;
		height: auto !important;
		width: 100%;
		padding: 10px;
		text-align: center;
		margin-bottom: 10px;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.respTable thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.respTable tr { border: 1px solid #ccc; box-shadow:  0px 0px 6px rgba(80,80,80,0.2)}

	.respTable td {
		/* Behave  like a "row" */
		border: none !important;
		position: relative;
		width: 100% !important;

	}

	.respTable td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}

}










/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}