@charset "UTF-8";
html {
	font-size: 62.5%;
}
body {
	font-family: 'Raleway', "Heiti TC", "微軟正黑體", "Microsoft JhengHei", sans-serif;
	transition: background-color .5s;
	background: #fff;
	color: #000000;
	direction: ltr;
	font-size: 1.0em;
	padding: 0;
	margin: 0;
	-webkit-text-size-adjust: none;
	word-wrap: break-word;
	width: 100%;
	height: 100%;
	font-weight: 300;
}
form, input, select, textarea {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, 'Raleway', "Heiti TC", "微軟正黑體", "Microsoft JhengHei", sans-serif;
	color: #343434;
}
textarea, input {
	font-size: 1em
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
aside, blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
img {
	border: 0;
	-ms-interpolation-mode: bicubic;
	display: block;
}
aside, figure, figcaption, p, ul, ol, li, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}
a {
	text-decoration: none;
	color: #000;
	-webkit-tap-highlight-color: rgba(255,255,255,0);
}
li {
	-webkit-tap-highlight-color: rgba(255,255,255,0);
}
textarea {
	resize: none
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
 color:    #b9bbbf;
 font-size:12px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
 color:    #b9bbbf;
 opacity:  1;
 font-size:12px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
 color:    #b9bbbf;
 opacity:  1;
 font-size:12px;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color:    #b9bbbf;
 font-size:12px;
}
.sidenav {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: #ffefaa;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 15px;
	text-transform: uppercase;
}
.sidenav a {
	padding: 5px 20px 5px 20px;
	text-decoration: none;
	font-size: 15px;
	color: #FFF;
	display: block;
	transition: 0.3s;
}
.sidenav img {
	display: inline;
	vertical-align: bottom;
	width: 21px;
	height: 21px;
	padding-right: 10px;
}
.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 50px;
	font-weight: 300;
	margin-top:  20px;
}
.sidenav ul {
	list-style: none;
	width: 100%;
}
.sidenav ul li {
	color: #683d08;
	border-bottom: dotted #FFFFFF;
	padding-bottom: 5px;
	border-width: 2px;
}
.sidenav ul li.switch {
	color: #FFF;
	padding: 8px 8px 8px 20px;
	text-decoration: none;
	font-size: 20px;
	transition: 0.3s;
	background-color: #e93552;
	width: 160px;
	border: none;
	font-size: 15px;
	margin-bottom: 16px;
}
.sidenav ul li.new {
	color: #e93552;
}
.sidenav hr {
	margin: 15px 15px 8px 20px;
	border: none;
	height: 1px;
	/* Set the hr color */
	color: #FFF; /* old IE */
	background-color: #FFF; /* Modern Browsers */
}
#container {
	width: 100%;
	position: relative;
	transition: margin-left .5s;
	overflow: hidden;
	padding-bottom: 50px;
}
#top {
	width: 100%;
	position: relative;
	line-height: 30px;
}
#nav-bt {
	cursor: pointer;
	color: #FFFFFF;
	position: relative;
	display: inline-block;
	vertical-align: top;
	height: 30px;
}
#nav-bt img {
	padding: 5px 5px 5px 10px;
}
#search {
	width: calc(100% - 170px);
	padding: 2px 15px 0 9px;
	display: inline-block;
	border: #e6e6e6 thin solid;
	position: relative;
	vertical-align: top;
	height: 30px;
}
#ico-cart, #ico-member {
	display: inline-block;
	padding: 3px 0 3px 5px;
	vertical-align: top;
	height: 30px;
}
#ico-cart img, #ico-member img {
	width: 30px;
	height: 30px;
}
.add-bt {
	background-color: #3a93e9;
	position: relative;
	padding: 8px 15px;
	color: #FFF;
	text-align: center;
	margin: 10px 10px 10px 0;
	display:inline-block
}
.add-bt a {
	color: #FFFFFF;
}

.download-bt { 
	position: relative;
	padding: 8px 15px;
	color: #92734d;
	text-align: center;
	margin: 10px 10px 10px 0;
	display:inline-block;
	border: solid medium #92734d;
}
.download-bt a {
	color: #3a93e9;
}

.add-bt-grey {
	background-color: #999;
	position: relative;
	padding: 8px 15px;
	float: left;
 
	text-align: center;
	margin: 10px 10px 10px 0;
	color: #FFF
}
 

