body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	color: #555;
	font-size: 12px;
	line-height: 25px;
	width: 100%;
	background-color: #F2F6FC;
}
h1, h2, h3, h4, h5, h6 {
	color: #6c6c6c;
	margin:0;
	padding-bottom: 15px;
}
/* default font size */
.fa {
	font-size: 14px;
}
/* Override the bootstrap defaults */
h1 {
	font-size: 33px;
}
h2 {
	font-size: 27px;
}
h3 {
	font-size: 21px;
}
h4 {
	font-size: 15px;
}
h5 {
	font-size: 12px;
}
h6 {
	font-size: 10.2px;
}
a {
	color: #7E7ECA;
}
a:hover {
	text-decoration: none;
	color: #4d4d97;
	outline: none;
}
a.thumbnail.active, a.thumbnail:focus, a.thumbnail:hover {
	border: none;
	outline: none;
}
a:active, a:focus, a:hover {
	border: none;
	outline: none;
}
legend {
	font-size: 18px;
	padding: 7px 0px
}
label {
	font-size: 12px;
	font-weight: normal;
}
select.form-control, textarea.form-control, input[type="text"].form-control, input[type="password"].form-control, input[type="datetime"].form-control, input[type="datetime-local"].form-control, input[type="date"].form-control, input[type="month"].form-control, input[type="time"].form-control, input[type="week"].form-control, input[type="number"].form-control, input[type="email"].form-control, input[type="url"].form-control, input[type="search"].form-control, input[type="tel"].form-control, input[type="color"].form-control {
	font-size: 12px;
}
.input-group input, .input-group select, .input-group .dropdown-menu, .input-group .popover {
	font-size: 12px;
}
.input-group .input-group-addon {
	font-size: 12px;
	height: 30px;
}
.input-group .input-group-select{
	width:15%;
	float: none;
	display: table-cell;
}
.input-group .input-group-select select{
	max-width: 100%;
}
	/* Fix some bootstrap issues */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
	display: inline;
}

.nav-tabs {
	margin-bottom: 15px;
}
div.required .control-label:before {
	content: '* ';
	color: #F00;
	font-weight: bold;
}

/* body > div.container, body > div.container-fluid{
	padding-top: 15px;
} */

/*lazy loading*/
/*
img {
  width: 400px;
  height: 300px;
  display: block;
  margin: 10px auto;
  border: 0;
}
*/
/* Basic breadcrumb layout */
.breadcrumb-fluid {
background-color: #212A37;
}
.cd-breadcrumb {
  /*width: 90%;*/
  max-width: 768px;
	padding-left:0;
	margin-bottom: 5px;
	background-color: #212A37;
	margin-top: 10px;
  /* padding: 0.5em 1em;
  margin: 1em auto;
 background-color: #edeff0;
  border-radius: .25em;*/
}
.cd-breadcrumb.light {
	background-color: transparent;	
}

.cd-breadcrumb.light li > * {
	color: #3c3c69
}

.cd-breadcrumb::after {
  clear: both;
  content: "";
  display: table;
}

.cd-breadcrumb li {
  display: inline-block;
  /*float: left;*/
  margin: 0.5em 0;
}

.cd-breadcrumb li::after {
  /* default separator */
  display: inline-block;
  content: '\00bb';
  margin: 0 .6em;
  color: #959fa5;
}

.cd-breadcrumb li:last-of-type::after {
  display: none;
}

.cd-breadcrumb li > * {
  display: inline-block;
  /*font-size: 1.4rem;*/
  color: #f0f8fe;
}

.cd-breadcrumb li.current > * {
  color: #96c03d;
}

.no-touch .cd-breadcrumb a:hover {
  color: #96c03d;
}

/* ----- CUSTOM SEPARATOR STYLE ----- */
.cd-breadcrumb.custom-separator li::after {
  content: '';
  height: 16px;
  width: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23C5C1C6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>")
              no-repeat center center;
  vertical-align: middle;
}



#loading{
	height: 20px;
	width: 20px
}

