html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}
.navbar-toggle {
	display: none;
}

nav{
	text-align: center;
	position: relative;
	z-index: 9999;
}
.navbar-default {
    background-color: transparent;
    border-color: transparent;
}
.level.background--light a{
	color: #333;
}
.level a {
	color: #666;
}
.level.background--dark a{
	color: #eee;
}


.list-cat ul {
    margin: 0;
    padding: 0;
}
.level .mega-menu {
	position: absolute;
    left: 0px;
    right: 0px;
    width: 100%;
	background: #fff;
}
.mega-menu .area {


}
.mega-menu-column ul li {
	padding: 0 !important;
	margin: 0 !important;
	line-height: 14px !important;
}
.mega-menu-column ul li a {
	font-size: 12px !important;

}
.mega-menu .area > p {
	margin-bottom: 0;
}
.mega-menu-column.nav-header {
	width: 220px;
	text-align: left;
}
.mega-menu-column.nav-header li {
	display: block;

}
.mega-menu-column.nav-header  {
	font-weight: 700;
	float: left;
	padding: 14px 0;
}
.mega-menu-column.nav-header ul li a {
	text-transform: capitalize;
	font-weight: 400;
	font-size: 12px !important;
}
.list-cat ul li {
   display: inline-block;
   /* float: left; */
   margin: 0;
   padding: 0;
   list-style: none;
}

.list-cat ul li a{
    padding: 5px 5px;
    font-size: 13px;
    margin: 4px 0;
     display: block;

}
.list-cat ul li a:hover{
    color: #000;
}
.list-cat ul li a:hover strong{
  color: #fff !important ;
}

#menu-trigger {
  top: 0;
  left: 0px;
  cursor: pointer;
  position: fixed;
  z-index: 99999;
}
.fly-right {
   list-style: none;
  top: 12px;
  right: 20px;
  cursor: pointer;
  position: fixed;
  z-index: 99999;
  color: #fff;
}
.fly-right > ul {
	margin: 0;
	padding: 0;
}
.fly-right > ul > li {
	display: inline-block;
	list-style: none;
	margin-left: 14px;
}
.fly-right > ul > li > a {
	color: #ccc;
	font-size: 18px;
}

.line-wrap {
  width: 18px;
  height: 12px;
  -webkit-transition: all;
  -o-transition: all;
  transition: all;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  margin: 0px 20px;
}

.line-wrap .line {
  width: 18px;
  height: 2px;
  -webkit-transition: all;
  -o-transition: all;
  transition: all;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}

.line-wrap .line.center {
  margin: 3px 0;
}

.open .line-wrap {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.open .line-wrap .line.top {
  width: 12px;
  transform: translateX(8px) translateY(1px) rotate(45deg);
  -webkit-transform: translateX(8px) translateY(1px) rotate(45deg);
}

.open .line-wrap .line.bottom {
  width: 12px;
  transform: translateX(8px) translateY(-1px) rotate(-45deg);
  -webkit-transform: translateX(8px) translateY(-1px) rotate(-45deg);
}

#menu-trigger .line-wrap .line {
  background-color: #000;
}

#menu-trigger:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  -webkit-transition: all;
  -o-transition: all;
  transition: all;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  z-index: 0;
}

#menu-trigger.open:before {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}



/* #Page Styles
================================================== */
#search {
	z-index: 9;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);

    -webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;

    -webkit-transform: translate(0px, -100%) scale(0, 0);
	-moz-transform: translate(0px, -100%) scale(0, 0);
	-o-transform: translate(0px, -100%) scale(0, 0);
	-ms-transform: translate(0px, -100%) scale(0, 0);
	transform: translate(0px, -100%) scale(0, 0);

    opacity: 0;
}

#search.open {
    -webkit-transform: translate(0px, 0px) scale(1, 1);
    -moz-transform: translate(0px, 0px) scale(1, 1);
	-o-transform: translate(0px, 0px) scale(1, 1);
	-ms-transform: translate(0px, 0px) scale(1, 1);
	transform: translate(0px, 0px) scale(1, 1);
    opacity: 1;
}