.searchtextinput {
	border-width: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	outline: none;
	font-size: 1.5em;
	display: inline;
	background: url(../images/share/ico-search.png) no-repeat left;
	padding-left: 30px;
	height: 23px;
}
#apply {
	position: relative;
	width: calc(100% - 26%);
	padding: 3px 0;
	float: left;
	border: solid thin #f1f1f1;
	margin: 10px 0;
}
#vouchertextinput {
	border-width: 0;
	padding: 0;
	margin: 0;
	outline: none;
	font-size: 1.5em;
	display: inline;
	height: 23px;
	margin-left: 10px;
}
#voucher-bt {
	background-color: #3a93e9;
	color: #FFFFFF;
	position: relative;
	width: 25%;
	padding: 8px 0;
	float: left;
	color: #FFF;
	text-align: center;
	margin: 10px 0;
}
#search-bg {
	max-width: 100%;
	background-color: #ffe283;
	height: 40px;
}
.slide_wrapper {
	width: 50%;
	margin: 0 auto;
	float:left;
}
.story {
	width: 50%;
	margin: 0 auto; 
}
#slide {
	max-width: 100%;
	float: left;
	margin-top: 10px;
}
#slide img {
	width: 100%;
	height: auto;
}
#categories {
	padding-top: 10px;
}
.cat-item {
	float: left;
	width: 25%;
}
.circular {
	width: 75px;
	height: 75px;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	background-position: center;
	border: thin solid #e6e6e6;
	position: relative;
	margin: 0 auto;
}
.pdtitle {
	width: 90px;
	text-align: center;
	margin: 0 auto;
	font-size: 1.2em;
	font-family: Helvetica, Arial, sans-serif;
}
#categories2 {
	padding: 10px 10px 10px 20px;
}
#categories2 .cat-item2 {
	float: left;
	width: 75px;
	height: 160px;
	display: block;
}
.circular2 {
	width: 60px;
	height: 60px;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	background-position: center;
	border: thin solid #e6e6e6;
	position: relative;
	margin: 0 auto;
}
.pdtitle2 {
	width: 60px;
	text-align: center;
	margin: 0 auto;
	font-size: 0.5em;
}
.sidenav #categories2 a {
	color: #FFF;
	display: block;
	padding: 0px;
	font-size: 9px;
}
#special-txt {
	 width: calc(50%   - 52px );
	padding:25px 15px;
	font-family: Helvetica, Arial, sans-serif;
	float:left; 
	margin:10px;
	display: inline-block;
	border-top: thin solid #f5f5f5;
	 
	}
#special-txt p{
	 line-height:20px;
	} 
	
 #premium-txt {
	 width: calc(50%   - 50px );
	padding:25px 15px;
	font-family: Helvetica, Arial, sans-serif;
	float:left;
	background-color:#f5f5f5;
	margin:10px;
	display: inline-block;
	font-size:1.3em;
	 
	}
#premium-txt p{
	 line-height:20px;
	}
#premium-txt h2{
	 line-height:25px;
	} 
#premium-txt a{
	color:#3a93e9;
	} 
	
#term {
	 width: calc(50%   - 82px );
	padding:25px 15px;
	margin:10px;
	font-family: Helvetica, Arial, sans-serif;
	line-height:18px;
	color:#767676;
	display: inline-block;
	border-top: thin solid #f5f5f5;
	}

 #specialoffer {
	 width:50%;
	 position:relative;
	 float:right;
	 }
	 
#specialoffer .sitem  {
	margin: 10px 10px 20px 10px;
	position: relative;
	width: 46%;
	display: inline-block;
}

#product_cat .sitem {
	margin: 10px 10px 20px 10px;
	position: relative;
	width: 23%;
	display: inline-block;
}

#specialoffer .sitem img, #product_cat .sitem img {
	width: 100%;
	height: auto;
	position: relative;
	z-index: 88;
}
#specialoffer .sitem .label, #product_cat .sitem .label {
	text-align: center;
	color: #fff;
	font-size: 1.5em;
	text-transform: uppercase;
	padding: 15px 0;
	position: absolute;
	z-index: 99;
	top: -1px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	width: 170px;
	font-weight: 300;
	color: #683d08;
	background-color: #FFFFFF;
}
#topseller {
	padding-top: 10px;
	margin-left: 10px;
	position: relative;
	overflow: hidden
}
#pd-list {
	position: absolute;
	left: 10px;
	top: 12px;
}
#pd-list2 {
	position: absolute;
	left: 10px;
	top: 6px;
}

#topseller h2 {
	float: left;
}
 #topseller .more {
	display: inline;
	white-space: nowrap;
	text-transform: uppercase;
	font-size: 1.3em;
	position: absolute;
	right: 0px;
	margin-top: -5px;
}
.more img {
	vertical-align: middle;
	display: inline-block;
	padding: 5px;
	width: 10px;
	height: 18px;
}

