/* Custom CSS ---------------------------------------------------------------------------------------------------------------------------------------- */
body { font-family: 'Ubuntu','Pridi'; color:#666;}

a { color:#3498db; transition:.2s;}
a:hover, a:active, a:focus { color:#e74c3c; transition:.2s;}

.img-shadow { border:3px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,0.1);}

/* Button */
.btn {}
.btn-default { font-family: 'Ubuntu'; text-shadow:0 1px 1px rgba(0,0,0,0.2); font-weight:600; border:none; }
/* Text */
.text-red { color:#ff4500;}


/* Navbar ----------------------------------------------------------------------------------------------------------------------------------------------- */
.navbar { min-height:70px; box-shadow:0 2px 6px rgba(0,0,0,0.3);}
.navbar-brand { font-family: 'Lusitana'; font-weight:400; font-size:18px; line-height:18px; padding:10px 10px 5px 15px; color:#fff !important; width:320px; transition:.3s;} 
.navbar-brand>span { font-family: 'Ubuntu'; font-weight:300; font-size:12px; color:rgba(255,255,255,0.6);}
.navbar-brand>small { font-family: 'Pridi'; font-weight:300; width:100%; display:inline-block; font-size:14px; line-height:14px; transition:.2s;}
.navbar-default { box-shadow:0 1px 10px rgba(0,0,0,0.3);}

.navbar-default .navbar-nav > li > a { font-family: 'Ubuntu'; font-weight:300; color:#fff; font-size:13px; padding:18px 20px 13px; transition:.3s;}
.navbar-default .navbar-nav > li > a > .sublang {  font-family: 'Pridi','Ubuntu'; font-size:0px; font-weight:300; color:rgba(255,255,255,0.6); padding:0; height:1px; transition:.2s;}
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:active,
.navbar-default .navbar-nav > li > a:hover { color:#ffd700; background-color:rgba(255,255,255,0.1);}
.navbar-default .navbar-nav > li.active > a { background-color:rgba(255,255,255,0.1); color:#fff;}
.navbar-default .navbar-nav > li.active > a:focus,
.navbar-default .navbar-nav > li.active > a:active,
.navbar-default .navbar-nav > li.active > a:hover { background-color:rgba(255,255,255,0.1); color:#ffd700;}

/* Affix Top */
.affix-top {min-height:80px; transition:.2s;}
.affix-top .navbar-brand { font-size:24px; padding:20px 10px 5px 15px; transition:.3s; text-shadow:0 1px 1px rgba(0,0,0,0.3);} 
.affix-top .navbar-brand>small { font-size:16px; transition:.2s;}
.affix-top .navbar-nav > li > a { font-size:16px; transition:.3s;}
.affix-top .navbar-nav > li > a > .sublang { font-size:14px;  height:24px; padding:5px 2px; transition:.2s;}

@media (max-width: 768px) {	 
	.navbar-default .navbar-toggle { color:#fff; padding: 5px; margin-right: 10px; border-color:rgba(255,255,255,0.3); font-weight:100; font-size:14px;}
	.navbar-default .navbar-toggle:hover { background-color:#000;}
	.navbar-brand { font-size:14px; float:left; width:235px;}
	.navbar-brand>small { font-size:12px;}
	.affix-top { min-height: 65px;}
	.affix-top .navbar-brand { font-size:14px; float:left; width:235px; padding: 10px 10px 5px 15px;}
	.affix-top .navbar-brand>small { font-size:12px;}
	.affix-top .navbar-nav > li > a { border-bottom:1px solid rgba(255,255,255,0.1);}
	.affix-top .navbar-nav > li.active > a { background-color:rgba(0,0,0,0.6); border-bottom:1px solid rgba(255,255,255,0.1);}
	.navbar-nav { margin:0 -15px;}
}


/* Header ----------------------------------------------------------------------------------------------------------------------------------------------- */
header { background-repeat: no-repeat;  background-attachment: scroll; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; text-align: center;  }
header { background-size: cover; color: #fff; height:800px;}
header .intro-text {  padding-top: 120px;  padding-bottom: 50px; text-shadow:0 1px 3px rgba(0,0,0,0.6);}
header .intro-text .intro-lead-in {  font-family:'Pridi','Ubuntu'; font-size: 22px; line-height: 22px; margin-bottom: 25px; font-weight:300;}
header .intro-text .intro-heading {  font-family:'Lusitana'; font-weight: 700; font-size: 50px; line-height: 50px; margin-bottom: 25px;}
header .intro-text .intro-heading small { font-family:'Ubuntu'; font-weight:300; font-size:26px;} 
header select.form-control { width:135px; height:90px; margin:0 auto; font-family:'Ubuntu'; font-size:52px; font-weight:700; border-radius:12px; padding:10px; border:3px solid #666; color:#000;}
header select.form-control option { font-size:16px; font-weight:400;}
header button.btn { background-color:#666; transition:.2s; color:#fff;}
header button.btn:focus, header button.btn:active, header button.btn:focus:active, header button.btn:hover:active, 
header button.btn:hover { background-color:#333; transition:.2s; color:#ffd700;}
@media (max-width: 768px) {	 
	header .intro-text { padding-top:90px;}
	header .intro-text .intro-lead-in { font-size:14px; margin-bottom: 10px; display:none;}
	header .intro-text .intro-heading { font-size:42px; line-height:30px;}
	header .intro-text .intro-heading small { font-size:24px;}
}

/* Breadcrumb */
#breadcrumb { padding: 75px 0 0 0; background-color:#222;}
#breadcrumb ol { border-radius:0; font-size:12px; background-color:#f6f6f6; box-shadow:0 -3px 6px rgba(0,0,0,0.05) inset;}
#breadcrumb ol li { text-transform:capitalize;}
#breadcrumb a { color:#aaa; transition:.2s;}
#breadcrumb a:focus,
#breadcrumb a:active,
#breadcrumb a:hover { color:#000; transition:.2s;}
#breadcrumb > .active { color:#000;}
@media (max-width: 768px) {	
	#breadcrumb { padding: 50px 0 0 0;}
}

/* Paginate */
div.paginate { font-family: 'Ubuntu';  margin:10px 0; display: inline-block;	width:100%;}
div.paginate .paginate-label { font-size:12px; line-height:20px; margin:0; padding: 0 15px 5px; display: inline-block; width:100%;}

/* Search Box */
.col-searchbox { }
.col-searchbox input.form-control { border-radius:0; height:31px;}
.col-searchbox button.btn { background-color:#333; line-height:16px; padding:6px 10px 7px; font-size:16px; font-weight:400; color:#fff; transition:.2s; border-radius:0;}
.col-searchbox button.btn:hover { background-color:#000; transition:.2s;}
@media (max-width: 768px) {	 
	.col-searchbox { width:100% !important; margin-right: 0 !important; padding-right: 0 !important; border-right:none !important;}
	.col-shoesize { width:100% !important; margin-right: 0 !important; padding-right: 0 !important; border-right:none !important;}
}

/* Lists Pagination */
.pagination { font-family: 'Ubuntu'; font-size:12px; margin:0; box-shadow:0 1px 6px -3px rgba(0,0,0,0.3); padding:0;}
.pagination > li {}
.pagination > li > a { border-radius:0; color:#000;}
.pagination > li > a:hover { color:#000;}
.pagination > li:first-child > a,
.pagination > li:last-child > a { border-radius:0;}
.pagination > li.disabled > a > span { background-color:#fff; border-color:#ddd; color:#aaa;}
.pagination > li.active > a { background-color:#222; border-color:#000;}
.pagination > li.active > a:focus,
.pagination > li.active > a:active,
.pagination > li.active > a:hover { background-color:#222; border-color:#000;}

/* Filter Action */
.panel-tool { background-color:#f6f6f6; display:inline-block; width:100%; border-radius:0; border-color: rgba(0,0,0,0.1); box-shadow:0 1px 6px -3px rgba(0,0,0,0.3); margin-bottom:0;}
.panel-tool { padding:10px 0 11px; font-family: 'Ubuntu','Pridi'; font-size:12px; font-weight:300;}
.panel-tool input.form-control { border-radius:0; height:31px;}
.panel-tool label.title { font-size:16px; font-weight:300; margin-right:5px; margin-bottom:0; vertical-align:middle;}
.panel-tool button.btn-filter { background-color:#333; line-height:16px; padding:6px 10px 7px; font-size:14px; font-weight:400; color:#fff; transition:.2s; box-shadow:0 3px 0px 0 rgba(255,255,255,0.15) inset;}
.panel-tool button.btn-filter:hover { background-color:#000; transition:.2s;}
@media (max-width: 768px) {	 
	.panel-tool label.title { font-size:12px; width:100% !important;}
}
/* Check Box */
.panel-tool .checkbox-group { margin:0;}
.panel-tool .checkbox-group label { margin-right:15px; margin-bottom:0;}
.panel-tool .checkbox-group label input[type="checkbox"] { vertical-align: top; margin: 7px 3px 0 0;}
.panel-tool .checkbox-group label span.custom-control-description { font-weight:300; font-size:18px; cursor:pointer;}
/* Bootstrap Select */
.bootstrap-select {}
.bootstrap-select .dropdown-toggle { border: 1px solid #ccc; border-radius:0; padding: 5px 12px 4px;}
.bootstrap-select .dropdown-menu {}
.bootstrap-select .filter-option { font-weight:300; text-shadow:none; padding: 0; font-size: 12px; line-height: 20px; display: inline-block; width:100%; color:#aaa;}
.bootstrap-select .filter-option>.text-black { color:#000;}
.bootstrap-select .filter-option>.text-lg { font-family: 'Ubuntu','Pridi'; font-size:16px; font-weight:600;}
.bootstrap-select ul.dropdown-menu.inner li { display: inline-block; width:100%;}
/* Select - Size */
.bootstrap-select.size-filter { width:calc(100% - 84px) !important;}
@media (max-width: 768px) {	 
	.bootstrap-select.size-filter { width:100% !important;}
}
/* Select - Badge Color */
.bootstrap-select.color-filter { width:calc(100% - 47px) !important;}
.bootstrap-select.color-filter .dropdown-toggle { padding-bottom:4px; padding-right:20px; min-height:31px;}
.bootstrap-select .filter-option>.badge { float:left; width:15px; height:15px; display:block; border-radius:3px; border:1px solid rgba(0,0,0,0.2); top:0; margin-right:3px; margin-top:2px; margin-bottom:2px;}
.bootstrap-select .filter-option>.badge-title { float:right; width:calc(100% - 50px); color:#000; font-size:16px; font-weight:400;}
.bootstrap-select .filter-option>.badge-title .en { color:#999; font-size:12px; font-weight:400;  margin-left:10px;}
.bootstrap-select ul.dropdown-menu.inner li a { display: inline-block; width:100%; padding:3px 10px;}
.bootstrap-select ul.dropdown-menu.inner li a>.badge { float:left; width:40px; height:22px; display:block; border-radius:3px; border:1px solid rgba(0,0,0,0.2);}
.bootstrap-select ul.dropdown-menu.inner li a>.badge-title { float:right; width:calc(100% - 50px); color:#000; font-size:14px; font-weight:600;}
.bootstrap-select ul.dropdown-menu.inner li a>.badge-title .en { color:#999; font-size:14px; font-weight:300;  margin-left:10px;}
.bootstrap-select ul.dropdown-menu.inner li.selected.active a>.badge-title,
.bootstrap-select ul.dropdown-menu.inner li.selected.active a>.badge-title .en { color:#fff;}

/* Section ----------------------------------------------------------------------------------------------------------------------------------------------- */
section { font-family: 'Pridi','Ubuntu'; font-weight:400; padding:60px 0; display:inline-table; width:100%; min-height:600px;}
section .section-heading { font-family: 'Lusitana';  font-weight:700; text-transform:uppercase; color:#000;}
section .section-subheading { font-family: 'Pridi'; color:#000; font-weight:300;}

section .item-grid { padding:0 15px;}
section .item-grid-5 { width:20%; float:left; padding:5px; border-top:2px solid rgba(0,0,0,0.08); border-right:1px solid rgba(0,0,0,0.05); transition:.2s;}
section .item-grid-5:nth-child(5n+5) { border-right-color:#fff;}
section .item-grid-5:hover { background-color:rgba(0,0,0,0.05); transition:.3s;}

section .item-topic { font-family: 'Pridi'; font-size:28px; font-weight:400; color:#000;}

section .item-image { text-align:center; position:relative; font-family:'Ubuntu','Pridi';}
section .item-image .img_product { border-radius: 6px 0 6px 6px; margin-bottom: 0; background-repeat: no-repeat; background-position: center center;background-size: cover;width: 100%;display: inline-block;}
section .item-image .img_nodisplay { text-align: center;color: rgb(170, 170, 170);border: 1px solid rgb(238, 238, 238);border-radius: 6px;font-size: 14px;font-weight: 300;margin-bottom: 5px;}
section .item-image .badge-catalog { position:absolute;border-radius:0; background-color:rgba(0,0,0,0.8); }
section .item-image .badge-catalog { font-size:14px; font-weight:300; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,0.3); }
section .item-image .badge-catalog.instock { top:5px; left:-1px; padding:1px 10px 1px 10px; background-color:rgba(50,205,50,0.8); color:#fff; border-radius:0 3px 3px 0; box-shadow:1px 1px 0px rgba(0,0,0,0.1);}
section .item-image .badge-catalog.preorder { bottom:15px; left:-1px; padding:1px 10px 1px 10px; background-color:rgba(255,140,0,0.8);}
section .item-image .badge-catalog.promo { background-color:rgba(230,0,36,0.8); color:#fff; top:-1px; right:-1px; border-radius:0 0 0 10px; font-size:16px; font-weight:400; padding:5px 15px 5px; box-shadow:-1px 1px 1px rgba(0,0,0,0.2);}
section .item-image .badge-catalog.catalog { background-color:rgba(255,165,0,0.8); color:#fff; bottom:10px; left:0px; border-radius:0 5px 0 5px; padding:3px 10px 3px 10px; box-shadow:0px -1px 0px rgba(0,0,0,0.1);}
section .item-image .badge-size { position:absolute; bottom:-5px; right:5px; padding:5px; border-radius:100%; background-color:rgba(0,0,0,0.8); 
font-family:'Ubuntu','Pridi'; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,0.3); font-size:16px; font-weight:600; height:40px; width:40px; line-height:30px;}

section .item-content { text-align:left; padding:0 5px; height:120px; }
section .item-content .name { font-family:'Ubuntu','Pridi'; font-size:16px; font-weight:600; color:#000; line-height:20px; padding:0; overflow:hidden;}
section .item-content .color { display:inline-block; width:100%; padding:5px 0 0; min-height:20px; font-family:'Ubuntu','Pridi'; font-size:12px; line-height:12px; font-weight:400; color:#000; }
section .item-content .badge { background-color:#aaa; width:16px; height:16px; margin-right:5px; margin-top:-2px; border-radius:3px; text-transform: capitalize; border:1px solid rgba(0,0,0,0.2); display:inline-block;}
section .item-content .price { font-family:'Ubuntu'; font-size:16px; font-weight:700; line-height:20px; color:#000; padding-top:0;}
section .item-content .price:before { font-family:'Pridi'; font-size:14px; font-weight:400; content:'ราคา '; color:#666; margin-right:5px;}
section .item-content .price:after { font-family:'Pridi'; font-size:14px; font-weight:400; content:' บาท'; color:#666;}
section .item-content .price > .initial { display:inline-block;}
section .item-content .price > .discount { display:none;}
/* Discount */
section .item-content .price.promo > .initial { display:inline-block; margin-right:10px; color:#aaa; font-weight:300; font-size:14px; position: relative;}
section .item-content .price.promo > .initial:before { position: absolute; content: ""; left: -3px; top: 50%; right: -3px; border-top: 1px solid; border-color: inherit; transform: rotate(-10deg);}
section .item-content .price.promo > .discount { display:inline-block; color:#e60024; font-size:18px;}

section .item-content a.btn-line { font-family:'Ubuntu','Pridi'; background-color:#00c300; color:#fff; text-shadow:none; font-size:14px; font-weight:400; box-shadow:0 0px 3px rgba(0,0,0,0.2) inset; border:1px solid rgba(0,0,0,0.1); padding:4px 8px;}
section .item-content a.btn-line:focus, section .item-content a.btn-line:active, section .item-content a.btn-line:active:hover, section .item-content a.btn-line:active:focus,
section .item-content a.btn-line:hover { background-color:#009600; color:#fff; border:1px solid rgba(0,0,0,0.3);}

@media (min-width: 992px) and (max-width: 1200px) { 
	section .item-grid-5 { width:25%;}
}
@media (min-width: 768px) and (max-width: 992px) {	
	section .item-grid-5 { width:33.3333333333333%;}
}
@media (max-width: 768px) {	 
	section .item-grid-5 { width:50%;}
	section .item-image .badge-size { bottom:0; right:2px; font-size:13px; font-weight:600; height:30px; width:30px; line-height:21px; padding:5px;}
	section .item-content .name { font-size:13px;}
	section .item-content .price { font-size:14px;}
	section .item-content .price:before { font-size:12px;}
	section .item-content .price:after { font-size:12px;}
}

/* Promotion */
section#promotion .item-image .badge-catalog { top:3px; right:3px; padding:10px 15px 8px; font-size:24px;}
section#promotion .item-image .badge-size { font-size:24px;}
section#promotion .item-content .name { font-size:24px;}

section#promotion .item-list { padding:0 10px;}
section#promotion .item-list .item-list-12 { padding:5px 0; width:100%; display: inline-block; border-bottom:1px dotted rgba(0,0,0,0.1);}
section#promotion .item-list .item-list-12:last-child { border-bottom:none;}
section#promotion .item-list .item-image { width:120px; float:left; margin-right:10px;}
section#promotion .item-list .item-image .badge-catalog { top:3px; right:3px; padding:3px 5px 2px; font-size:14px;}
section#promotion .item-list .item-image .badge-size { bottom:0px; right:-5px; padding:5px; font-size:14px;}
section#promotion .item-list .item-content { width: calc(100%); }
section#promotion .item-list .item-content .name { padding:0;}


/* Contact ----------------------------------------------------------------------------------------------------------------------------------------------- */
section#contact { font-family:'Ubuntu','Pridi'; font-size:14px; font-weight:300; color:rgba(255,255,255,0.6);}
section#contact address { font-family:'Ubuntu','Pridi'; font-size:18px; font-weight:300; margin:10px 0;}
section#contact hr { margin:10px 0; border-color:rgba(255,255,255,0.1);}
.alert-block { color:#ff4500;}


/* Footer ----------------------------------------------------------------------------------------------------------------------------------------------- */
footer { font-family:'Ubuntu','Pridi'; padding:20px 0 60px; background-color:#000; line-height:20px; font-size:12px;}
footer a { color:rgba(255,255,255,0.8);}
footer .fix-bottom { position:fixed; bottom:0; width:100%; display:inline-block; text-align:center; z-index:9999; padding:8px 0 0; height:50px; background-color:rgba(33,33,33,0.9); box-shadow:0 -1px 12px rgba(0,0,0,0.3);}
footer .fix-bottom a.btn { font-family:'Ubuntu','Pridi'; background-color:#00c300; color:#fff; text-shadow:none; font-size:16px; font-weight:400; box-shadow:0 0px 3px rgba(0,0,0,0.2) inset; border:1px solid rgba(0,0,0,0.1); padding:6px 15px;}
footer .fix-bottom a.btn:focus, footer .fix-bottom a.btn:active, footer .fix-bottom a.btn:active:hover, footer .fix-bottom a.btn:active:focus,
footer .fix-bottom a.btn:hover { background-color:#009600; color:#fff; border:1px solid rgba(0,0,0,0.3);}
@media (max-width: 768px) {	 
	footer .fix-bottom a.btn { font-size:14px;}
	footer .fix-bottom img { display:none;}
}