/* Gradent to all drop down menus */
.dropdown-menu li > a:hover {
	text-decoration: none;
	color: #ffffff;
	background-color: #485B93;
	background-image: linear-gradient(to bottom, #485B93, #505F64);
	background-repeat: repeat-x;
}
/* top */
#top {
	background-color: #000;
	color:#cfcfcf;
	/* border-bottom: 1px solid #e2e2e2; */
	padding: 4px 0px 3px 0;
	/* margin: 0 0 20px 0; */
	min-height: 50px;
	/* height: 49px; */
}
.home{
	position: 'relative';
	margin-bottom: 0;
	width: 100%;
	z-index: 100;
	transition: top .3s ease,margin-top .3s ease;
}
#top a {
	color: #CBCBCC;
}
#top a:hover {
	color: #7e7eca;
}
#top .container {
	padding: 0 20px;
}
#top #form-currency .currency-select,
#top #form-language .language-select {
	text-align: left;
}
#top #form-currency .currency-select:hover,
#top #form-language .language-select:hover {
	text-shadow: none;
	color: #ffffff;
	background-color: #485B93;
	background-image: linear-gradient(to bottom, #485B93, #505F64);
	background-repeat: repeat-x;
}
#top .btn-link, #top-links li, #top-links a {
	color: #888;
	text-shadow: 0 1px 0 #FFF;
	text-decoration: none;
}
#top .btn-link:hover, #top-links a:hover {
	color: #6c6c6c;
}
#top-links .dropdown-menu a {
	text-shadow: none;
}
#top-links .dropdown-menu a:hover {
	color: #FFF;
}
#top .btn-link strong {
	font-size: 14px;
        line-height: 14px;
}
#top-links {
	padding-top: 6px;
}
#top-links a + a {
	margin-left: 15px;
}
/* Tag Cloud */
@media (max-width: 991px) {
	#meta-keyword-cloud{
		margin-bottom:15px;
	}
}
/* logo */
#logo {
	/*margin: 0 0 10px 0;*/
	padding-top:12px;
	/* padding-left:30px; */
}
@media (max-width: 991px) {
	#logo {
		margin-bottom:15px;
	}
}
/* search */
/* #search {
	margin-bottom: 10px;
} */
#button-search {
	width:100%;
}
#search .input-lg {
	height: 38px;
	line-height: 20px;
	padding: 0 10px;
}
#search .btn-lg {
	font-size: 15px;
	line-height: 18px;
	padding: 10px 35px;
	/* text-shadow: 0 1px 0 #FFF; */
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
}
#search .form-control {
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	-webkit-box-shadow: none;
	box-shadow:none;
}
#input-search{
	border-radius: 20px;
	-webkit-box-shadow: none;
	box-shadow: none
}


@media (max-width: 991px) {
	#search{
		margin-bottom:15px;
	}
}

/* category list scroll */
#category-list div {
	height: 40px;
}
.btn-category {
	padding: 5px 15px; margin: 5px; border: 1px solid #ADADAD; display:inline-block;border-radius: 5px;
}
.btn-category:hover, .btn-category:active, .btn-category:focus  {
	border: 1px solid rgb(150, 150, 150); 
}

/* Genre */
.btn-genre {
	padding: 5px 25px;
	background-color: #99D;
	margin: 0 5px;
	color: #fff;
	border-radius: 10px 15px;
}
.btn-genre:hover {
	background-color: #dbdbe6;
	color: #7E7ECA;
}
.scroll-left{
	background-image: linear-gradient(to left, transparent 1%, white, white 99%);
	left:10px;
	padding:0 25px 0 5px;
	display:none;
}
.scroll-left span  {
	background: url('../image/sprite-dark.png') no-repeat -1px -2px;
	width: 12px;
	height: 21px;
	display: inline-block;
	position: relative;
}
.scroll-right  {
	background-image: linear-gradient(to right, transparent 1%, white, white 99%);
	right:0;
	padding-left:30px;
	display:none;
}
.scroll-right span  {
	background: url('../image/sprite-dark.png') no-repeat -17px -2px;
	width: 12px;
	height: 21px;
	display: inline-block;
	position: relative;
}
.scroll-left, .scroll-right  {
	font-size:15px;
	position: absolute;
	cursor:pointer;
	/* top: 50%; */
	height: 40px;
	width: 50px;
}