.topseller-item {
	float: left;
	padding: 10px 5px 10px 10px;
	margin-top: 10px;
	width: 45%;
	font-family: Helvetica, Arial, sans-serif;
}
.topseller-item span {
	color: #ff0000;
	font-size: 1.5em;
	width: 100%;
	text-align: center;
	float: left;
}
.topseller-item .pic {
	border: solid thin #f1f1f1;
	position: relative;
}
.topseller-item .pic img {
	width: 100%;
	height: auto;
	position: relative;
	z-index: 88;
}
.topseller-item h2 {
	padding: 5px 0 0 10px;
	font-weight: 400;
	text-align: center;
}
.topseller-item .label {
	text-align: center;
	color: #fff;
	font-size: 1em;
	text-transform: uppercase;
	padding: 5px 15px;
	width: auto;
	position: absolute;
	z-index: 99;
	bottom: 0px;
}
.topseller-item .red {
	background-color: #ba201c;
}
.topseller-item .gold {
	background-color: #d5b937;
}
#logo {
	width: 30%;
	padding: 10px;
	margin: 0 auto;
}
#logo img {
	width: 90%;
	height: auto;
	text-align: center;
	margin: 0 auto;
}
#footer {
	width: 100%;
 
	padding: 20px 0 ;
	z-index: 999; 
}
#footer-icon {
	width: 100%;
	border-top: thin solid #f1f1f1;
	padding: 8px 0;
	z-index: 999;
	background-color: #fff;
	font-family: Helvetica, Arial, sans-serif;
	color: #767676;
	 
}
#footer-icon a {
	text-decoration: underline;
	color: #767676;
}
#footer ul, #footer-icon ul {

	display: table;
	margin:0 auto;
}
#footer ul li {
	list-style: none;
	padding: 10px 15px 10px 0px;
	color: #683d08;
	border-right: dotted #e4ca5b;
	border-width: 2px;
	margin:  10px;
	float:left;
	width: 130px;
	text-align:center; 
}
#footer .right{
 
	border:none;
 
}

#footer-icon  {
	 
	margin:0 auto;
	}

#footer-icon ul li {
	list-style: none;
	padding: 5px 20px;
	text-align: center;
	float:left;
 
 
	
}
#footer-icon img {
	position: relative;
	height: auto;
	text-align: center;
	margin: 0 auto;
	padding: 10px 0;
}
#footer span {
	position: absolute;
	width: 15%;
	text-align: center;
	font-size: 1.3em;
}
#footer a {
	color: #818181;
	font-size: 17px;
}
#footer-item {
	width: 100%;
	height: 35px;
	background-color: #3a93e9;
	font-size: 1.2em;
	overflow: auto;
	color: #fff;
}
#footer-login {
	width: 100%;
	height: 40px;
	background-color: #3a93e9;
	font-size: 1.5em;
	overflow: auto;
	color: #fff;
	z-index: 999;
	position: fixed;
	bottom: 0;
	left: 0;
}
#footer-item img, #footer-login img {
	width: 10px;
	height: 17px;
	display: inline-block;
	vertical-align: middle;
	padding: 0 10px;
}
#footer-item a, #footer-login a {
	display: inline-block;
	vertical-align: middle;
	color: #fff;
}
#footer-item ul, #footer-login ul {
	width: 100%;
	list-style: none;
}
#footer-item ul li, #footer-login ul li {
	float: left;
}
#pre {
	text-align: left;
	padding: 10px 0 0 0;
	width: 55%;
}
#pre2 {
	text-align: left;
	width: 50%;
	background: #7e7e7e;
}
#pre2 a {
	padding: 11px 11px 11px 15px;
}
#next {
	text-align: right;
	padding: 10px 0 0 0;
	width: 45%;
}
#next2 {
	text-align: right;
	padding: 10px 0 0 0;
	width: 50%;
}
.qty {
	display:inline-block
}
.qty select {
	width: 60px;
	text-align: right;
	padding: 5px 0;
	font-size: 1.2em;
	margin-top: 10px;
	margin-right: 10px;
}
.qty .select2 {
	width:45px;
	text-align: right;
	font-size: 1.2em;
	padding: 2px 0;
	margin-bottom: 3px;
	margin-left:5px
	
}
#footer-checkout {
	width: 100%;
	z-index: 999;
	position: fixed;
	bottom: 0;
	left: 0;
	height: 23px;
	font-size: 1.8em;
	text-align: center;
	background-color: #3a93e9;
	color: #fff;
	padding: 10px 0;
}
/* Popup start here */
#mask {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9000;
	background-color: #000;
	display: none;
}
#popup .window {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 200px;
	display: none;
	z-index: 9999;
	padding: 0;
	margin: 0;
}
#popup #dialog {
	width: 100%;
	height: auto;
	background-color: #ffd40d;
	font-size: 1.6em;
	color: #784c00;
	padding-top: 10px;
}
#popup #dialog p {
	padding: 0px 20px 20px 20px;
}
#popup #dialog .close {
	float: right;
	padding: 10px 20px;
}
#popup #dialog .close img {
	width: 25px;
	height: 25px;
}
#popup #shopnow {
	background-color: #3a93e9;
	float: left;
	margin: 0 20px 20px 20px;
}
#popup #shopnow a {
	color: #fff;
	font-size: 0.8em;
}
/* Popup end here */

 