#search input[type="search"] {
    position: absolute;
    top: 50%;
    line-height: 50px;
    width: 100%;
    color: rgb(255, 255, 255);
    background: rgba(0, 0, 0, 0);
    font-size: 50px;
    font-weight: 300;
    text-align: center;
    border: 0px;
    margin: 0px auto;
    margin-top: -51px;
    padding-left: 30px;
    padding-right: 30px;
    outline: none;
}
#search .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 61px;
    margin-left: -45px;
}
#search .close {
    position: fixed;
    top: 15px;
    right: 15px;
    color: #fff;
	background-color: #428bca;
	border-color: #357ebd;
	opacity: 1;
	padding: 10px 17px;
	font-size: 27px;
}
/* #HEADER
================================================== */

nav{
	text-align: center;
	position: relative;
	z-index: 9999;
}
.navbar-default {
    background-color: transparent;
    border-color: transparent;
}
.level.background--light a{
	color: #333;
}

.list-cat ul {
    margin: 0;
    padding: 0;
}
.level .mega-menu {
	position: absolute;
    left: 0px;
    right: 0px;
    width: 100%;
	background: #fff;
}
.mega-menu .area {


}
.mega-menu-column ul li {
	padding: 0 !important;
	margin: 0 !important;
	line-height: 14px !important;
}
.mega-menu-column ul li a {
	font-size: 12px !important;

}
.mega-menu .area > p {
	margin-bottom: 0;
}
.mega-menu-column.nav-header {
	width: 220px;
	text-align: left;
}
.mega-menu-column.nav-header li {
	display: block;

}
.mega-menu-column.nav-header  {
	font-weight: 700;
	float: left;
	padding: 14px 0;
}
.mega-menu-column.nav-header ul li a {
	text-transform: capitalize;
	font-weight: 400;
	font-size: 12px !important;
}
#nav ul li > div ul li{
     padding: 0;
     list-style: none outside none;
     margin: 0px !important;

}
.sidebar {
  position: fixed;
  background: #fff;
  box-shadow: 0 0 10px rgba(51, 51, 51, 0.38);
  height: 100%;
  top: 0px;
  padding-top: 45px;
  -webkit-transition: all;
  -o-transition: all;
  transition: all;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  z-index: 9999;
  opacity: 0;
  filter: alpha(opacity=0);
  overflow-y: auto;
}

.sidebar.toggled {
  opacity: 1;
  filter: alpha(opacity=100);
}

#sidebar {
  width: 268px;
  -webkit-transform: translate3d(-268px, 0, 0);
  transform: translate3d(-268px, 0, 0);
}

#sidebar.toggled {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

#chart {
  padding: 20px 0;
  width: 280px;
  right: -300px;
}

#chart.toggled {
  right: 0;
}
.main-menu {
  list-style: none;
  padding-left: 0;
  margin: 20px 0 0 0;
}

.main-menu > li > a {
  padding: 14px 16px 14px 20px;
  display: block;
  color: #4C4C4C;
  font-weight: 500;
  position: relative;
}

.main-menu > li > a:hover {
  color: #262626;
  text-decoration: none;
  background-color: #f7f7f7;
}

.main-menu > li > a > i {
  position: absolute;
  left: 16px;
  font-size: 20px;
  top: 0;
  width: 25px;
  text-align: center;
  padding: 13px 0;
}

.main-menu > li.active > a {
  color: #262626;
  background-color: #F4F4F4;
   text-decoration: none;
}
.sub-menu  {
	  padding-left: 0px;
}
.sub-menu > ul > li > ul {
	  border-left: 4px solid #ccc;
	  padding-left: 10px;
}
.sub-menu > a {
  position: relative;

}