.scroll-left span, .scroll-right span  {
	top: 50%;
	position: absolute;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

/* Tag Cloud */
#meta-keyword-cloud-header{
	line-height: 17px;
}
@media (max-width: 478px) {
	#meta-keyword-cloud-header{
		line-height: 13px;
	}
}
	
#meta-keyword-cloud {
	line-height:30px; height:35px; overflow-y:hidden; width: 95%
}

#meta-keyword-cloud > span {
	/* margin:2px 5px; */display:inline-block
}

/* make the tags round */
/* #meta-keyword-cloud > span > a {
	border-radius:20px; border:1px solid #ADADAD; padding: 5px 10px
} */
#meta-keyword-cloud > span::after {
	content: " ";
	border-right: 1px solid #adadad;
	padding-right:10px;
}

#meta-keyword-cloud > span:last-child::after {
	content: " ";
	border-right: none;
	padding-right:0;
}

#meta-keyword-explore {
	font-size:14px; float:right
}

#show-all {
	cursor:pointer;
	border: 1px solid #ccc;
	padding: 10px;
	border-radius:20px;
	position: absolute;
	right: 0;
	top: 35%;
	height: 30px;
	width: 30px;
}
#show-all span {
	background: url('../image/sprite-dark.png') no-repeat -35px -9px;
	width: 21px;
	height: 11px;
	position: relative;
	display: inline-block;
	top: -60%;
	left: -80%;
	scale: .5;
}


/* cart */
#cart {
	margin-bottom: 10px;
}
#cart > .btn {
	font-size: 12px;
	line-height: 18px;
	color: #FFF;
}
#cart.open > .btn {
	background-image: none;
	background-color: #FFFFFF;
	border: 1px solid #E6E6E6;
	color: #555;
	box-shadow: none;
	text-shadow: none;
}
#cart.open > .btn:hover {
	color: #6c6c6c;
}
#cart .dropdown-menu {
	background: #eee;
	z-index: 1001;
}
#cart .dropdown-menu {
	min-width: 100%;
}
@media (max-width: 478px) {
	#cart .dropdown-menu {
		width: 100%;
	}
}
#cart .dropdown-menu table {
	margin-bottom: 10px;
}
#cart .dropdown-menu li > div {
	min-width: 427px;
	padding: 0 10px;
}
@media (max-width: 478px) {
	#cart .dropdown-menu li > div {
		min-width: 100%;
	}
}
#cart .dropdown-menu li p {
	margin: 20px 0;
}
/* Correcting Bootstrap */
.navbar-nav > li {float:none;}
.nav > li > a:focus, .nav > li > a:hover {background-color: transparent;}

/* column-left menu */
#column-left {
	width: 100%;
	/* height: 100%; */
	overflow: auto;
	background-color: #485B93;
	position: absolute;
	left: -200px;
	padding-top:20px;
	z-index: 10;
}

#column-left::-webkit-scrollbar {
	width: 10px;
	background-color: rgba(200,200,200,0);
}
#column-left::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color: rgba(128,139,156,0.2);
}

#column-left, #content, #footer {
	transition: all 0.3s;
}
#column-left + #content, #column-left + #content + #footer {
	position: relative;
	left: 0px;
}
#column-left.active {
	left: 0px;
}
#column-left.active + #content, #column-left.active + #content + #footer {
	left: 235px;
}
/* Desktop */
@media (min-width: 768px){
#column-left {
	left: 0px;
}
#column-left + #content, #column-left + #content + #footer {
	left: 0px;
	margin-left: 235px;
}
#column-left.active + #content, #column-left.active + #content + #footer {
	left: 0px;
	margin-left: 235px;
}
}

/* Navigation */
#navigation {
	text-transform: uppercase;
	padding: 15px 15px 15px 15px;
	color: #FFFFFF;
	background: #19222E;
	display: block;
}