#cattitle {
	border-top: #f0eef1 thin solid;
	margin-top: 10px;
	margin-bottom: -8px;
	width: 100%;
	text-align: center;
	
}
#cattitle h2  {
	font-weight: 300;
	padding: 10px;
}
 #catlist {
	float:left;
	width: 50%;
	margin:5px 0 0 0;}

 #catlist ul{
	float:left;
	width: 100% }

  #catlist ul li {
	float: left;
	list-style: none;
 
	text-align: center;

	flex-wrap: wrap;
	display: inline-block;
	flex-grow: 1;
    width: calc(100% * (1/3) - 10px - 1px);
	padding: 5px 0;
	max-width: 400px;
	position: relative;
	z-index: 88;
}

#catlist ul li a {
	display: block;
	text-decoration: none;
}
#catlist ul li img {
	width: 80%;
	height: auto;
	position: relative;
	margin: 0 auto;
}

#catlist2 {
	float:left;
	width: calc(100%  - 10px);
	margin:5px 0 0 10px;}

#catlist2 ul  {
	display: flex;
	flex-wrap: wrap;
	margin: 5px 0 0 -10px;
	border-left: #f0eef1 thin solid;
	border-top: #f0eef1 thin solid;
}
#catlist2 ul li {
	float: left;
	list-style: none;
	border-right: #f0eef1 thin solid;
	border-bottom: #f0eef1 thin solid;
	text-align: center;

	flex-wrap: wrap;
	display: inline-block;
	flex-grow: 1;
    width: calc(100% * (1/8) - 10px - 1px);
	padding: 5px 0;
	max-width: 400px;
		position: relative;
	z-index: 88;
}

 
#catlist2 ul li a {
	display: block;
	text-decoration: none;
}
#catlist2 ul li img {
	width: 80%;
	height: auto;
	position: relative;
	margin: 0 auto;
}


#history {
	float:left;
	width: calc(100%  - 10px);
	margin:5px 0 0 10px;}

#history ul  {
	display: flex;
	flex-wrap: wrap;
	margin: 5px 0 0 -10px;
	border-left: #f0eef1 thin solid;
	border-top: #f0eef1 thin solid;
}
#history ul li {
	float: left;
	list-style: none;
	border-right: #f0eef1 thin solid;
	border-bottom: #f0eef1 thin solid; 

	flex-wrap: wrap;
	display: inline-block;
	flex-grow: 1;
    width: calc(100% * (1/3) - 30px - 1px);
	padding: 15px ;
	font-size:1.2em;

}

#history ul li p{
	line-height:16px;
	padding:5px 0;
 

}
#history ul li h3{
	line-height:20px;
 

}
#sorting a {
	font-size: 1.3em;
}
#sorting {
	width: calc(100%-10px);
	padding: 5px;
	font-family: Helvetica, Arial, sans-serif;
}
#sorting ul {
	width: 100%;
}
#sorting li {
	float: left;
	list-style: none;
	text-align: center;
	margin: 0 auto;
}
#sorting li a {
	color: #565656;
}
#sorting li img {
	vertical-align: middle;
	display: inline-block;
	width: 21px;
	height: 21px;
	padding-right: 3px;
}
#pd-list-cat {
	width: calc(100% - 40px);
	background-color: #FFFFFF;
	margin-bottom: 10px;
	padding: 5px 9px;
	margin-left: 10px;
	margin-top: 10px;
	border: #cfcfcf thin solid;
}
.ddlist {
}
.ddlist select {
	border: 0 !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: url(../images/share/ar3.png) no-repeat left;
	width: 100%;
	text-indent: 0.01px;
	text-overflow: "";
	cursor: pointer;
	padding-left: 25px;
}
.ddlist select option {
	text-align: right;
	padding-left: 20px;
}
#pd {
	width: 100%;
}
#pd ul {
	width: 100%;
	display: flex
}
#pd ul li {
	list-style: none;
	float: left;
	display: block
}
#large-pic {
	text-align: center;
	width: 100%;
}
#large-pic img {
	width: 80%;
	height: auto;
	display: inline-block;
	margin:0 auto;
}
#detail {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.3em;
	background-color: #f5f5f5;
	padding: 30px ;
	width: calc(40%   - 60px );
 
}
.detail2{
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.3em;
	background-color: #f5f5f5;
	padding: 30px ;
	width: calc(100%   - 60px );
	margin-bottom:10px;
	float:left;
 
}
#detail p, .detail2 p {
	padding-bottom: 10px;
	line-height: 20px;
}
 
 
.red {
	color: #FF0000
}
.blue {
	color: #3a93e9;
}
.gold {
	color: #92734d
	}