.sub-menu > a:before,
.sub-menu > a:after {
  position: absolute;
  top: 12px;
  color: #575757;
  font-family: 'Material-Design-Iconic-Font';
  font-size: 17px;
  right: 20px;
  -webkit-transition: all;
  -o-transition: all;
  transition: all;
  -webkit-transition-duration: 250ms;
  transition-duration: 250ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.sub-menu > a:before {
  content: "\f278";
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.sub-menu > a:after {
  content: "\f273";
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

.sub-menu .sub-menu > a:before,
.sub-menu .sub-menu > a:after {
  top: 5px;
}

.sub-menu.toggled > a:before {
  content: "\f278";
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

.sub-menu.toggled > a:after {
  content: "\f273";
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.sub-menu ul {
  list-style: none;
  display: none;
  padding: 0;

}

.sub-menu ul > li > a {
  color: #7f7f7f;
  padding: 6px 20px 6px 40px;
  font-weight: 500;
  display: block;
}

.sub-menu ul > li > a.active,
.sub-menu ul > li > a:hover {
  color: #000;  text-decoration: none !important;
}

.sub-menu ul > li:first-child > a {
  /* padding-top: 14px; */
}

.sub-menu ul > li:last-child > a {
  padding-bottom: 16px;
}

.sub-menu ul > li ul {
  font-size: 12px;
  margin: 10px 0;
  background-color: #f7f7f7;
}

.sub-menu.active > ul {
  display: block;
}
.half-bottom {margin-bottom: 10px;}
.add-bottom {margin-bottom: 20px;}
.table tbody>tr>td.mid-align{
    vertical-align: middle;
}
.block {display: block;}
.inline-block {display: inline-block;}
.btn:hover,
.btn:focus{
  outline: none;
  box-shadow: none;
}
.text-left {text-align: left ;}
.text-right {text-align: right ;}
.add-padding-10 {padding: 10px !important;}
.add-padding-left-10{padding-left: 10px !important;}
.add-padding-left-20{padding-left: 20px !important;}
.add-padding-right-10{padding-right: 10px !important;}
.add-padding-right-20{padding-right: 20px !important;}
.add-padbottom {padding-bottom: 10px !important;}
.no-padding {padding: 0px !important;}
.no-padbottom {padding-bottom: 0px !important;}
.no-padleft {padding-left: 0px !important;}
.no-padright {padding-right: 0px !important;}
.bigger {font-size: 16px;}
.better {font-size: 14px;}
.hide {display: none;}
.add-padding {padding: 10px;}
.add-margin-left {margin-left: 10px;}
.table-borderless tr td{border-top: 0 !important;}
.grey {background: #e9e9e9 !important;}
.no-margin {
  margin: 0;
  padding: 0;
}
.absolute {
   position: absolute;
}
ul.unstyled {
  list-style: none;
  padding: 0;
  margin: 0;
}
/*Unordered Lists*/
ul.arrow,
ul.arrow-double,
ul.tick,
ul.cross,
ul.star,
ul.rss {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.arrow li::before,
ul.arrow-double li::before,
ul.tick li::before,
ul.cross li::before,
ul.star li::before,
ul.rss li::before,
ul.arrow li::after,
ul.arrow-double li::after,
ul.tick li::after,
ul.cross li::after,
ul.star li::after,
ul.rss li::after {
  font-family: FontAwesome;
  font-size: 11px;
}
ul.arrow li::before,
ul.arrow-double li::before,
ul.tick li::before,
ul.cross li::before,
ul.star li::before,
ul.rss li::before {
  margin-right: 5px;
}
ul.arrow li::before {
  content: "\f105";
}
ul.arrow-double li::before {
  content: "\f101";
}
ul.tick li::before {
  content: "\f00c";
}
ul.cross li::before {
  content: "\f00d";
}
ul.star li::before {
  content: "\f006";
}
ul.rss li::before {
  content: "\f09e";
}
.btn.btn-rounded {
  width: 24px;
  height: 24px;
  text-align: center;
  padding: 0px;
  margin: 0;
  font-size: 14px;
  line-height: 22px;

}
.btn.btn-circle {
  width: 24px;
  height: 24px;
  text-align: center;
  padding: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 24px;
}
.btn.btn-circle {
  width: 24px;
  height: 24px;
  text-align: center;
  padding: 0;
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  border-radius: 24px;
}
.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}
.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}
.btn:focus {
outline:0px;
}
.well.well-square {
	display: inline-block;
	width: 100%;
    min-height: 20px;
    padding: 19px 0px;
    margin-top: 10px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 0px solid #ddd;
    border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
    border-radius: 0px !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
.well.well-square-mini {
	display: inline-block;
	width: 100%;
    min-height: 20px;
    padding: 12px 0px;
    margin-top: 0px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 0px solid #ddd;
    border-bottom: 1px solid #ddd !important;
    border-radius: 0px !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:99999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
.cboxPhoto {padding: 30px; z-index: 999999;}
#cboxOverlay{background:rgba(0,0,0,0.8);z-index: 999999;}
#colorbox{outline:0;z-index: 999999;}
    #cboxContent{margin-top:32px; overflow:visible; background:#000;z-index: 999999;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#fff; padding:0 10px;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(images/controls.png) no-repeat 0 0;}

        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxPrevious{background-position:0px 0px; right:44px;}
        #cboxPrevious:hover{background-position:0px -25px;}
        #cboxNext{background-position:-25px 0px; right:22px;}
        #cboxNext:hover{background-position:-25px -25px;}
        #cboxClose{background-position:-50px 0px; right:0;}
        #cboxClose:hover{background-position:-50px -25px;}
        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}

/* This is the moving lens square underneath the mouse pointer. */
.cloud-zoom-lens {
	border: 4px solid #888;
	margin:-4px;	/* Set this to minus the border thickness. */
	background-color:#fff;
	cursor:move;
}

/* This is for the title text. */
.cloud-zoom-title {
	font-family:Arial, Helvetica, sans-serif;
	position:absolute !important;
	background-color:#000;
	color:#fff;
	padding:3px;
	width:100%;
	text-align:center;
	font-weight:bold;
	font-size:10px;
	top:0px;
}

/* cloud zoom wrapper styles */
.cloud-zoom-wrap {
    top:0;
    z-index:99;
    position:relative;
}

/* This is the zoom window. */
.cloud-zoom-big {
    left: 1px !important;
    top: 1px !important;
	overflow:hidden;
}

/* This is the loading message. */
.cloud-zoom-loading {
	color:white;
	background:#222;
	padding:3px;
	border:1px solid #000;
}


.navbar-scroll {
background-color: #fff;
}



.toolTip { /* This is the hook that the jQuery script will use */
	padding-right: 20px; /* This is need to make sure that the help icon is always visible */
	color: #3366FF;
	position: relative; /* This contains the .toolTipWrapper div that is absolutely positioned  */
}
	.toolTipMid:after {
	content: '';
	display: block;
	position: absolute;
	left: 100%;
	top: 15px;
	margin-top: -10px;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid #A1D40A;
}


.toolTipWrapper { /* The wrapper holds its insides together */
	width: 140px;
	text-align: center;
	margin-left: -140px;
	margin-top: -10px;
	position: absolute; /* Absolute will make the tooltip float above other content in the page */
	left: 0px;
	top: 0;
    display: none; /* It has to be displayed none so that the jQuery fadein and fadeout functions will work */
	color: #FFF;
	font-weight: bold;
	font-size: 9pt; /* A font size is needed to maintain consistancy */
}
.toolTipMid { /* Middle section of the tooltip */
	padding: 8px 10px;
	background: #A1D40A;
}



.product-layout.product-grid .cart-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0;
      -moz-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
    -webkit-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;

}
.product-layout:hover.product-grid .cart-overlay {
  opacity: 1;

}
.product-layout.product-list .cart-overlay {
  position: absolute;
  bottom: 10px;
  right: 10px;
  opacity: 0;
      -moz-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
    -webkit-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;

}
.product-layout:hover.product-list .cart-overlay {
  opacity: 1;

}
.faq dl {
	position: relative;
}
.faq dt {
	position: relative;
	background-color: rgba(255,255,255,0.4);
}
.faq dt.on:after {
	top: 0;
}
.faq dt:after {
	top: 0;
}
.faq dd {
	padding: 10px 0;
}