/* Menu */
#button-menu {
	line-height: 30px;
	font-size: 24px;
	float: left;
	padding: 10px 16px;
	line-height: 25px;
	cursor: pointer;
	color: #6D6D6D;
	border-right: 1px solid #eee;
}

#menu, #menu ul, #menu li {
	padding: 0;
	margin: 0;
	list-style: none;
}
#menu {
	margin-bottom: 25px;
	width: 100%;
}
#menu li a {
	text-decoration: none;
	display: block;
	padding: 10px;
	cursor: pointer;
}
#menu li a.parent:after {
	font-family: FontAwesome;
	float: right;
	margin-right: 8px;
}
#menu li a.parent:after {
	content: "\f107";
}
#menu li a.collapsed:after {
	content: "\f105";
}
/* 1st lvl */
#menu > li {
	position: relative;
}
#menu > li > a {
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	padding: 10px 15px 10px 15px;
	min-height: 15px;
	color: #fff;
	padding-left: 20px;
}
#menu > li > a:hover {
	background-color: #415284;
}
#menu > li > a > i {
	font-size: 16px;
	width: 18px;
	margin-right: 5px;
}
#menu > li.active > a {
	color: #fff;
	background-color: #171b21;
}
#menu > li > ul {
	background-color: transparent;
}
/* 2nd lvl */
#menu li li a {
	color: #fff;
}
#menu li li a:before {
	content: "\f101";
	font-size: 13px;
	font-family: FontAwesome;
	margin-left: 10px;
	margin-right: 10px;
	transition: margin ease 0.5s;
}
#menu li li a:hover:before {
	margin-right: 20px;
}
#menu li li a:hover {
	color: #FFFFFF;
	background-color: #242d37;
}
#menu li li.active > a {
	color: #0b91d2;
	background-color: #242d37;
}
#menu li ul a {
	padding-left: 20px;
}
#menu li li ul a {
	padding-left: 40px;
}
#menu li li li ul a {
	padding-left: 60px;
}
#menu li li li li ul a {
	padding-left: 80px;
}

/* content */
#content {
	min-height: 800px;
}
/* footer */
footer {
	margin-top: 30px;
	padding-top: 30px;
	background-color: #303030;
	border-top: 1px solid #ddd;
	color: #e2e2e2;
	text-align: center
}
footer hr {
	border-top: none;
	border-bottom: 1px solid #555;
}
footer a {
	color: #ccc;
}
footer a:hover {
	color: #fff;
}
footer h5 {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
}
footer li {border-right:1px solid #fff}
footer li:last-child{border-right:none}
footer ul.list-inline li{padding-right: 15px; padding-left: 15px}
/* alert */
.alert {
	padding: 8px 14px 8px 14px;
}
/* breadcrumb */
/* #picture .breadcrumb {
	border-top: 1px solid #393636;
	border-bottom: 1px solid #444;
} */
#picture .breadcrumb > li:after {
	border-right: 1px solid #646464;
	border-bottom: 1px solid #646464;
}
#picture a {
	color: #CBCBCC
}
.breadcrumb {
	margin: 0 0 20px 0;
	padding: 8px 0;
	/* border-top: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9; */
	border-radius: 0;
	background-color: transparent;
}
.breadcrumb i {
	font-size: 15px;
}