.grey {
	color:#999
	}
.underline {
	text-decoration:underline;}
#desc {
	padding: 10px 15px;
	font-family: Helvetica, Arial, sans-serif;
}
.selected {
	border-bottom: #ffd40d 3px solid;
}
#inner-title {
	width: 100%;
	border-bottom: #f0eef1 thin solid;
	padding: 13px 0;
	text-align: center;
	font-size: 1.4em;
	overflow: auto;
}
#cart {
	width: 50%;
	float: left; 
}
.cart-list {
	font-family: Helvetica, Arial, sans-serif;
	width: 95%;
	position: relative;
	border-bottom: #f0eef1 thin solid;
	margin-left: 10px;
	display:inline-block;
	float: left;
	line-height:22px;
	font-size:1.2em;
	 
}
.cart-list ul {
	list-style: none;
}
.cart-list ul li {
	float: left;
}
.cart-list-1 {
	width: 28%;
	padding:15px 0;
}
.cart-list-1 img {
	width: 100%;
	height: auto;
}
.cart-list-2 {
 
	width: 40%;
	padding:15px 5px 0 5px;
 
 
 
}
.cart-list-3 {
	 
	width: 18%;
	padding:15px 5px;
 
	color: #FF0000;
}
.cart-list-4 {
	 
	width: 5%;
	 
	 
	padding:25px 0 15px 5px;
 
}
.cart-list-4 img {
	width: 20px;
	height: 20px;
}
#order {
	font-family: Helvetica, Arial, sans-serif;
	width: 45%;
	padding-bottom: 10px;
	float: left;
	font-size:1.2em;
	
}
#order h2 {
	padding: 15px 0;
}
#order .order-left {
	position: relative;
	width: 80%;
	padding: 5px 0;
	float: left;
}
#order .order-right {
	position: relative;
	width: 20%;
	padding: 5px 0;
	float: left;
	color: #FF0000;
	text-align: right;
}
 
#order2 {
	font-family: Helvetica, Arial, sans-serif;
	width: 50%;
	padding-bottom: 10px;
	float: left;
	padding:10px;
	font-size:1.2em;
	
}
#order2 h3 {
	padding: 15px 0;
}
#order2 .order-left {
	position: relative;
	width: 15%;
	padding: 10px 0 0 0;
	float: left;
}
#order2 .order-right {
	position: relative;
	width: 80%;
	padding: 10px 0 5px 0 ;
	float: left;
	color: #3a93e9;
	text-align: left;
}
#order2 .order-right2 {
	position: relative;
	width: 80%;
	padding: 5px 0;
	float: left;
 
	text-align: left;
}
#order2-img {
	padding:20px;
	width: 45%;
	float: right;
}

#order2  div select {
	border: solid thin #f1f1f1;
	width: 92%;
	margin-bottom: 0.5em;
	padding: 5px 3px;
}
#order2  .input {
	border: solid thin #f1f1f1;
	width: 90%;
	margin-bottom: 0.3em;
	padding: 5px 6px;
	display: inline-block
}
 
 
input[type="radio"] {
 
	vertical-align: middle;
	margin:5px 0;
}
label {
	padding-right: 5px;
}
#order-term {
	width: 48%;
	border-top: #f0eef1 thin solid;
	padding: 20px 10px;
	font-size: 1.3em;
	color: #3a93e9;
	float:left;
}
#order-term p {
	padding-bottom: 10px;
}

#stories {}

#stories ul{
	padding-right:10px;
	 
	}
#stories ul li{
	 width: calc(100% * (1/3) - 10px - 1px);
	list-style:none;
	padding:10px 0 0 10px;
	float:left;
	z-index:1;
	position:relative;
	text-align: center;
 
	}
#stories ul li img{
	width:100%;
	height:auto;
	
 
 
	 
	}
#stories ul li p  {
	text-align: center;
	color: #fff;
	font-size: 1.8em;
	text-transform: uppercase;
	padding: 12px 30px;
	position:absolute; 
	z-index:2; 
	font-weight: 300;
	color: #683d08;
	background-color: #FFFFFF;
	width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;  
  left: 50%; 
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); 
  top:30px;
}
#stories  .ico-play  {
		position: absolute;
	z-index: 99; 
	left: 0;
	right: 0;
	margin:35% auto; 
		width:25%;
	height:25%;
}

 
	
#stories2 {}

#stories2 ul{
	padding-right:10px;}
#stories2 ul li{
	 width: calc(100% * (1/2) - 10px - 1px);
	list-style:none;
	padding:10px 0 0 10px;
	float:left;
	position: relative;
	z-index: 88;
	}
#stories2 ul li img{
	width:100%;
	height:auto;}

