@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Charm:400,700&display=swap');

body{ margin: 0; padding: 0; background: #fff; font-family: 'Merriweather', serif;}
*:focus {outline: none !important;}
body::-webkit-scrollbar {width:6px;} 
body::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);}
body::-webkit-scrollbar-thumb { background-color: #aa681d;outline: 1px solid #aa681d;}
header{ background: rgba(255,255,255,0.8); padding: 10px 0; width: 100%; float: left; position: fixed; z-index: 5; height: 65px; display: -webkit-box;display: -webkit-flex;
display: -ms-flexbox; display: flex;-webkit-box-align: center;-webkit-align-items: center; -ms-flex-align: center;align-items: center;}
a{color: #000; text-decoration: none;}
.clear{ margin: 0; padding: 0; clear: both;}
.mobile-horizontal{ display: none;}
.desktop-horizontal{ display: block;}
.owl-item .item { object-fit: cover; height: 100vh;}
.owl-item .item img{ width: 100%;}
.logo{ text-align: center; position: absolute; left: 0; right:0;}
.logo img{ vertical-align: middle;}
section{ float: left; width: 100%;}
section .product-gallery{ float:left; width: 100%; }
section .product-gallery ul{ margin: 0; padding: 0;}
section .product-gallery ul li{/*display: flex;*/ float: left; width: 50%; outline: 1px solid #fff; position: relative; list-style: none; overflow: hidden; /*height: 1400px;*/object-fit: cover;}
.wrapmenu li:nth-child(3n){ margin-right: -33px;}
.wrapmenu li:nth-child(4n){ margin-left: 200px;}
.detail{ padding: 7px 10px; color: #000; background: #fff; display: none; width: 100px; text-align: center; text-decoration: none; margin: 0 auto; position: absolute;left: 0; right: 0; bottom: 40px; border-radius: 3px; font-weight: 300; text-transform: uppercase;}
section .product-gallery ul li img{ width: 100%; object-fit: fill; display: flex; height: 100%;}
section .product-gallery ul li:hover a .detail{ display: block;  }
.effect-ming { /*background: #000;*/}
.effect-ming img {opacity:1;-webkit-transition: opacity 0.35s;transition: opacity 0.35s;}
.effect-ming .detail-btn::before {position: absolute;top: 30px;right: 30px;bottom: 30px;left: 30px;border: 2px solid #fff;box-shadow: 0 0 0 30px rgba(255,255,255,0.2);content: '';opacity: 0;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: scale3d(1.4,1.4,1);transform: scale3d(1.4,1.4,1);}
.effect-ming:hover .detail-btn::before,
.effect-ming:hover .detail-btn {opacity: 1;-webkit-transform: scale3d(1,1,1);transform: scale3d(1,1,1);}
.needpopup-opened,
.needpopup-opened body {overflow: hidden;}
.needpopup-opened.needpopup-scrolled,
.needpopup-opened.needpopup-scrolled body {height: auto;}
.needpopup-opened.needpopup-scrolled body { position: fixed;width: 100%;}
.needpopup_wrapper {position: fixed;z-index: 999;top: 0;left: 0;visibility: hidden;overflow: auto;-webkit-box-sizing: border-box; box-sizing: border-box; width: 100%;height: 100%; padding: 40px 0;  -webkit-transition: opacity .3s ease; transition: opacity .3s ease; opacity: 0;background: #000;background: rgba(0, 0, 0, .8);}
.needpopup-opened .needpopup_wrapper {visibility: visible; opacity: 1;}
.needpopup-overflow .needpopup_wrapper { padding: 0;}
.needpopup {position: relative;z-index: 9999;top: 50%;left: 50%;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;max-width: 100%;-webkit-transform: scale(.1, .1);-ms-transform: scale(.1, .1);transform: scale(.1, .1);opacity: 0;background: #fff;width: 100% !important;float: left;}
.needpopup.opened {-webkit-transition: opacity .5s ease, -webkit-transform .5s ease; transition: opacity .5s ease, transform .5s ease;-webkit-transform: scale(1, 1);-ms-transform: scale(1, 1);transform: scale(1, 1);opacity: 1;}
.needpopup.stacked { top: 0 !important;margin-top: 0 !important;}
.needpopup-overflow .needpopup { left: 0;width: auto;margin-left: 0;}
.needpopup_remover { position: fixed; z-index: 9999;top: 30px;right: 30px;font-size: 40px;line-height: .5;color: #fff;text-decoration: none;}
.needpopup_remover:hover {color: #ccc;}
.needpopup_remover:before {content: '×';height: 25px;width: 25px;border-radius: 25px;border: 1px solid #aa681d;color: #aa681d;display: block;text-align: center;line-height: 23px;font-size: 24px;}
.needpopup .needpopup_remover {top: 50px;right: 50px;font-size: 20px;line-height: .5;color: #000;}
.needpopup .needpopup_remover:hover {color: #ccc;}
.effect-ming:hover .detail-btn {background-color: rgba(58,52,42,0); }
.effect-ming:hover img {opacity: 0.8;}
.product-details{ width:100%; float: left; background: #fff; padding: 50px 0;}
.product-details .left-imagepart{ width: 44%; float: left; text-align: center;}
.product-details .left-imagepart img{ width: 500px; height: 100%; object-fit: cover; -webkit-box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.2);
box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.2);     border: 1px solid #e4e4e4; margin-bottom: 30px; min-height: 600px;}
.product-details .right-imagepart{width: 50%; float: left; text-align: center;}
.product-details .right-imagepart .content-part{ display: inline-block; text-align: center; padding-top: 200px;}
.product-details .right-imagepart .content-part .p-name{ text-align: center; font-size:32px; font-weight: 700; padding-bottom: 40px; font-family: 'Charm', cursive;}
.product-details .right-imagepart .content-part .des{ text-align: center; line-height: 20px; font-size: 16px; padding-bottom: 40px; font-family: 'Charm', cursive;}
.product-details .right-imagepart .content-part .p-code{ text-align: center; font-size: 32px; font-weight: 700; padding-bottom: 40px; font-family: 'Charm', cursive;}
.product-details .right-imagepart .content-part .p-price{ text-align: center; font-size: 30px; font-weight: 700; padding-bottom: 40px; color: #aa681d;}
.product-details .right-imagepart .content-part .chat-btn{ border-radius: 3px; border: 1px solid #aa681d; color: #aa681d; background: #fff; display: inline-block; padding: 7px 20px; text-transform: uppercase;}
.product-details .right-imagepart .content-part .chat-btn .w-image{ display: inline-block; background-image: url(../images/w-image.png); background-size: 20px 20px; background-repeat: no-repeat; margin-right: 10px; height: 20px; width: 20px; vertical-align: middle;}
.product-details .right-imagepart .content-part .chat-btn .link-text{display: inline-block;vertical-align: middle; }
.wrapmenu { text-align: center; width: 100%;}
.wrapmenu ul {margin: 0;list-style: none;padding: 0;}
.wrapmenu li { display: inline-block;margin: 0 25px;}
.wrapmenu li a {font-size:17px;text-decoration: none;color: #aa681d;text-transform: capitalize;position: relative;}
.wrapmenu li a:before {content: "";position: absolute;z-index: -1; left: 51%;right: 51%;bottom: -7px; background: #aa681d; height: 3px;-webkit-transition-property: left, right;transition-property: left, right;-webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;}
.wrapmenu li a:hover:before, .wrapmenu li a:focus:before, .wrapmenu li a:active:before, .wrapmenu li a.active:before  {left: 0;right: 0;}
.gotop{ background-image: url(../images/top.png); background-size: 30px 20px; height: 24px; width: 24px; display: block; background-repeat: no-repeat; background-color: rgba(255,255,255,0.9); padding: 10px; border-radius: 24px; text-align: center; background-position: 50% 50%;}
.left-imagepart .owl-item .item{ height: auto;}
.w100per{ width: 100% !important;}
.mobile-slider{ display: none!important;}
.main{ background: rgba(255,255,255,0.8); margin: 135px auto 70px auto; width: 100%; max-width: 1200px;  padding: 20px;-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.1);box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.1); }
article{ font-size: 13px; color: #000; line-height: 22px;}
h1{ margin: 0; padding: 0;}
.hr{ width: 100%; float: left;  height: 1px; background: #e1e1e1; margin: 20px 0;}
h2{ font-size: 20px;padding:0 0 15px 0; margin: 0;}
.about-row{ float: left; width: 100%;}
.about-row .right-text{ float: left; width: auto; text-align: justify;}
.about-row .right-text .julie-img{ float: left; margin: 0 20px 20px 0;}
.title{ width: 100%; float: left; text-align: center; font-size: 28px; padding-bottom:40px;}
.inner-bg{ background-image: url(../images/inner-bg.jpg);	background-repeat: repeat; background-position: 0 0;}
footer{ background: rgba(255,255,255,0.8); text-align: center; width: 100%; padding: 5px 0 0px 0; position: fixed; bottom: 0;}
.store-img-row{ float: left; width: 100%; margin-bottom: 10px;}
.store-img-row img{ margin-bottom: 10px; width: 391px;}
.store-img-row img + img{ margin-left: 10px;}
footer a{ display: inline-block; margin: 0 7px;}
.contact-address{ float: left; width: 50%;}
.address-map{ float: left; width: 50%;}
.stockist{ float: left; width: 100%; margin-top: 30px;}
.stockist .title{ font-size: 28px; width: 100%; float: left; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #e9e9e9; text-align: left;}
.stockist .city-title{ float: left; width: 500px; font-size: 20px; font-weight: 500; margin-bottom: 15px; padding: 10px 0 10px 10px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ededed+0,ffffff+100&1+0,0+100 */
background: -moz-linear-gradient(left, rgba(237,237,237,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(237,237,237,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(237,237,237,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */}
.stockist .address-box{ padding: 10px; float: left; width:300px; -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.1);box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.1); margin-bottom: 15px; border: 1px solid #e9e9e9; min-height: 140px; margin-bottom: 20px;}
.stockist .address-box + .address-box{ margin-left: 20px;}
.stockist .store-name{ font-size: 18px; padding-bottom: 10px; display: inline-block;}
.stockist .city-box{ float: left; width: 100%; margin-bottom: 20px; padding-bottom: 10px;border-bottom: 1px solid #e9e9e9;}



@media only screen and (max-width:1000px) {
	.logo img { width: 45px;}
	 header{height: 30px;}
	section .product-gallery ul li{ width: 100%; height: 100%;}
	.product-details{ padding: 20px 0 10px 0;}
	.product-details .left-imagepart{ width: 100%;}
	.product-details .right-imagepart{width: 100%;}
	.product-details .left-imagepart img{ width: 90%; box-shadow: inherit; margin-bottom: 10px; height: auto; min-height: 300px;}
	.product-details .right-imagepart .content-part{ padding: 10px;}
	.product-details .right-imagepart .content-part .p-name{ font-size: 16px; padding-bottom: 25px;}
	.product-details .right-imagepart .content-part .p-code{padding-bottom: 20px; font-size: 20px;}
	.needpopup .needpopup_remover{top: 7px;right: 7px; background: #fff; border-radius: 30px;}
	.product-details .right-imagepart .content-part .p-price{    padding-bottom: 20px;     font-size: 28px;}
	.desktop-slider{ display: none !important;}
	.mobile-slider{ display: block!important;}
	.mobile-slider .owl-item .item img{ height: 100%; object-fit: cover;}
	.main{margin: 65px auto 50px auto; padding: 2%;width: 92%; font-size: 12px;}	
	.title{padding-bottom: 15px;padding-top: 15px; font-size: 24px;}
	.about-row .right-text .julie-img{ margin: 0 0 20px 0; float: inherit; text-align: center; display: block;     width: 100%;}
	.store-img-row img + img{ margin-left: 0;}
	.store-img-row img { margin-bottom: 10px; width: 100%;}
	.mobile-horizontal{ display: block;}
.desktop-horizontal{ display: none;}
	.contact-address{ width: 100%; margin-bottom: 10px;}
	.address-map{ width: 100%;}
	.stockist{ margin-top: 15px;}
	.stockist .title{ font-size:24px ;}
	.stockist .city-title{ font-size: 18px; width: 100%;}
	.stockist .store-name{ font-size: 16px;}
	.stockist .address-box{ padding: 2%; width: 96%; margin-bottom: 10px;}
	.stockist .address-box + .address-box{ margin-left: 0px;}
	.stockist .city-box{margin-bottom: 10px;padding-bottom: 5px;}
}