.breadcrumb > li {
	padding: 0 20px;
	position: relative;
	white-space: nowrap;
}
.breadcrumb > li + li:before {
	content: '';
	padding: 0;
}
.breadcrumb > li:after {
	content: '';
	display: block;
	position: absolute;
	top: 3px;
	right: -5px;
	width: 15px;
	height: 15px;
	border-right: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.pagination {
	margin: 0;
}
/* buttons */
.buttons {
	margin: 1em 0;
}
.btn {
	padding: 7.5px 12px;
	font-size: 12px;
	border: none;
	border-radius: 0; 
	/* box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); */
}
.btn-xs {
	font-size: 9px;
}
.btn-sm {
	font-size: 10.2px;
}
.btn-lg {
	padding: 10px 16px;
	font-size: 15px;
}
.btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover {
	font-size: 12px;
}
.btn-group > .btn-xs {
	font-size: 9px;
}
.btn-group > .btn-sm {
	font-size: 10.2px;
}
.btn-group > .btn-lg {
	font-size: 15px;
}
.btn-default {
	color: #777;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background-color: #e7e7e7;
}
.btn-primary {
	color: #ffffff;
	/* text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); */
	background-color: #485B93;
	/* background-image: linear-gradient(to bottom, #485B93, #505F64);
	background-repeat: repeat-x;
	border-color: #505F64 #505F64 #145e7a; */
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
	background-color: #505F64;
	background-position: 0 -15px;
}
.btn-warning {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #faa732;
	background-image: linear-gradient(to bottom, #fbb450, #f89406);
	background-repeat: repeat-x;
	border-color: #f89406 #f89406 #ad6704;
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-danger {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #da4f49;
	background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
	background-repeat: repeat-x;
	border-color: #bd362f #bd362f #802420;
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-success {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #5bb75b;
	background-image: linear-gradient(to bottom, #62c462, #51a351);
	background-repeat: repeat-x;
	border-color: #51a351 #51a351 #387038;
}
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-info {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #df5c39;
	background-image: linear-gradient(to bottom, #e06342, #dc512c);
	background-repeat: repeat-x;
	border-color: #dc512c #dc512c #a2371a;
}
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
	background-image: none;
	background-color: #df5c39;
}
.btn-link {
	border-color: rgba(0, 0, 0, 0);
	cursor: pointer;
	color: #485B93;
	border-radius: 0;
}
.btn-link, .btn-link:active, .btn-link[disabled] {
	background-color: rgba(0, 0, 0, 0);
	background-image: none;
	box-shadow: none;
}
.btn-inverse {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #363636;
	background-image: linear-gradient(to bottom, #6c6c6c, #222222);
	background-repeat: repeat-x;
	border-color: #222222 #222222 #000000;
}
.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
	background-color: #222222;
	background-image: linear-gradient(to bottom, #333333, #111111);
}
/* list group */
.list-group a {
	border: 1px solid #DDDDDD;
	color: #888888;
	padding: 8px 12px;
}
.list-group a.active, .list-group a.active:hover, .list-group a:hover {
	color: #6c6c6c;
	background: #eeeeee;
	border: 1px solid #DDDDDD;
	text-shadow: 0 1px 0 #FFF;
}
/* carousel */
.carousel-caption {
	color: #FFFFFF;
	text-shadow: 0 1px 0 #000000;
}
.carousel-control .icon-prev:before {
	content: '\f053';
	font-family: FontAwesome;
}
.carousel-control .icon-next:before {
	content: '\f054';
	font-family: FontAwesome;
}
/* product list */
#product-product #picture{
	background-color:#1D1F21;
	margin-bottom: 20px;
}
/* #product-product #description{
	padding: 20px 0 ;
} */

/* #picture-main{
	height: 500px;
} */

#picture-main a {
display: inline-block;
}
#picture-main a span {
	display: block;
}
#picture-main a.prev, #picture-main a.next {
	position: absolute;
	top: 50%;
	margin-top: -31px;
}
#picture-main a.prev {
	left:20px;
	top: 0;
	bottom: 0;
	right: 50%;
}
#picture-main a.next {
	right:20px;
	top: 0;
	bottom: 0;
	left: 50%;
}

#picture-main a.prev span {
	background: url('../image/sprite.png') no-repeat -1px -2px;
	width: 12px;
	height: 21px;

	top: 50%;
	position: relative;
	margin-top: -31px;
}

#picture-main .img-responsive{
	max-width: 70%;
	height: auto;
	max-height: 500px;
}

#picture-featured .img-responsive{
	float: left;
	max-width: 70%;
	height: auto;
	max-height: 200px;
	padding-right: 10px;
}

/*
.mfp-figure img,
#picture-main img {
  transition: transform 0.3s ease;
  cursor: zoom-in;
}

.mfp-figure:hover img,
#picture-main:hover img {
  transform: scale(1.3);
}
*/