#stories2 ul li .label {
	text-align: center;
	color: #000;
	font-size: 1em;
	text-transform: uppercase;
	padding: 5px 15px;
	width: auto;
	position: absolute;
	z-index: 99;
	top: 5px;
	background-color:#FFF
} 

#billing {
	padding: 10px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif
}
#billing div div {
	font-size: 1.2em;
	line-height: 1.5em;
}
#billing p { padding-top:10px;}
#billing  div label, #billing  div.shipping span{ width:97%;   display:inline-block;}
#billing  div.shipping label{ width:auto; padding:0 10px 5px 0px; 	vertical-align: top;}
 #billing  div.shipping input[type="radio"]{ width:20px; padding:15px 10px 0 5px; margin-top:2px; 	 	vertical-align: top;}
#billing div.shipping input{ width:auto; border:0;}
#billing div div strong {
	color: #FF0004;
}
#billing .left2 {
	width: calc(50% - 20px );
	float: left;
	padding-right:20px;
		border-bottom: solid thin #f1f1f1;
}
#billing .contact img{
	width: 100%;
	height:auto;
}

#billing .left2 ul li{
	list-style:none;}

#billing .left {
	width: 50%;
	float: left;
}
#billing .right {
	width: 50%;
	float: right;
}
#billing .right-img {
	width: 50%;
	float: right;
}
#billing div input {
	border: solid thin #f1f1f1;
	width: 95%;
	margin-bottom: 1em;
	padding: 5px 3px;
	display: inline-block
}
#billing div input[type="radio"] {
	margin-top: -1px;
	vertical-align: middle; 
	width: 20px;
	display: inline-block

}
#billing div.textarea {
	float: left;
	width: 100%;
	margin-bottom: 20px;
}
#billing div.textarea label {
	width: 99%;
	display: inline-block;
}
#billing div.textarea textarea {
	border: solid thin #f1f1f1;
	width: 96%;
	height: 10em;
}
#billing div select {
	border: solid thin #f1f1f1;
	width: 96%;
	margin-bottom: 1em;
	padding: 5px 3px;
}
 
#billing div.title {
	padding: 20px 0 10px 0;
}

#vip{
	padding: 10px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif
}
#vip ul  {
	display: flex;
	flex-wrap: wrap;
	margin: 5px 0 0  0;
 
}
#vip ul li {
	float: left;
	list-style: none;
	text-align: center;
	display: inline-block;
	flex-grow: 1;
    width: calc(100% * (1/2) - 10px - 1px);
	padding: 5px 0; 
}
#vip ul li img{
	width:100%;
	height:auto;
	}
#back-to-home {
	font-family: Helvetica, Arial, sans-serif;
	width: 100%;
	line-height: 28px;
	background: #f5f5f5;
	border-bottom: #e9ebec thin solid;
	margin-bottom: 10px;
	padding-left: 15px;
	text-decoration: none;
	font-size:1.2em;
}
#back-to-home img {
	vertical-align: middle;
	display: inline-block;
	padding: 4px 5px;
	width: 10px;
	height: 18px;
}
#back-to-home span {
	vertical-align: middle;
	display: inline-block;
	font-weight: 300;
	padding-left: 10px;
	color: #7d572a; 
}
#back-to-top {
	position: fixed;
	bottom: 50px;
	right: 20px;
	z-index: 9999;
	width: 32px;
	height: 32px;
	text-align: center;
	line-height: 30px;
	background: #fff;
	color: #7d572a;
	cursor: pointer;
	border: #e9ebec thin solid;
	border-radius: 2px;
	text-decoration: none;
	transition: opacity 0.2s ease-out;
	opacity: 0;
}
#back-to-top:hover {
	color: #7d572a;
	background: #fff;
}
#back-to-top.show {
	opacity: 1;
}
#confirm_txt {
	width: 100%;
	border-top: #e9ebec thin solid;
	padding-top: 25px;
	text-transform: uppercase;
	text-align: center;
	font-size: 1.3em;
	margin-top:25px;
}
.videoWrapper {
	position: relative;
	padding-bottom: 31%; /* 16:9 */
	padding-top: 73px;
	margin:10px 10px 30px 10px;
 
 width: calc(50% - 40px);
	float:left;
}
.videoWrapper iframe {
 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.videoWrapper2 {
	position: relative;
	padding-bottom: 31%; /* 16:9 */
	padding-top: 73px;
	margin:10px 10px 30px 10px;
 
 width: calc(100% - 40px);
	float:left;
}
.videoWrapper2 iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#footer-premium {
	width: calc(50% - 40px);
 
	font-size: 1.8em;
	text-align: center;
	background-color: #3a93e9;
	color: #fff;
	padding: 15px 10px  ;
	margin: 10px; 
	display: inline-block
	}

#footer-premium select{
 
	padding: 5px 0;
	font-size: 0.9em;
	margin:10px  5px 15px  5px; 
	}