/* Wrap the Magnific image for overflow clipping */
#picture-main, .mfp-figure {
  overflow: hidden;
  position: relative;
  cursor: pointer;
	display: inline-block;
	max-height: 500px;
}

#picture-main img, .mfp-img {
  transition: transform 0.2s ease-out;
  transform-origin: center center;
  will-change: transform;
}

.mfp-img:hover, .popup-img:hover {
 cursor: zoom-in;
}

/*
.row-masonry {
	display: block; /* Masonry takes over positioning * /
}

.item-dark {
	width: 15em;               /* base width for each card * /
	margin-bottom: 1em;        /* vertical spacing between items * /
	box-sizing: border-box;
	display: inline-block;     /* Masonry uses absolute positioning internally * /
	text-align: center;
	border: 1px solid #ddd;
	background-color: #f0f0f0;
	padding: 10px;
}

.item-dark img {
	max-width: 100%;
	height: auto;
	margin-bottom: 10px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
*/

/*
.row-masonry {
	text-align: center; /* centers the grid nicely * /
}*/

.item-dark {
	display: inline-block; /* ✅ makes the cards flow as a grid */
	vertical-align: top;
	width: 22em;
	margin: 0.5em;
	box-sizing: border-box;
	border: 1px solid #ddd;
	background-color: #f0f0f0;
	padding: 10px;
	text-align: left; /* for inside content */
}

.item-dark .image {
	display: inline;
	vertical-align: top;
	width: 40%;           /* ✅ image on the left */
	margin-right: 5%;
	float: left;
}

.item-dark img {
	max-width: 100%;
	height: auto;
	display: block;
}

.item-dark .caption {
	display: inline-block;
	vertical-align: top;
	width: 100%;          /* ✅ text on the right */
	box-sizing: border-box;
}
.item-dark .caption h4 {
	margin-bottom: 5%;
}

.item-dark .caption a {
	float: right;
}

	@media (max-width: 686px) {
		.item-dark {
			width: 20em;
		}
	}

	@media (max-width: 586px) {
		.item-dark {
			width: 77%;
		}
	}

	@media (max-width: 486px) {
		.item-dark {
			width: 97%;
		}
	}

/*.item-dark a{color:#fff}
.item-dark a:hover{color:#f8dabe}*/


  /* Limit modal to 50% of viewport width */
  .modal-dialog {
    width: 50%;
    max-width: 50vw;
    margin: 30px auto;
  }
	.modal-body {
		overflow: hidden;
	}

  /* Make the image fill modal width, but stay responsive */
  .popup-img {
    max-width: 100%;
    max-height: 50vh; /* optional: keeps image from getting too tall */
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
  }

.modal-body {
	position: relative;
}

.modal-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.4);
	border: none;
	color: white;
	padding: 10px 15px;
	cursor: pointer;
	border-radius: 50%;
}

.modal-nav.left {
	left: 10px;
}

.modal-nav.right {
	right: 10px;
}

.modal-nav:hover {
	background: rgba(0, 0, 0, 0.7);
}

	@media (max-width: 768px) {
		.modal-dialog {
			width: 90%;
			max-width: 90vw;
		}
	}

@media (max-width: 992px) {
	#meta-keyword-cloud-header {
		padding-bottom: 10px
	}
}
@media (max-width: 768px) {
	#meta-keyword-cloud-header span{
		display: inline-block;
		scale: .8;
	}
		
	#picture-main span{
		scale: .8;
	}
}
/* 
@media (max-width: 600px) {
	#picture-main{
		max-height: 300px;
	}
} */

@media (max-width: 480px) {
	#picture-main span{
		scale: .5;
	}
}

#picture-main a.next span {
	background: url('../image/sprite.png') no-repeat -17px -2px;
	width: 12px;
	height: 21px;

	top: 50%;
	position: absolute;
	margin-top: -31px;
	right: 0;
}


#picture-main a.popup, #picture-main button.popup {
	z-index: 90;
	position: relative;
	background: none;
	border: none;
}

#picture-main img {
	/* max-height: 450px; */
	display:block;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 20px;
}

.product-thumb {
	border: 1px solid #ddd;
	margin-bottom: 20px;
	overflow: auto;
}
.product-thumb .image {
	text-align: center;
}
.product-thumb .image a {
	display: block;
}
.product-thumb .image a:hover {
	opacity: 0.8;
}
.product-thumb .image img {
	margin-left: auto;
	margin-right: auto;
}
.product-grid .product-thumb .image {
	float: none;
}
@media (min-width: 767px) {
.product-list .product-thumb .image {
	float: left;
	padding: 0 15px;
}
}
.product-thumb h4 {
	font-weight: bold;
}
.product-thumb .caption {
	padding: 0 20px;
	min-height: 100px;
}
.product-list .product-thumb .caption {
	margin-left: 230px;
}
@media (max-width: 1200px) {
.product-grid .product-thumb .caption {
	min-height: 210px;
	padding: 0 10px;
}
}
@media (max-width: 767px) {
.product-list .product-thumb .caption {
	min-height: 0;
	margin-left: 0;
	padding: 0 10px;
}
.product-grid .product-thumb .caption {
	min-height: 0;
}
}
.product-thumb .rating {
	padding-bottom: 10px;
}
.rating .fa-stack {
	font-size: 8px;
}
.rating .fa-star-o {
	color: #999;
	font-size: 15px;
}
.rating .fa-star {
	color: #FC0;
	font-size: 15px;
}
.rating .fa-star + .fa-star-o {
	color: #E69500;
}
h2.price {
	margin: 0;
}
.product-thumb .price {
	color: #6c6c6c;
}
.product-thumb .price-new {
	font-weight: 600;
}
.product-thumb .price-old {
	color: #999;
	text-decoration: line-through;
	margin-left: 10px;
}
.product-thumb .price-tax {
	color: #999;
	font-size: 12px;
	display: block;
}
.product-thumb .button-group {
	border-top: 1px solid #ddd;
	background-color: #eee;
	overflow: auto;
}
.product-list .product-thumb .button-group {
	border-left: 1px solid #ddd;
}
@media (max-width: 768px) {
	.product-list .product-thumb .button-group {
		border-left: none;
	}
}
.product-thumb .button-group button {
	width: 60%;
	border: none;
	/* display: inline-block; */
	float: left;
	background-color: #eee;
	color: #888;
	line-height: 38px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}
.product-thumb .button-group button + button {
	width: 20%;
	border-left: 1px solid #ddd;
}
.product-thumb .button-group button:hover {
	color: #6c6c6c;
	background-color: #ddd;
	text-decoration: none;
	cursor: pointer;
}
@media (max-width: 1200px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}
@media (max-width: 767px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}
.thumbnail{
	background-color: transparent;
	border: none;
}
.thumbnail a > img, .thumbnail > img {
	max-height: 20px;
}
.thumbnail img.focus {
	border: 1px solid #fff;
}
.thumbnail img.nonfocus {
	border: 1px solid #606060;
	opacity: .7;
}
 .thumbnails:hover {
	transition: height .3s ease-in-out;
	height: 80px;
}
/*.thumbnails:hover img {
	max-height: 40px;
	// transition: max-height .5s ease-in-out; 
} */

.thumbnails:hover > .thumbnail img.nonfocus:hover {
	border: 1px solid #fff;
	opacity: 1;
	transition: border .3s ease-in-out, opacity .3s ease-in-out, scale .3s ease-in-out;
	max-height: 40px;
	z-index: 10;
	position: relative;
}


.thumbnails {
	/* margin-left: -20px;
	padding-right: 20px; */
	overflow: hidden;
	clear: both;
	list-style: none;
	display:inline-block;
	padding-top: 10px;
	padding-bottom: 22px;
	z-index: 90;
}
.thumbnails > span {
	margin-left: 5px;
	float:left;
	/* margin-top: 20px; */
}