#footer-premium a{
	color:#FFFFFF;
	border:thin solid #FFF;
	padding:5px 10px
	}
#footer-tailormade {
	width: calc(50% - 40px);
 
	font-size: 1.8em;
	text-align: center;
	background-color: #3a93e9;
	color: #fff;
	padding: 15px 10px  ;
	margin: 10px; 
	display: inline-block
	} 
#footer-tailormade a{
	color:#FFFFFF;
	 
	padding:5px 10px
	}
#icon {
 
	 width: calc(50%  - 20px  );
	 padding:10px;
	float:left;
}
 

#icon ul  {
	display: flex;
	flex-wrap: wrap;
	margin: 5px 0 0  0;
 
}
#icon ul li {
	float: left;
	list-style: none;
	text-align: center;
	display: inline-block;
	flex-grow: 1;
    width: calc(100% * (1/6) - 10px - 1px);
	padding: 5px 0; 
}

 
 
#icon ul   li   img {
	width: 100%;
	height: auto;
	position: relative;
	margin: 0 auto;
}
#icon2 {
	display:none;}
#tagline {
	text-align:center;
	}	

#tagline h1
	 { font-size: 250%;
	 font-weight:300;}	
#tagline img{
	margin:0 auto;
	}	
#news{
	width:50%;
	margin: 10px auto;
	float:left;
	}
#news img{
	width:100%;
	height:auto;}
	
	
#company {
	font-size:15px;}
	
#friends {
	padding: 10px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:15px;
}
.friends_list{
	width:48%;
	float:left;
		padding-top:100px;
		border-bottom: solid thin #f1f1f1;
		margin-left:10px;
	}
 
.friends_list h2{
	color:#e93552;}
 
.friends_img{
	width:30%;
	float:left;
	margin-top:-100px;
	padding-bottom:10px;
	}
.friends_img img{
	width:90%;

	}
#filters {
	margin:1%;
	padding:0;
	list-style:none;
	font-size:1.3em;
}

	#filters li {
		float:left;
	}
	
	#filters li span {
		display: block;
		padding:5px 20px;		
		text-decoration:none;
		color:#666;
		cursor: pointer;
	}
	
	#filters li span.active {
		background: #e93552;
		color:#fff;
	}
 

 
#portfoliolist .portfolio {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	width:23%;
	margin:1%;
	display:none;
	float:left;
	overflow:hidden;
}

	.portfolio-wrapper {
		overflow:hidden;
		position: relative !important;
		background: #666;
		cursor:pointer;
		border: #f0eef1 thin solid;
		font-size:1.3em;
	}

	.portfolio img {
		max-width:100%;
		position: relative;
		top:0;
    -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition:         all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);		
	}
	
	.portfolio .label {
		position: absolute;
		width: 100%;
		height:40px;
		bottom:-40px;
    -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition:         all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
	}

		.portfolio .label-bg {
			background: #e93552;
			width: 100%;
			height:100%;
			position: absolute;
			top:0;
			left:0;
		}
	
		.portfolio .label-text {
			color:#fff;
			position: relative;
			z-index:500;
			padding:5px 8px;
		}
		.portfolio .label-text a{
			color:#fff;
		 
		}
			
			.portfolio .text-category {
				display:block;
				font-size:9px;
			}
	
	.portfolio:hover .label {
    bottom:0;
  }
	.portfolio:hover img {
    top:-30px;
  }  
#hongkong2 { }

@media screen and (max-width: 1024px) {
	 #catlist ul li {
 
    width: calc(100%  - 5px - 1px);
 
}
.sidenav {
	padding-top: 15px;
}
.sidenav a {
	font-size: 18px;
}
#logo {
	width: 95%;
	padding: 10px;
}
 
#specialoffer   {
	width: 95%;
	margin:0px;
}
 
 
#footer ul li {
 
	width: 80px;
 	padding: 10px 15px 10px 0;
}
.slide_wrapper {
	width: 100%;
}
#catlist {
 
	width:100%;
	margin:5px 0 0 0;}

#catlist2 ul li {

    width: calc(100% * (1/4) - 10px - 1px);
}	
#special-txt, #premium-txt  {
	 width: calc(100%   - 30px );
	 margin:10px 0;
	 border:none; 
	 
	 
	}
#footer-premium {
		width: 100%;
		padding:15px 0 15px 5px;
	font-size: 1.5em;
	text-align: center;
	background-color: #3a93e9;
	color: #fff;
	margin:0;
	}
#term {
	 width: calc(100%   - 40px );
	 padding:30px 10px;
	 margin:0px 5px;
	 border:none;
 
	}
 
#icon {
	display:none;
}

#icon2 {
	 width: calc(100%  - 20px  );
	float:left;
	display:block;
	padding:10px
}
 