.thumbnails > img {
	width: 100%;
}
.image-additional a {
	margin-bottom: 20px;
	padding: 5px;
	display: block;
	border: 1px solid #ddd;
}
.image-additional {
	max-width: 78px;
}
.thumbnails .image-additional {
	float: left;
	margin-left: 20px;
}

.selfthumbnail{background-color:transparent;border: 1px solid #ddd;margin-bottom: 0}
.selfthumbnail a > img, .selfthumbnail > img {
	margin-right: auto;
	margin-left: auto;
}
.selfthumbnail > img {
	display: block;
	max-width: 100%;
	height: auto;
}
a.selfthumbnail.active, a.selfthumbnail:focus, a.selfthumbnail:hover{border-color:transparent}
.selfthumbnails{overflow:auto;clear:both;list-style:none;padding:0;margin:0;}
.selfthumbnails > img{width:100%}
.image-additional a{padding:5px;display:block;border:1px solid #ddd;}
.image-additional{max-width:78px;}
.selfthumbnails .image-additional{float:left;margin-top:10px; margin-right: 20px;}




@media (min-width: 1200px) {
	#content .col-lg-2:nth-child(6n+1),
	#content .col-lg-3:nth-child(4n+1),
	#content .col-lg-4:nth-child(3n+1),
	#content .col-lg-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	#content .col-md-2:nth-child(6n+1),
	#content .col-md-3:nth-child(4n+1),
	#content .col-md-4:nth-child(3n+1),
	#content .col-md-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	#content .col-sm-2:nth-child(6n+1),
	#content .col-sm-3:nth-child(4n+1),
	#content .col-sm-4:nth-child(3n+1),
	#content .col-sm-6:nth-child(2n+1) {
		clear:left;
	}
}

/* padding on top of container */
/* @media (max-width: 600px) {
	body > div.container, body > div.container-fluid{
		padding-top: 130px;
	}
}

@media (max-width: 768px) {
	body > div.container, body > div.container-fluid{
		padding-top: 130px;
	}
}
*/
@media (max-width: 480px) {
	#picture-main a.next{
		left:80%;
		z-index: 1;
	}
	#picture-main a.prev{
		right:80%;
		z-index: 1;
	}
	#picture-main a.popup{
		z-index: 0;
	}
} 


/* fixed colum left + content + right*/
@media (min-width: 768px) {
    #column-left  .product-layout .col-md-3 {
       width: 100%;
    }

	#column-left + #content .product-layout .col-md-3 {
       width: 50%;
    }

	#column-left + #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }

    #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }
}

/* fixed product layouts used in left and right columns */
#column-left .product-layout, #column-right .product-layout {
	width: 100%;
}

/* fixed mobile cart quantity input */
.input-group .form-control[name^=quantity] {
	min-width: 50px;
}

/* Missing focus and border color to overwrite bootstrap */
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
    background-image: none;
    background-color: #df5c39;
}

/* Home */

.jg {
	padding-top:15px;
  display: flex;
  flex-wrap: wrap;
}

.jg > a, .jg::after {
  --ratio: calc(var(--w) / var(--h));
  --row-height: 25rem;
  flex-basis: calc(var(--ratio) * var(--row-height));
}

.jg > a {
	overflow: hidden;
	position: relative;
  margin: 0.25rem;
  flex-grow: calc(var(--ratio) * 100);
	cursor:pointer;
}

.jg::after {
  --w: 2;
  --h: 1;
  content: '';
  flex-grow: 1000000;
}

.jg > a > img {
  display: block;
	width: 100%;  
	transition: transform .3s ease;
}

.jg > a > div{
	opacity: 0;
	transition: opacity 400ms;
}
.jg > a:hover > img {
	transform: scale(1.1);
}
.jg > a:hover > div{
	opacity: 1;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	background-image: linear-gradient(rgba(0,0,0,.15) 65%,rgba(0,0,0,.85));
	color: white;
	padding: 10px;
}
.jg > a > div > span{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10px;
	font-size: 14px;
	color: #fff;
	font-weight: 600;
	min-height: 17px;
	text-shadow: 0 0 2px #000;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.clear {
	clear: both;
	padding-bottom: 30px;
}