#icon2 ul  {
	display: flex;
	flex-wrap: wrap;
	margin: 5px 0 0  0;
 
}
#icon2 ul li {
	float: left;
	list-style: none;
	text-align: center;
	display: inline-block;
	flex-grow: 1;
    width: calc(100% * (1/6) - 10px - 1px);
	padding: 5px 0; 
}

 
 
#icon2 ul   li   img {
	width: 100%;
	height: auto;
	position: relative;
	margin: 0 auto;
}
#tagline {
	width:100%;
	float:left;
 
	
	}	
 #news{
	width:100%;
 
	}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	width:100%;
	margin:10px 0px;
  
}
.videoWrapper iframe {
 
	width: 100%;
	height: 100%;
}

.videoWrapper2 {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	width:100%;
	margin:10px 0px;
  
}
.videoWrapper2 iframe {
 
	width: 100%;
	height: 100%;
}
#footer-tailormade {
	width: calc(100% - 40px);

}
#stories li{
	 width: calc(100% * (1/2) - 10px - 1px);
 
	
}
.story {
	width: 100%;
	margin: 0 auto; 
}
 
 #stories ul li{
	 width: calc(100% * (1/2) - 10px - 1px);
 }
 
 .friends_list{
	width: calc(100%  - 10px  );
	float:left;
	 
		border-bottom: solid thin #f1f1f1;
		padding:10px 0 10px 10px;
		margin-left:0px;
		font-size:13px;
		
	}
 
.friends_img{
	width:30%;
	float:left;
	margin:0px;
	}
.friends_img img{
	width:95%;

	}
#portfoliolist .portfolio {
	width:48%;
}
}

@media screen and (max-width: 450px) {
	#vip ul li {
 
    width:  100% ;
 
}
#sorting a {
	font-size: 1.2em;
}
#sorting li img {
	width: 15px;
	height: 15px;
}
#desc ul li {
	font-size: 1em;
}
 
 
#logo {
	width: 99%;
	padding: 5px;
}
#logo img{
	width: 90%; 
}

 #specialoffer {
	 width:100%;
	 position:relative;
	 float:left;
	 }
	 
#specialoffer .sitem {
	width: 94%;
}
#pd ul {
	width: 100%;
	display: block
}
#pd ul li {
}
#large-pic {
	width: 100%;
}
 
#large-pic img {
	width: 100%;
	height: auto;
}
#footer-item {
	z-index: 999;
	position: fixed;
	bottom: 0;
	left: 0;
}
#cart {
	width: 100%;
		font-size: 1.2em;
		 
}
#order {
	width: 90%;
	padding: 10px;
	font-size: 1.2em;
}
.cart-list-4 {
 	 
	padding:15px 0 15px 5px;
}
 
#billing .left, #billing .left2  {
	width: 100%;
}
#billing .right {
	width: 100%;
}
#pre2 {
	width: 60%;
}
#next2 {
	width: 40%;
}
#billing .right-img {
	width: 100%; 
}
#billing .right-img img {
	width: 100%;
	height: auto;
	padding:5px 20px;
}

#billing div select {
	 
	width: 97%;
 
}
#order2 {
 
	width: 100%;
	padding:0 10px;
 
	
}
 

#order2 .order-left {
	width: 100%; 
		margin:5px 0 0 0;
		padding:0;
}
#order2 .order-right {

	width: 100%;
 	margin:0;
	 

}
#order2-img  {
 width: 100%; 
}
#order2-img img{
	width: 100%;
	height:auto;
	padding:5px 20px;
 
}
 

#footer ul li {
 
	padding: 6px 20px;
 
	border-top: dotted #e4ca5b 2px;
	margin:0px;

	width:100%;
	text-align:left;
		background-color:#ffefaa;
}
#footer .right{
 
	border-top: dotted #e4ca5b  2px;
 
}

 

 
 #footer-icon ul li {
	float:none;
	
}
 
#detail {
 
	width: calc(100%   - 60px );
 
}
 #icon2 ul li {
 
    width: calc(100% * (1/3) - 10px - 1px);
 
}

#tagline {
 
	font-size:60%;
	
	}	
#tagline img{
	width:80%;
	height:auto;
	
	}	
.cart-list-2 h2{
	font-size:1.2em;}
	

#order-term {
	width: 95%;
 
}
#billing .right-img {
	width: 95%;

}
#history ul li {
 
    width: 100%;
 

}
#order2  div select {
	border: solid thin #f1f1f1;
	width: 94%;
	margin-bottom: 0.3em;
	padding: 5px 3px;
}

#stories ul li, #stories2 ul li{
	 width:  100% ;
	 padding:5px 5px 0 5px; }
#portfoliolist .portfolio {
	width:98%;
}
#catlist2 ul li {

    width: calc(100% * (1/2) - 10px - 1px);
}	
	
}