@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

html, 
body {
	font-family: 'Roboto', sans-serif;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #fafafa;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch
}
[type="button"] {
	background: transparent;
	border: 0px solid transparent;
	-webkit-appearance: none;

}

a,
a:active,
a:visited {
	text-decoration: none;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	color: #243746;
	cursor: pointer;
}

a:hover {
	text-decoration: none;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	color: #ffb81c
}

h1, h2, h3, h4 {
	font-family: 'Epilogue', sans-serif;
	font-weight: bold;
	margin:0;
	letter-spacing: 0.01rem;
}

p {
	font-family: 'Roboto', sans-serif;
	font-weight: normal;
	margin:0;
}
/* button */
.btn {
	display: inline-block;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 0.9rem;
    line-height: 1.5;
    border-radius: 4rem;
    transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.btn.tag, 
a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}
.btn.disabled, .btn:disabled {
    opacity: 0.65;
}


.btn-red, .btn:disabled.btn-red:hover, .tag.btn-red:hover {
	background-color: #ffb81c;
	border: 1px solid #ffb81c;
	color: #ffffff;
	font-weight: bold
}
.btn-red:hover {
	background-color: #fff;
	border: 1px solid #ffb81c;
	color: #243746
}

.btn-red-line, .btn:disabled.btn-red-line:hover, .tag.btn-red-line:hover {
	background-color: #ffffff;
	border: 1px solid #ffb81c;
	color: #243746 !important;
	font-weight: bold
}
.btn-red-line:hover {
	background-color: #ffb81c;
	border: 1px solid #ffb81c;
	color: #ffffff !important
}
.btn-black-line {
	background-color: #ffffff;
	border: 1px solid #243746;
	color: #ffb81c !important;
	font-weight: bold
}
.btn-black-line:hover {
	background-color: #243746;
	border: 1px solid #243746;
	color: #ffb81c !important
}
.btn-black, .btn:disabled.btn-black:hover, .tag.btn-black:hover{
	background-color: #243746;
	border: 1px solid #243746;
	color: #ffb81c !important;
	font-weight: bold
}
.btn-black:hover {
	background-color: #fff;
	border: 1px solid #243746;
	color: #243746 !important
}

.btn-white-txt {
	line-height: 1rem;
	background-color: #243746;
	border: 1px solid #243746;
	color: #fff !important;
	font-weight: bold
}
.btn-white-txt:hover {
	background-color: #fff;
	border: 1px solid #243746;
	color: #243746 !important
}

.btn-white-red {
	background-color: #ffffff;
	border: 1px solid #ffffff;
	color: #ffb81c !important;
	font-weight: bold
}
.btn-white-red:hover {
	border: 1px solid #ffffff;
	background-color: #ffb81c;
	color: #ffffff !important;
}

.btn-grey {
	background-color: #ccc;
	border: 1px solid #ccc;
	color: #243746;
	font-weight: bold
}
.btn-grey:hover {
	background-color: #fff;
	border: 1px solid #ccc;
	color: #999
}
.disabled.btn-grey:hover {
	background-color: #ccc;
	border: 1px solid #ccc;
	color: #243746;
	font-weight: bold
}
.btn-grey-line {
	background-color: #fff !important;
	border: 1px solid #ccc !important;
	color: #243746 !important;
	font-weight: bold
}
.btn-success {
    color: #fff !important;
    background-color: #28a745;
    border-color: #28a745;
}

.btn-info {
    color: #fff !important;
    background-color: #00B2EE;
    border-color: #00B2EE;
}
.btn-danger {
    color: #fff !important;
    background-color: #fc0000;
    border-color: #fc0000;
}

.btn-warning {
    color: #fff !important;
    background-color: #FF9138;
    border-color: #FF9138;
}


.btn-sm {
	font-size: 0.7rem !important;
	line-height: 1.2rem;
	padding: 2px 0.75rem
}

.circle-progress {
  position: relative;
}

.circle-progress small {
  position: absolute;
  height: 100%;
  width: 100%;
  font-size: 1.8rem;
  line-height: 1.2rem;
  color: #203546;
  font-weight: bold;
  left: 0;
  top: 0;
  vertical-align: middle;
  text-align: center;
  display: flex;
  align-items: center;
  align-content: center;
}

.circle-progress small span {
  margin: 0 auto;
}

.circle-progress small .breakline {
	font-size: 0.8rem;
	font-weight: normal;
	color: #999;
	line-height: 2rem
}
.circle-progress small .small-txt.breakline::before, 
.circle-progress small .breakline::after{
    content: "\a";
    white-space: pre;
}


.circle-progress small .small-txt {
	font-size: 0.8rem;
	font-weight: normal;
	line-height: 0.1rem;
	color: #203546 !important;
}
.circle-progress canvas {
  display: block;
  margin: 0 auto;
}

.progress-circle-wrapper {
  min-width: 50%;
  margin: 10px  auto;
}

.progress-circle-wrapper .react-sweet-progress-symbol {
  font-size: 0.81818rem;
}

.full-size {
	width: 100%;
	border-radius: 40px;
	padding: .375rem .75rem;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
}

.full-size.right {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.full-size.left {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.catergory {
	padding: 20px;
	height:60px;
	width: 60px;
	float: left
}
.icon {
	width: 100%;
	height: 100%;
	background-size: cover;
}

.btn.fil {
	margin-top: -5px;
	padding: 5px;
	line-height: 0.7rem
}

.icon-filter{
	padding-top: 10px;
	width: 15px;
	height: 15px;
	background-position: 0 3px;
	background-image: url(../img/icon/black/filter.png);
  	background-size: 100% 100%;
  	background-repeat: no-repeat;
  
  }
.icon-bike {
  background-image: url(../img/icon/black/block-list.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.icon-bike:hover {
  background-image: url(../img/icon/white/block-list.png);
  background-repeat: no-repeat;
}

.logo {
	width: 100%;
	height: 60px;
	float: right;
	padding-left: 15px;
}

.logo p {
	float: left;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 31px;
}
.logo .icon {
	width: 100%;
	float: left
}
.icon-logo {
	background-image: url(../img/logo-white.png);
  background-size: 140px 50px;
  background-repeat: no-repeat;
  background-position: 0px 3px;
 
}
.icon-cart {
  background-image: url(../img/icon/black/cart.png);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: 5px center;
 
}

.icon-chat {
  background-image: url(../img/icon/black/chat.png);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: 5px center;
 
}

.search div.input-group {
	margin: 8px 0;
}

.main-container {
	width: 100%;
	margin: 0 auto;
	min-height: 100%;
	position:relative;
}
.fix {
	overflow: hidden;
}

.fix .sticky, 
.modal-open .sticky {
	z-index: 99 !important;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .body-container {
 	
}

.sticky + .body-container #store-nav {
	position: fixed;
	width: 100%;
	z-index: 40;
	margin-top: 82px;
	background-color: #fff
}

.sticky + .body-container #store-nav .head {
	display: none
}

.store-landing .nav .col {
	padding-right: 15px;
    padding-left: 15px;
}

.store-landing .nav .input-group .form-control {
	background: transparent;
	border-radius: 0px;
}

.store-landing .nav .input-group .input-group-text.right {
	background: transparent;
	border-color: transparent;
	border-radius: 0px !important;
}

.top-nav {
	width: 100%;
	margin: 0 auto;
	position: relative;
	list-style-type: none;
}

.top-nav li {
	float: left;
	padding: 5px 10px 0;
	min-width: 200px

}
.top-nav li.open-shop {
	padding: 5px 0px;
	
}

.top-nav li .icon {
	height: 40px;
	width: 25px;
	float: left
}
.top-nav li .noti {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #fc0000;
	position: absolute;
	top: 10px;
	left: 1rem;
}

.user .noti {
	top: 10px;
	left: 2.3rem !important;
}
.top-nav li p {
	font-size: .9rem;
	text-transform: uppercase;
	font-weight: bold;
	float: left;
	margin-left: 5px;
	line-height: 2rem;
	margin-right: 10px;
}

.top-nav li .cart p{
	line-height: 2.8rem
}
.top-nav li > a {
	color: #243746
}

.top-nav li > a:hover {
	color: #243746
}

.top-nav li:hover .cart:after {
	/*background-image: url(../img/icon/red/caret.svg);*/
}
.top-nav .dropdown .dropdown-menu {
	width: 350px;
	border-radius: 0px;
	border: 0px;
	box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.1);
}
.cart-dw {
	top: 0px !important;
	width: 100%;
	height: 270px;
	overflow: hidden;
	left: -200%;
}

.cart-dw .empty-cart {
	width: 100%;
	margin: 0 auto;
	position: relative;
	text-align: center;
}
.empty-cart p {
	width: 100%;
	text-align: center;
	font-size: 0.8rem !important;
	text-transform: none !important;
	padding-top: 20px;
	line-height: 0.9rem !important;
	font-weight: normal !important
}

.empty-cart p a.btn {
	color: #ffffff;
	font-size: 0.8rem
}
.empty-cart p a.btn:hover {
	color: #fff !important
}
.cart-dw .empty-cart .icon {
	height: 100px;
	width: 100px;
	background-size: cover;
	margin-left: calc((100% - 100px) / 2);
	margin-top: 10%;
	position: relative !important;
	background: #eeeeee;
	border-radius: 50%;
	font-family: 'Roboto', sans-serif;
}
.cart-dw .empty-cart .icon-shop {
	background-image: url(../img/icon/black/cart.png);
  background-size: 50px 50px;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0.4
}
.cart-dw {
	padding: 0
}
.cart-dw .my-cart {
	width: 100%;
	margin: 0 auto;
	position: relative;
	padding:0;
	height: 100%;
}

.my-cart ul {
	width: 100%;
	height: calc(100% - 40px);
	overflow-y: scroll;
	padding: 10px;
	list-style-type: none
}
.my-cart ul li {
	width: 100%;
	margin: 0 auto;
	padding: 0 0 10px;
}

.my-cart ul li p {
	font-size: 0.7rem;
	font-weight: normal;
	text-transform: none;
	line-height: 0.8rem;
	padding: 0;
	margin: 0;
	float: none
}
.my-cart ul li .thumbnail-cart {
	width: 60px;
	height: 60px;
	position: relative;
	background-color: #eeeeee
}
.my-cart ul li .item-quantity {
	width: auto;
	padding: 3px;
	border: 1px solid #999999;
	border-radius: 3px;
	line-height: 0.9rem;
	font-size: 0.8rem;
	color: #999999;
	float: right;
	margin-top: -15px;
}

.my-cart .btn-field {
	width: 100%;
	margin: 0 auto;
	position: absolute;
	bottom: 0 !important;
}
.my-cart .btn-field .btn {
	width: 50%;
	float: left;
	font-size: 0.8rem
}
.text-right {
	text-align: right
}

.my-cart ul li h2 {
	font-size: 0.9rem;
	color: #ffb81c;
	padding-top: 10px;
	
}
.user-dw {
	top: 50px !important;
	width: 200px !important;
	left:-20% !important;
	font-family: 'Roboto', sans-serif;
}

.user-dw ul {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
	list-style-type: none;
	overflow: hidden;
}
.user-dw ul li {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	padding: 6px 15px;
	font-size: 0.8rem;
	line-height: 1.3rem;
}

.user-dw ul a:hover li {
	background-color: #eeeeee
}
.user-dw ul a li.sign-out {
	color: #ffb81c;
}

li.cart {
	padding: 5px 0 0px;
	float: right
}
li.user {
	
	float: right
}
li.user .icon {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background: rgba(255,255,255,0.5);
}
li.user .icon-user {
	background-image: url(../img/icon/black/user.png);
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: center center;
}
li.login .icon {
	width: 40px;
	height: 40px;
	background: rgba(255,255,255,0);
}
li.user .icon-login {
	background-image: url(../img/icon/black/login.png);
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: center right;
}

li.user p {
	margin-left: 10px;
	line-height: 2.8rem;

}
li.user p.after-login {
	margin-left: 5px;
	line-height: 2.8rem;
	text-transform: none;
	width: calc(100% - 60px);
	text-align: center;
	margin-right: 10px
}
li.user a {
	width: 100%
}
li.user p.after-login:after {
	content: " ";
	height: 40px;
	width: 10px;
	float: right;
	right: 0;
	margin-left: 10px;
	background-image: url(../img/icon/black/caret.svg);
  	background-size: 10px 10px;
  	background-repeat: no-repeat;
  	background-position: center center;
  	-webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
li.open-shop {
	text-align: right;
	
}

li.open-shop .icon {
	width: 100%;
	height: 32px;
	float: none
}
.icon-shop {
  background-image: url(../img/icon/black/shop.svg);
  background-size: 100% 32px;
  background-repeat: no-repeat;
  background-position: -5px center;
}

li.open-shop a p,
li.open-shop a p span {
	
	text-align: center;
	transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

li.open-shop a p {
	margin: 3px 0 0 23px;
	padding: 0;
	font-weight: normal;
	text-transform: none;
	color:#ffb81c;
	line-height: 0.9rem
}
li.open-shop a p {
	font-size: 0.7rem
}
li.open-shop a p span{
	color:#243746;
	font-weight: bold;
	font-size: 0.7rem;
	letter-spacing: 0.5px
}

li.open-shop a p span:after {
	content: " ";
	height: 15px;
	width: 15px;
	float: right;
	background-image: url(../img/icon/red/caret.svg);
  	background-size: 10px 10px;
  	background-repeat: no-repeat;
  	background-position: center center;
  	-webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

li.open-shop a:hover p span:after {
	background-image: url(../img/icon/black/caret.svg);
}
li.open-shop a:hover p {
	color:#243746;
}

li.open-shop a:hover p span{
	color:#ffb81c;
}
li.open-shop a:hover .icon-shop {
	background-image: url(../img/icon/red/shop.svg);
}
header {
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 99;
	height: auto;
	transition: all 0.3s
}
header div[class^="col-"] {
	padding-right: 0;
	padding-left: 0
}
.devices-head {
	display: none
}
@media only screen and (max-width: 980px) {
  .desktop-view {
  	display: none !important
  }
  .devices-head {
  	display: block
  }

  .logo {
  	width: calc(100% - 60px);
  	padding-left: 0
  }

  .top-nav li {
  	padding-top: 13px;
  	float: right
  }
  li.user {
  	width: auto
  }
  .top-nav li {
	    float: right;
	    padding: 15px 0px 0;
	     min-width: 60px; 
	}
  li.user .icon {
	width: 30px;
	height: 30px;
	border-radius: 0;
	background: transparent;
  }
	li.user .icon-user {
		background-image: url(../img/icon/black/user.png);
	  background-size: 25px 25px;
	  background-repeat: no-repeat;
	  background-position: center center;
	}
	li.user .icon-login {
	    background-image: url(../img/icon/black/login.png);
	    background-size: 25px 25px;
	    background-repeat: no-repeat;
	    background-position: center right;
	}
	li.user p {
		font-size: 0.8rem
	}
	.devices-drop .dropdown-menu{
		left: -200px;
		margin-top: 18px;
	}
	.top-nav li .icon {
		width: 30px;
    height: 30px;
    margin-top: -5px;
	}

	.icon-cart {
		background-size: 25px 25px
	}
	.top-nav li .noti {
		top: 15px;
		left: 1rem;
	}
	.nav-header .user-dw {
		transform: translate3d(-157px, 15px, 0px) !important;
    	left: 0% !important;
	}

}

footer {
	position:absolute;
	
	bottom:0;
	width:100%;
	height:380px;
	background:#fff;
	box-shadow: 5px -2px 10px rgba(0, 0, 0, 0.1)
}

.contain {
	width: 92%;
	margin: 0px auto;
	max-width: 1130px;
}

.add-margin {
	margin: 20px auto !important;
}

.campaign .nav{
	margin-bottom: 15px;
	
}
.campaign .nav .nav-item {
	padding-left: 0 !important;
	padding-right: 0 !important;
	font-weight: bold !important
}

.campaign .nav .nav-link{
	border-radius: 10px;
	padding-bottom: 8px;
	padding-top: 8px;
	margin-bottom: 1px;
	margin-right: 5px;
	background: rgba(255, 255, 255, 0.8);
	color: #000;
	font-size: 0.9rem;
	font-weight: bold !important;
	border-bottom: 4px solid #243746
}
.campaign .nav .col-md-6:nth-child(2n) .nav-link,
.campaign .nav .col-md-4:nth-child(3n) .nav-link, 
.campaign .nav .col-md-3:nth-child(4n) .nav-link {
	margin-right: 0
}
.campaign .nav .nav-link.active, 
.campaign .nav .nav-link:hover {
	border-bottom: 4px solid #ffb81c
}

.campaign .nav .nav-link p {
	font-weight: bold !important;
	
}

.campaign .catergeries-d .nav-link {
	padding-bottom: 0px;
}

.catergeries-d {
	width: 100%;
	position: relative;
}

.catergeries-d div.col-sm-2a {
	-ms-flex: 0 0 12.5% !important;
    flex: 0 0 12.5% !important;
    max-width: 12.5% !important; 
}

.catergeries-d .product div[class^=col-] {
	padding: 0 2px !important;
	
}


.catergeries-d div[class^=col-] a {
	width: 100%;
	height: 100%;
}

.catergeries-d div[class^=col-] a:hover {

}
.whole-box {
	width: calc(100% + 1px);
	margin: 0 auto 10px;
	position: relative;
	height: calc(100% + 1px);
	border: 0px solid #eeeeee;
	background: #fff;
	overflow: hidden;
}


.catergeries-d .row {
	padding-right: 15px;
	padding-left: 15px;
	margin-bottom: 0px;
}

.catergeries-d .cater-thumb {
	width: 100px;
	height: 100px;
	margin: 0 auto;
	border-radius: 50%;
	background-color:transparent;
		
}
.catergeries-d .event .cater-thumb {
	float: left;
	position: absolute;
	left: 0;
	top: 10px;
	width: 40px;
	height: 40px;
	text-align: left;
	overflow: hidden;
}

.event-icon {

	margin-left: auto;
	margin-right: auto;
	width: 40px;
	height: 40px;
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position: center; 
	transition: all 0.2s
}

.catergeries-d .active .event .cater-thumb {
	background-color: #ffb81c;
}

.catergeries-d .event .cater-thumb {
	background-color: #FAE9BE
}
.cater-thumb .icon-bundle {
	background-image: url(../img/icon/black/bundle-sale.png);
}
.catergeries-d .active .event .cater-thumb .icon-bundle {
	background-image: url(../img/icon/white/bundle-sale.png);
}
.cater-thumb .icon-flash {
	background-image: url(../img/icon/black/flash-deal.png);
}
.catergeries-d .active .event .cater-thumb .icon-flash {
	background-image: url(../img/icon/white/flash-deal.png);
}
.cater-thumb .icon-hot {
	background-image: url(../img/icon/black/hot-deal.png);
}
.catergeries-d .active .event .cater-thumb .icon-hot {
	background-image: url(../img/icon/white/hot-deal.png);
}
.cater-thumb .icon-promo {
	background-image: url(../img/icon/black/promo.png);
}
.catergeries-d .active .event .cater-thumb .icon-promo {
	background-image: url(../img/icon/white/promo.png);
}
.catergeries-d .active .event p {
	font-weight: 700;
	color: #FAE9BE
}
.catergeries-d div[class^=col-] a:hover .event .event-icon {
	background-size: 40px 40px;
}
.catergeries-d div[class^=col-] a:hover img {
	transform: scale(1.1);
}
.cater-thumb img {
	max-width: 100%;
	margin: 0 auto;
	transition: all 0.3s
}

.catergeries-d .event .cater-thumb img {
	padding: 10px;
}


.catergeries-d h2 {
	font-size: 0.9rem;
	line-height: 1.2rem;
	margin-bottom: 10px;
}

.catergeries-d p {
	font-size: 0.8rem;
	color: #222;
	text-align: center;
	padding: 10px;
}
.catergeries-d .event p {
	text-align: left;
	padding-left: 60px;
	padding-top: 20px;
	color: #fff
}
.catergeries-d .nav-link {
		padding: 0 0 20px 0
	}
@media only screen and (max-width: 970px) {
	.catergeries-d .event .cater-thumb {
		float:none;
		position: relative;
		margin-right: auto;
		margin-left: auto;
		left: 0;
		right: 0;
		top: 0;
		padding: 0
	}
	.catergeries-d .event p {
		text-align: center !important;
		padding: 10px 0
	}

	.catergeries-d .nav-link {
		padding: 0
	}
	.whole-box {
		margin-top: 15px
	}
	.campaign .nav .col-6:nth-child(2n) .nav-link {
		margin-right: 0
	}
}

.hot-pick {
	margin-bottom: 10px;
}


.hot-pick h2 {
	font-size: 0.9rem;
	line-height: 1.2rem;
	float: left
}

.hot-pick ul.justify-content-end {
	float: right;
	margin-top: -10px !important;
}

.hot-pick .nav-link {
	font-size: 0.8rem;
	font-weight: bold;
	line-height: 1.2rem;
	border-bottom: 3px solid transparent
}

.hot-pick .nav-link.active{
	border-bottom: 3px solid #ffb81c
}

.body-container {
	width: 100%;
	margin: 0 auto;
    padding-bottom:380px;
    position: relative;
    transition: all 0.3s;
}

.extra-msg {
	position: relative;
	width: 100%;
	margin: 0 auto;
	height: 50px;
	background: #fff;
	overflow: hidden;
	text-align: left;
	transition: all 0.3s
}
.extra-msg p b {
	color: #243746;
	font-size: 0.9rem;
}
.extra-msg p {
	color: #666;
	padding: 8px 6px;
	font-size: 0.7rem;
	line-height: 1rem;
	float: left;
	width:calc(100% - 90px);
}
.extra-msg p a {
	color: #fc0000
}
.extra-msg a {
	width: 80px;
	color: #243746;
	margin-top: 8px
}


.icon2 {
	width: 30px;
	height: 30px;
	
	font-size: 30px;
}
.icon2:before {
	font-size: 30px;
	content:"\00A0\00A0\00A0\00A0";
	background-repeat: no-repeat;
	width: 30px;
    height: 30px;
    background-position: 0 0;
    background-size: 30px 30px;
}
.icon-top:before {
	background-image: url(../img/icon/red/wish-list.png);
}

.icon-cata:before {
	background-image: url(../img/icon/red/catergories.png);
}

.icon-flash:before {
	background-image: url(../img/icon/red/flash-deal.png);
	
}

.icon-hot:before {
	background-image: url(../img/icon/red/hot-deal.png);
}

.icon-like:before {
	background-image: url(../img/icon/red/like.png);
	
}
.txt-center {
	text-align: center
}
.small-text {
	font-size: 0.7rem;
	color: #ccc;
	padding: 20px;
}

@media only screen and (max-width: 760px) {

	.catergeries-d .cater-thumb {
		width: 80px;
		height: 80px;
		margin: 0 auto;
		border-radius: 50%;
		background-color: transparent;	
	}
	.catergeries-d p {
		font-size: 0.75rem;
		color: #222;
		text-align: center;
		padding: 10px;
		line-height: 0.8rem
	}
	
	.catergeries-d div.col-sm-2a {
		-ms-flex: 0 0 25% !important;
	    flex: 0 0 25% !important;
	    max-width: 25% !important; 
	}
	.catergeries-d .row {
		margin-bottom: 20px !important
	}
}

.nav-header {
	width: 100%;
	margin: 0 auto;
	
	box-shadow: 0px 3px 5px rgba(0,0,0,0.1);
	z-index: 100;
	background: linear-gradient(#ffda1c 20%,#ffb81c 70%);
}
.nav-header .main {
	height: 60px;
}

.less-catergory {
	width: 100%;
	margin: -1px auto 0;
	height: 40px;
	border-top: 1px solid #eeeeee;
	background-color: #ffffff;
	box-shadow: 3px 2px rgba(0,0,0,0.1);
	position: relative;
	cursor: pointer;

}

.less-catergory .contain {
	height: 40px;
	position: relative;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}
.menu-wrapper {
	position: relative;
	max-width: 100%;
	height: 40px;
	margin: 0 0;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.menu {
	padding: 0;
	margin: 0;
	height: 60px;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}
.menu .item {
	display: inline-block;
	padding: 0;
    min-width: 14%;
}

.paddles {
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
	
}
.paddle {
	width: 2rem;
	position: absolute;
	top: 0;
	bottom: 0;
	text-align: center;
	
}
.left-paddle {
	left: 0;
 	z-index: 999;
 	border-bottom-left-radius: 0;
 	border-top-left-radius: 0
}
.right-paddle {
	right: 0;
	z-index: 999;
	border-bottom-right-radius: 0;
 	border-top-right-radius: 0
}
.hidden {
	display: none;
}

.print {
	margin: auto;
}

.less-catergory div[class^="col"] {
	min-width: 100px;
	padding-left: 0px;
	padding-right: 5px;
	cursor: pointer !important;
}

.pn-ProductNav_Wrapper {
  max-width: 1160px;
  margin:  0 auto;
  position: relative;
  padding: 0 11px;
  z-index: 102;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
.dragscroll::-webkit-scrollbar {
    display: none;
}
.pn-ProductNav {
  /* Make this scrollable when needed */
  overflow-x: auto;
  /* We don't want vertical scrolling */
  overflow-y: hidden;
  /* For WebKit implementations, provide inertia scrolling */
  -webkit-overflow-scrolling: touch;
  /* We don't want internal inline elements to wrap */
  white-space: nowrap;
  /* If JS present, let's hide the default scrollbar */
  /* positioning context for advancers */
  position: relative;
  font-size: 0;
}
.js .pn-ProductNav {
  /* Make an auto-hiding scroller for the 3 people using a IE */
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /* Remove the default scrollbar for WebKit implementations */
}
.js .pn-ProductNav::-webkit-scrollbar {
  display: none;
}

.pn-ProductNav_Contents {
  float: left;
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
  position: relative;
  text-align: center
}

.pn-ProductNav_Contents-no-transition {
  -webkit-transition: none;
  transition: none;
}

.pn-ProductNav_Link {
  text-decoration: none;
  color: #999;
  font-size: 0.8rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 37px;
  border-bottom: 3px solid transparent;
  padding: 0 11px;
  transition: all 0.3s;
  min-width: 150px
}
.pn-ProductNav_Link:first-child {
	width: 200px;
	padding: 0
}

.pn-ProductNav_Link.downlaod-btn i {
	color: #fff;

}

.pn-ProductNav_Link + .pn-ProductNav_Link {
 	color: #999;
}
.pn-ProductNav_Link.downlaod-btn {
	background-color: #212529;
	min-width: 180px !important;
	border-color:#ffb81c;
	color: #ffb81c;
}
.pn-ProductNav_Link[aria-selected="true"] {
  color: #212529;
  border-color: #ffb81c;
  font-weight: bold
}


.pn-Advancer {
  /* Reset the button */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #ffb81c;
  padding: 0 15px;
  border: 0;
  /* Now style it as needed */
  position: absolute;
  top: 0;
  bottom: 0;
  /* Set the buttons invisible by default */
  opacity: 0;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  height: 40px;
  color: #fff;

}
.pn-Advancer:focus {
  outline: 0;
}
.pn-Advancer:hover {
  cursor: pointer;
}

.pn-Advancer_Left {
  left: 0;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}
[data-overflowing="both"] ~ .pn-Advancer_Left, [data-overflowing="left"] ~ .pn-Advancer_Left {
  opacity: 1;
}

.pn-Advancer_Right {
  right: 0;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}
[data-overflowing="both"] ~ .pn-Advancer_Right, [data-overflowing="right"] ~ .pn-Advancer_Right {
  opacity: 1;
}

.pn-Advancer_Icon {
  width: 20px;
  height: 40px;
  fill: #bbb;
}

.pn-ProductNav_Indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100px;
  background-color: transparent;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transition: background-color .2s ease-in-out, -webkit-transform .2s ease-in-out;
  transition: background-color .2s ease-in-out, -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out, background-color .2s ease-in-out;
  transition: transform .2s ease-in-out, background-color .2s ease-in-out, -webkit-transform .2s ease-in-out;
}

#allPro {
	
}
#allPro:after {
	content: " ";
    height: 40px;
    width: 10px;
    float: right;
    right: 0px;
    margin-top: -37px;
    margin-right:5px;
    background-image: url(../img/icon/grey/caret.svg);
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.less-catergory #allPro:hover::after {
	 background-image: url(../img/icon/red/caret.svg);
}
.less-catergory a {
	cursor: pointer;
}
.less-catergory a p {
	color: #999;
	font-weight: normal;
	
	cursor: pointer;
	transition: all 0.3s;

}
.less-catergory .downlaod-btn {
	background-color: #212529;
	border-bottom: 4px solid #ffb81c;
	color: #ffb81c;
	min-width: 120px;
	float: right
}

.less-catergory .downlaod-btn div[class^="col"] {
	padding-right: 0
}

.less-catergory .downlaod-btn a p{
	color: #ffb81c;
	border-bottom: 4px solid #ffb81c;
	line-height: 2.25rem;
}
.less-catergory .downlaod-btn a:hover p{
	color: #fff;

}

.less-catergory div[class^="col"].onair a p {
	background-color: #212529;
	border-bottom: 4px solid #ffb81c;
	color: #ffb81c
}

.less-catergory div[class^="col"].onair a p span:before {
    width: 20px;
    height: 20px;
    padding-right: 5px;
    content: "\00A0\00A0\00A0\00A0";
    background-image: url(../img/icon/white/onair.png);
    background-repeat: no-repeat;
    background-position: 0px -1px;
    background-size: 15px 15px;
}

.less-catergory a:hover p {
	color: #243746;
}
.less-catergory #allPro.active p {
	color: #243746;
	border-bottom: 4px solid #ffb81c;
	font-weight: 700;
}
.less-catergory a.active p {
	color: #243746;
	border-bottom: 4px solid #ffb81c;
	font-weight: 700;
}
.less-catergory .icon-bike {
	background-image: url(../img/icon/black/block-list.png);
}

.less-catergory .icon {
	float: left;
	margin: 8px 10px 10px 0px;
	width: 20px;
	height: 20px;
	background-size: cover;
}

.less-catergory #allPro p{
	text-align: left;
	font-weight: 700;
	color: #243746;
}
.less-catergory p {
	font-size: 0.8rem;
	line-height: 2.2rem;
	font-weight: bold;
	text-align: center;
}

.less-catergory p.event {
	font-weight: 700;
}

.less-catergory p.event span {
	color: #ffb81c
}

.title-bar {
	width: 100%;
	margin: 0 auto;
	height: 50px;
	border-top: 1px solid #eeeeee;
	background-color: #ffffff;
	box-shadow: 0px 3px 5px rgba(0,0,0,0.1);
	position: relative;
	
}
.title-bar div[class^=col] {
	padding-left: 15px;
}

.title-bar div[class^=col] h2 {
	font-size: 0.9rem;
	/*margin-left: 30px;*/
	line-height: 2.5rem;
	margin-top: 5px;

}

.title-bar div[class^=col] h2:after {
	background-image: url(../img/icon/black/close.png);
    background-size:20px 20px;
    background-repeat: no-repeat;
    background-position: center bottom;
    position: absolute;
    
    display: inline-block;
    width: 30px; 
    height: 30px;
    margin-top: -2px;
    content:" ";
    margin-right: 10px;
    margin-left: 7px;
}
.form-margin {
	margin-top: 6px;
    margin-right: 20px;
    margin-left: 20px;
}
.form-control,
.form-control:focus {
	background: transparent;
	border: 1px solid transparent;
	border-radius: 0;
	font-size: 0.8rem;
	height: 34px;
	font-family: 'Roboto', sans-serif;
	outline-style: none;
	box-shadow: none;
	border-color: transparent;
	margin-left: 3px;
}
textarea:focus, input:focus{
    outline-style: none;
box-shadow: none;
border-color: transparent;
}
.input-group-text {
	background: #eeeeee;
	border: 1px solid #eeeeee;
	font-size: 0.8rem;
	height: 34px
}

.input-group-text.right {
	border-top-right-radius: 2rem !important;
	border-bottom-right-radius: 2rem !important;
}
.input-group-text.left {
	border-top-left-radius: 2rem !important;
	border-bottom-left-radius: 2rem !important;
}
.cate-banner .carousel-indicators li{
	width: 10px;
	height: 10px;
	border-radius: 50%
}
.banner {
	width: 100%;
	position: relative;
	margin: 0 auto 0;
	padding:20px 0 0;
}
.banner.less-cata{
	width: 100%;
	margin: 0 auto;
	position: relative;
}

.banner .slide {
	border-radius: 10px;
	overflow: hidden;
}

.banner .carousel-item img {
	margin-top: 0px
}
.banner .carousel-indicators {
	z-index: 2;
	margin-bottom: 0 !important
}

.banner .carousel-indicators li{
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #243746;
	opacity: 1;
	margin-bottom: 0px;

}

.banner .carousel-indicators li.active {
	background-color: #ffb81c
}

.banner .carousel-caption {
	width: 100%;
	margin: 0 0 0 35%;
	height: 100%;
	text-align: left;
	right: 0px;
	top: 20%;
	display: flex;
	align-items: center;
	z-index: 1
}

.banner .carousel-caption h5 {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.9rem;
	color: #1f3445;
	padding-bottom: 20px;
}
.banner .carousel-caption p {
	color: #000;
	font-size: 1rem;
	line-height: 1.1rem;
	padding-bottom: 20px
}

.banner .carousel-caption a {
	padding-right: 30px;
	padding-left: 30px;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	font-size: 0.8rem;
	font-weight: normal
}

@media only screen and (max-width: 980px) {
  .banner .carousel-item {
	height: auto;
	}
	 .banner .carousel-item img {
	 	margin-top: 0
	 }
	.banner ol.carousel-indicators {
		margin-bottom: 0 !important
	}
	.carousel-caption {
		top: 15% !important
	}
	.carousel-caption h5 {
		font-size: 2rem !important
	}
	.carousel-caption p {
		font-size: 0.8rem !important
	}
	
}

@media only screen and (max-width: 760px) { 
	.carousel-caption {
		width: 95%;
		float: none;
		left: 10%;
		top: 10% !important
	}
	.carousel-caption h5 {
		font-size: 0.9rem !important;
		line-height: 0.9rem !important;
		padding-bottom: 3px !important;
	}
	.carousel-caption p {
		font-size: 0.65rem !important;
		line-height: 0.75rem !important
	}

	.carousel-caption .btn {
		font-size: 0.7rem !important;
		padding: 5px;
		min-width: 150px;
	}
	
}
.catergory-list{
	width: 250px;
	background-color: #ffffff;
	position: absolute;
	z-index: 8;

	box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.1);
}
#myCAT {
	display: none;
	transition: all 0.3s
}
.catergory-list-sub {
	width: 250px;
	
	background-color: #ffffff;
	position: absolute;
	z-index: 8;
	box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.1);
	left: 250px;
	top: 0px;
	border-left: 2px solid #ffb81c;
	display: none
}

.catergory-list-sub-lvl2 {
	width: 250px;
	
	background-color: #ffffff;
	position: absolute;
	z-index: 8;
	box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.1);
	left: 248px;
	top: 0px;
	border-left: 2px solid #ffb81c;
	display: none
}

.drop {
	display: block !important
}
.catergory-list ul,
.catergory-list-sub ul {
	width: 100%;
	margin: 10px auto;
	padding: 0;
	list-style-type: none
}
.catergory-list ul a li,
.catergory-list-sub ul a li {
	width: 100%;
	margin: 0 auto;
	height: 30px;
	font-size: 0.8rem;
	padding: 0 15px;
	line-height: 30px;
	font-family: 'Roboto', sans-serif;
}


.catergory-list ul li:hover, 
.catergory-list ul .hover li {
	background-color: #243746;
	font-weight: bold;
	color: #ffb81c;
}

.catergory-list ul li:after {
	content: " ";
	height: 30px;
	width: 10px;
	float: right;
	background-image: url(../img/icon/red/caret.svg);
  	background-size: 10px 10px;
  	background-repeat: no-repeat;
  	background-position: center center;
  	-webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
a.nonext li:after, 
.catergory-list-sub-lvl2  ul li:after {
	display: none
}

.catergory-list ul a:hover li .arrow-right,
.catergory-list ul .hover li .arrow-right,
.catergory-list-sub ul a:hover li .arrow-right,
.catergory-list-sub ul .hover li .arrow-right{
	display: block !important;
}
.arrow-right {
  width: 0; 
  height: 0;
  position: absolute;
  margin-top: -25px;
  left: 240px; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #ffb81c;
  display: none;

}
.catergory-list-sub .arrow-right {
	left: 238px;
}

@media only screen and (max-width: 980px) { 
	.catergory-list {
		display: none
	}
}
.subscribe, .rental {
	padding-top: 15px;
	padding-bottom: 15px;
	width: 100%;
	position: relative;
}

.content {
	width: 100%;
	border-radius: 5px;
	background-color: transparent;

}
.content h2 {
	font-size: 1rem;
	line-height: 2rem
}

.content p {
	font-size: 0.7rem;
	line-height: 0.8rem
}
.content .icon {
	width: 90px;
	height: 90px;
	margin: 0 0 0 auto;
}

.icon-subscribe {
  background-image: url(../img/icon/black/sub.svg);
  background-size: 80px 80px;
  background-repeat: no-repeat;
  background-position: center center;
}
.icon-rental {
  background-image: url(../img/icon/red/subplus.svg);
  background-size: 80px 80px;
  background-repeat: no-repeat;
  background-position: center center;
}

.subscribe .content {
	background-color: #ffb81c;
	color: #243746;
	padding: 10px;
}

.rental .content {
	background-color: #243746;
	color: #ffb81c;
	padding: 10px;
}

.content div[class^="col-"] {
	margin-top: 15px;
	margin-bottom: 15px;
}

.content .btn {
	font-size: 0.7rem;
	padding: 6px;
	line-height: 1rem;
	min-width: 80px

}
.content .icon-box {
	padding: 0;
	margin-top: 5px !important
}
.content .btn-black {
	color: #ffb81c !important;
	margin-bottom: 10px;
}

.content .btn-black:hover {
	border: 1px solid #243746;
	background-color: #ffb81c;
	color: #243746 !important;
}

.content .btn-red {
	color: #243746 !important;
	margin-bottom: 10px;
}

.content .btn-red:hover {
	border: 1px solid #ffb81c;
	background-color: #243746;
	color: #ffb81c !important;
}

.rental .btn-white-red:hover {
	background-color: #243746;
}

.content .devices-link {
	display: none;
	font-size: 0.7rem;
	color: #ffffff
}

.rental .content .devices-link { 
	color: #ffb81c
}
@media only screen and (max-width: 970px) {
	.subscribe,
	.rental {
		padding-right: 0;
		padding-left: 0;
	}

	.subscribe .content {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	.rental .content {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	
}

@media only screen and (max-width: 760px) {
	.content .icon {
		width: 70px;
		height: 70px;
		margin: 0 0 0 auto;
	}

	.icon-subscribe {
	  background-image: url(../img/icon/white/sub.svg);
	  background-size: 50px 50px;
	  background-repeat: no-repeat;
	  background-position: 15px center;
	}
	.icon-rental {
	  background-image: url(../img/icon/red/subplus.svg);
	  background-size: 50px 50px;
	  background-repeat: no-repeat;
	  background-position: 15px center;
	}
	.diss {
		display: none
	}
	.content .devices-link {
		display: block
	}
	.content div[class^="col-"] {
		margin-top: 5px;
		margin-bottom: 5px;
	}
	.content div[class^="col-"] h2 {
		text-align: center
	}
}

.nav-item .icon {
	width: 30px;
	height: 20px;
	background-size: cover;
	float: none;
	margin: 0 auto;
}
.nav-item .icon-nav-sub {
    background-image: url(../img/icon/black/sub.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center top;
}
.nav-item .active .icon-nav-sub {
	background-image: url(../img/icon/red/sub.svg);
}
.nav-item .icon-nav-rent {
	width: 35px;
	height: 25px;
	margin-top: -5px;
    background-image: url(../img/icon/black/subplus.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}
.nav-item .active .icon-nav-rent {
	background-image: url(../img/icon/red/subplus.svg);
}
.product-list {
	width: 100%;
	margin: 0 auto 15px;
	position: relative;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.0);
	overflow: hidden;
	border-radius: 10px;
	
}
.shop .product-list {
	border: 1px solid #eee;
	
}

.list .shop h3 {
	font-size: 0.7rem;
	font-weight: normal;
	padding: 10px;
	color: #243746;
	font-family: 'Roboto', sans-serif;
}

.product-list:hover {
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	overflow: hidden;
	border-radius: 10px;
	cursor: pointer;
}

.product-list.product-highlight .pro-img{
	background-color: #243746;
	height: 0;
	padding-top: calc(50%);
	
}

.product-list.product-highlight .pro-img > img {
	max-width: 100%;
	vertical-align: top;
	overflow: hidden;
	top:-20%;
	-o-object-fit: contain;
    object-fit: contain;
	position: absolute;
	z-index: 10
}
.product-list.img-only {
	
	overflow: hidden;
}
.product-list.img-only .pro-img > img {
	max-height: 100%;
	top:0
}

.product-list.img-only .pro-img {
	background: #243746;
	width: 100%;
    height: 0;
    background-color: #eeeeee;
    padding-bottom: 21%;
    position: relative;
    border-radius: 10px 10px 0 0;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

.product-list.product-highlight .pro-info {
	position: absolute;
	z-index: 10;
	bottom:15px;
	padding-bottom: 15px;
	background: rgb(37,55,70);
background: -moz-linear-gradient(180deg, rgba(37,55,70,0) 0%, rgba(37,55,70,1) 20%);
background: -webkit-linear-gradient(180deg, rgba(37,55,70,0) 0%, rgba(37,55,70,1) 20%);
background: linear-gradient(180deg, rgba(37,55,70,0) 0%, rgba(37,55,70,1) 20%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#243746",endColorstr="#243746",GradientType=1);
}
.product-list.product-highlight h1 {
	font-size: 1rem;
	color: #FFB81C;
	text-shadow: 2px 2px 2px #000;
}

.product-list.product-highlight p {
	margin: 6px auto 10px;
	background-color: #FFB81C;
	border-radius: 30px;
	padding: 5px 10px;
	line-height: 1rem;
	text-align: center
}
.product-list.product-highlight p, 
.product-list.product-highlight h1 span,
.product-list.product-highlight h2 {
	color: #fff
}

.product-list.product-highlight .carousel-indicators {
	bottom: -15px;
}

.product-list.product-highlight .carousel-indicators li{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #fff;
	opacity: 1
}
.product-list.product-highlight .carousel-indicators li.active{
	
	background-color: #FFB81C;
}

.carousel-item .product {
	padding-left: 15px !important;
	padding-right: 15px !important;
	
}
.function-list {
	margin-top: 15px;
	margin-bottom: 15px;
}
.function-list, 
.brands-list {
	margin-right: -15px;
	margin-left: -15px;
}

.brands-list .carousel-item {
	margin-top: 10px;
}
.product {
	padding-left: 5px;
	padding-right: 5px;
	
}
.product .product-list:hover .pro-img > img{
	transform: scale(1.1); /* Equal to scaleX(2) scaleY(0.5) */
  	transform-origin: center;
}

.product-list.product-highlight h2 {
	padding-bottom: 5px;
}
.product div[class^=col-] {
	padding: 0 8px;
	border-radius: 10px
}
.product > div[class^=col-12] > p.right-link a{
	margin-top: -35px
}
.product-list .pro-img {
	width: 100%;
	height: 0;
	background-color: #ffffff;
	padding-bottom: 75%;
	position: relative;
	border-radius: 10px 10px 0 0;
	margin-left: auto;
  	margin-right: auto;
  	cursor: pointer;
	
}
.product-list .pro-img > img {
	width: 100%;
    height: 100%;
    top: 0;
    left: 0;
	vertical-align: middle;
	-o-object-fit: contain;
    object-fit: contain;
	position: absolute;
	flex-shrink: 0;
	transition: all 0.3s
}

.product-list .pro-img.brand-img > img { 
	width: auto !important;
	left: auto !important;
	right: 0px
}

.product-list .pro-img > a > img {
	width: 100%;
    height: 100%;
    top: 0;
    left: 0;
	vertical-align: middle;
	-o-object-fit: contain;
    object-fit: contain;
	position: absolute;
	flex-shrink: 0;
	transition: all 0.3s
}

.product-list .pro-img.brand-img > a > img { 
	width: auto !important;
	left: auto !important;
	right: 0px
}
.product-list .brands {
	height: 80px !important;
	overflow: unset !important;
}
.product-list .brands-logo {
	width: 70px;
	height: 70px;
	background-color: #eee;
	border: 2.5px solid #fff;
	position: absolute;
	left: calc(50% - 35px);
	top: -45px;
	border-radius:50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	box-shadow: -2px -2px 10px 0px rgba(0, 0, 0, 0.3);
}
.brands p {
	font-size: 0.7rem !important;
	bottom: 0;
	line-height: 0.75rem !important;
	text-align: center;
	padding-top: 40px !important;
}

.brands p:before {
	content:" " !important;
}

.product-list .brands-logo > img {
	max-width: 100%;
	
}

.offer-tag {
	left: 0;
	position: absolute;
	bottom: 0;
	float: left;
	text-align: center;
	font-weight: bold;
	display: inline-block;
	vertical-align: middle;
	z-index: 6;
	max-height: 35px;
	overflow: hidden;

}

.offer-tag  img {
	width: 100%
}

.offer-tag .event-tag {
	background-color: #FFB81C;
	color: #243746;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 6px;
	line-height: 0.7rem;
	display: inline-block;
	text-align: center;
	max-height: 35px;
	vertical-align: middle;
}

.offer-tag .event-tag span {
	color: #fff;
	font-size: 0.7rem;
	letter-spacing: 0.1rem	
}

.offer-tag .dis-tag {
	background-color: #243746;
	color: #FFB81C;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 6px;
	line-height: 0.7rem;
	display: inline-block;
	text-align: center;
	text-transform: uppercase;
	max-height: 35px;
	vertical-align: middle;
}

.offer-tag .dis-tag span {
	color: #fff;
	font-size: 0.5rem;
	letter-spacing: 0.1rem		
}
.offer-tag div:nth-child(2) {
	margin-left: -5px;
}
.offer-tag span {
	font-size: 0.7rem
}

.offer-tag .dis-tag.for-img , 
.offer-tag .event-tag.for-img {
	padding: 0px;
	height: 36px;
	background-color: transparent !important;
}
.offer-tag .dis-tag.for-img img, 
.offer-tag .event-tag.for-img img {
	max-height: 100%;
}
.pro-img .icon {
	width: 30px;
	height: 20px;
	background-size: cover;
	float: left;
	margin-top: 10px;
	margin-left: 10px;
	z-index: 2
}
.title-bar .icon {
	width: 50px;
	height: 50px;
	margin: 0 0 0 10px;
	float: left;
	background-size: cover;
}
.btn-sub {
  background-image: url(../img/icon/black/sub.svg);
  background-size: 100% 100% !important;
  background-repeat: no-repeat;
  background-position: center center;
}

.btn-rent {
	
	margin-top: 3px;
  background-image: url(../img/icon/red/subplus.svg);
  background-size: 102% 102% !important;
  background-repeat: no-repeat;
  background-position: center center;
}

.btn-list {
	line-height: 1.5rem;
	font-size: 0.8rem !important;
	background: #fff;
	border: 1px solid transparent;
	box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.2);
}

.btn-list:hover {
	background: #fff;
	border: 1px solid transparent;
	color: #243746 !important;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
	
}

.pro-img .btn-rent {
	width: 35px;
	height: 30px;
	margin-top: 3px;
  
}
.title-bar .btn-rent {
	width: 50px;
	height: 50px;
	margin: 0 10px;
	background-size: 80% 80% !important;
	background-color: #243746
}

.title-bar .btn-sub {
	margin: 0 10px;
	background-size: 65% 65% !important;
	background-color: #FFB81C
}

.promo-ads {
	width: 100%;
	background-color: #fff;
	height: 0px;
	padding-top: calc(65% - 5px);
	border-radius: 10px;
	overflow: hidden;
	text-align: center;
	position: relative;
	cursor: pointer;
}

.double-banner {
	width: 100%;
	margin-top: 15px;	
	overflow: hidden !important;
	height: calc(45% - 10px) !important;
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-radius: 10px;
}

.double-banner div[class*=col-] {
	padding-left: 5px;
	padding-right: 5px;
	height:100%;
	overflow: hidden;
	
}

.double-banner div[class*=col-]:first-child{
	left: -5px;
}
.double-banner div[class*=col-]:last-child {
	right: -5px;
}
.campaign-banner-small {
	width: calc(100% + 10px);
	height: 0px;
	margin-left: -3px;
	padding-bottom:61%;
	overflow: hidden;
	text-align: center;
	position: relative;
	cursor: pointer;
	background-color: #fff;
	border-radius: 10px;
}

.add-right {
	margin-left: -7px
}

.campaign-banner-small img{
	width: 100%;
    flex-shrink: 0;
	transition: all 0.3s;
	vertical-align: middle;
	-o-object-fit: contain;
    object-fit: contain;
}

.campaign-banner {
	width: 100%;
	height: calc(50% - 10px);
	overflow: hidden;
	text-align: center;
	position: relative;
	cursor: pointer;
	background-color: #fff;
	border-radius: 10px;
}


.campaign-banner:hover {
	box-shadow: 0 0 10px rgb(0 0 0 / 20%);
}

.campaign-banner img {
	width: 100%;
	flex-shrink: 0;
	transition: all 0.3s;
	vertical-align: middle;
	-o-object-fit: contain;
    object-fit: contain;
}

.carousel-indicators{
	margin-bottom: 0.2rem !important;
}

.campaign-banner .carousel-indicators li {
	width: 10px;
    height: 10px;
    border-radius: 50% !important;
    background-color: #fff;
    opacity: 1
}

.campaign-banner .carousel-indicators li.active {
	background-color: #243746;
}

.campaign-banner-small:hover img, 
.campaign-banner:hover img, 
.promo-ads:hover img {
    transform: scale(1.1); /* Equal to scaleX(2) scaleY(0.5) */
    transform-origin: center;
}

.promo-ads img {
	width: 100%;
    height: 100%;
    top: 0;
    left: 0;
	vertical-align: middle;
	-o-object-fit: contain;
    object-fit: contain;
	position: absolute;
	flex-shrink: 0;
	transition: all 0.3s

}

.promo-ads h1 {
	position: absolute;
	z-index: 10;
	font-size: 0.8rem;
	color: #243746;
	top:10px;
	left: 10px;
	text-align: left;
	text-shadow: 1px 1px 0px #fff;
}

.promo-ads h1 span {
	color: #FFB81C
}
.promo-ads .counter {
	float: right;
	color: #FFB81C;
	position: absolute;
	right: 10px;
	top: 3px;

}
.promo-ads .counter span{
	border-radius: 4px;
	background-color: #FFB81C;
	color: #fff;
	font-size: 0.7rem;
	padding: 3px 2px;
	margin: 0 2px
	
}
.promo-ads .counter span.onair:before {
	width: 20px;
	height: 20px;
	padding-right: 5px;
	content: "\00A0\00A0\00A0\00A0";
	background-image: url('../img/icon/white/onair.png');
	background-repeat: no-repeat;
	background-position:0px -1px;
	background-size:15px 15px;
}
.promo-ads .play {
	width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid rgba(255, 255, 255, 0.6);
      border-bottom: 15px solid transparent;
      margin-top: -40%;
      margin-left: calc( 50% - 15px);
	position: absolute;
	z-index: 100;
	transition: all 0.3s
	
}

a:hover .promo-ads .play {
	border-left: 30px solid rgba(255, 255, 255, 1);
}

.promo-ads:first-child {
	margin-bottom: 10px;
}

.promo-ads:hover {
	box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.08);
	overflow: hidden;
	
}
.pro-info .extra {
	display: inline-flex;
	height: 18px;
	margin-top: 5px;
}
.pro-info .free-shipping {
	
	background: #243746;
	color: #FFB81C;
	margin-right: 5px;
	padding: 2px 4px;
	height: 18px;
	letter-spacing: 0.01rem;
	font-size: 0.6rem;
	border-radius: 5px;
	
}
.pro-info .free-shipping .icon {
	float: left;
	margin: 0px 6px 0 3px;
	width: 14px;
	height: 14px;
	 background-image: url(../img/icon/white/delivery.svg);
	 background-size: 14px 14px !important;
	  background-repeat: no-repeat;
	  background-position: center center;
}
.product-list .pro-info {
	width: 100%;
	height: 110px;
	margin: 0 auto ;
	position: relative;
	padding: 0 10px 6px;
	background: #ffffff;
	cursor: pointer;
	overflow: hidden;
}
.pro-info .sub-promo {
	
	background:#fff9e7;
	color: #FFB81C;
	margin-right: 5px;
	padding: 2px 4px;
	height: 18px;
	letter-spacing: 0.01rem;
	font-size: 0.6rem;
	text-align: center;
	border-radius: 5px;
}

.pro-info .charity {
	background: #FFC0CB !important;
    color: #a83f39;
    margin-right: 5px !important;
    padding: 2px 4px;
    height: 18px;
    letter-spacing: 0.01rem;
    font-size: 0.6rem;
    text-align: center;
    border-radius: 5px;
}

.pro-info h4 {
	padding-top: 6px;
	font-size: 0.5rem;
	color: #ffb81c;
	text-transform: uppercase;
	font-weight: normal
}

.pro-info h2 {
	font-size: 0.7rem !important;
	color: #243746;
	height: 1.8rem;
	line-height: 0.9rem;
	margin-top: 5px;
	padding: 0;
	overflow: hidden;
	font-weight: normal !important;
	border-bottom: none !important
}

.pro-info p {
	width: 100%;
	color: #ffb81c;
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 1rem;
	position: relative;

}
.pro-info p span, 
.pro-info p:before {
	font-size: 0.75rem;
	font-weight: normal
}

.pro-info p:before {
content: "RM";
}
.pro-info p span.per {
	font-weight: normal;
	color: #243746;
}
.pro-info .read-more {
	float: right;
	margin-top: -20px;
}
.pro-info .read-more img {
	width: 20px;
}
.pro-info p .tag {
	float: right;
	padding-top: 9px;
	line-height: 0.5rem;
	font-size: 0.5rem;
	font-weight: normal;
	text-transform: uppercase;
	color: #ffb81c;
}

.product-list .btn {
	width: 100%;
	margin: 0 auto;
	font-size: 0.8rem;
	line-height: 25px;
	text-align: center;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
}
.product-list:hover .btn {
	color: #ffb81c !important;
	background-color: #243746;

}

.howto {
	background-color: #ffb81c;
	margin: 20px auto 0;
}

.brand h2, 
.howto h2 {
	padding: 20px 0;
	text-align: center;
	font-size: 1.2rem;
	color: #243746;
}

.howto.event h2{
	font-size: 1.5rem;
	font-weight: lighter;
}

.howto .row {
	padding-bottom: 50px;
}

.campaign .howto .row {
	padding-bottom: 20px;
}

.howto .row div[class^=col] {
	text-align: center;

}

.campaign .banner .countdown {
	width: 100%;
	align-items: center;
	margin:  10px auto 0;
	position: absolute;
	bottom: 20px;
	/*background: rgba(0, 0, 0, 0.5);*/
	text-align: center !important;
}
.campaign .banner .countdown > p {
	font-size: 1.8rem;
	font-weight: bold;
	color: #fff;
	text-shadow: 5px 5px 10px black;
}
.campaign .banner .countdown .days {
	display: inline-block;
	margin: 0 auto;
	width: 120px;
	text-align: center;
	margin-right: 2rem;
	color: #fff;
	text-shadow: 5px 5px 10px black;
}

.campaign .banner .countdown:after {
	clear: both
}
.campaign .banner .countdown .days p {
	font-weight: bold;
	width: 100%;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 5px;
	font-size: 4rem;

}

.campaign .banner .countdown .days span {
	font-size: 0.8rem;
	line-height: 0 !important;
	text-shadow: 5px 5px 10px black;
}

.campaign .howto {
	background-color: rgba( 255, 255, 255, 0.5) !important;
}

.step-circle {
	margin: 0 auto 20px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: #ffb81c;
	background-size: cover
}

.step-circle.icon-step1 {
	background-image: url(../img/icon/white/edit-profile.png);
  	background-size: 80px 80px;
  	background-repeat: no-repeat;
  	background-position: center center;
}
.step-circle.icon-step2 {
	background-image: url(../img/icon/white/cart.png);
  	background-size: 80px 80px;
  	background-repeat: no-repeat;
  	background-position: center center;
}
.step-circle.icon-step3 {
	background-image: url(../img/icon/white/delivery.png);
  	background-size: 80px 80px;
  	background-repeat: no-repeat;
  	background-position: center center;
}
.howto .row div[class^=col] h3 {
	font-size: 1rem;
	font-weight: bold;
	color: #243746
}

.howto .row div[class^=col] h3 span {
	float: left;
	font-size: 0.9rem;
	font-weight: normal;
	color: #999
}

.howto .row div[class^=col] p {
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 0.8rem;
	line-height: 0.9rem
}

.howto .btn {
	min-width: 200px;
	margin-left: 5px;
	margin-right: 5px;
}

.whole-box.event {
	background: transparent;

}
.catergeries-d .nav-item {
	margin-bottom: 0 !important
}

.howto.event .row div[class^=col] {
	border-radius: 10px;
	padding: 10px;
}

.event-cont {
	width: 100%;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 10px;
	padding: 10px;
	display: flex;
	align-items: center;
}
.event-cont .steps {
	width: 100%;
}

.event-cont .steps img {
	max-width: 80%
}

.col-md-12 .event-cont .steps {
	width: 50%;
	float: right;
	margin-right: 0;
	margin-left: auto
}

.event-cont .txt-cont {
	float: right;
	position: absolute;
	width: 50%;
	right: 40px;
	text-align: left;
	z-index: 10

}

.col-md-12 .event-cont .txt-cont {
	float:left;
	left: 40px;
}
.howto .row div[class^=col] .txt-cont h3 {
	font-size: 2rem;
	color: #243746;
	line-height: 1.3rem
}
.howto .row div[class^=col] .txt-cont h3 span {
	font-size: 1.5rem;
	float: none;
	font-weight: 700;
	color: #243746;
	text-transform: uppercase;
}

.howto .row div[class^=col] .txt-cont h4 {
	font-size: 1.1rem;
	font-weight: normal;
	color: #ffb81c
}
.tnc {
	padding: 15px 0 25px;
	background-color: #eee;
}
.tnc-cont h4 {
	font-size: 0.7rem;
	color: #999;
	font-weight: normal;
	text-align: center;
	float: center;
	padding: 10px 20px;


}
.tnc-cont hr.left {
	width: calc((100% - 25%) / 2);
	float: left
}
.tnc-cont hr.right {
	width: calc((100% - 25%) / 2);
	float: right
}

.tnc-cont ul {
	width: 100%;
	margin:0;
	list-style: none;
	padding: 0 0 0 20px
}
.tnc-cont ul li {
	font-size: 0.8rem;
	color: #666;
	line-height: 1rem;
	margin-top: 10px;
	text-align: justify
}
.tnc-cont ul li ul {
	padding: 0 0 0 20px
}
.tnc-cont ul li span {
	font-size: 0.9rem;
	font-weight: 700;
	color: #243746
	
}

.tnc-cont ul li:before {
	content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  	color: #ffb81c; /* Change the color */
  	font-weight: bold; /* If you want it to be bold */
  	display: inline-block; /* Needed to add space between the bullet and the text */
  	width: 1em; /* Also needed for space (tweak if needed) */
  	margin-left: -1em;
  	margin-right: -5px;
}


.tnc-cont .info ul {
	margin:0;
	list-style: none;
	padding: 0 0 0 20px !important
}
.tnc-cont .info ul li {
	font-size: 0.8rem;
	font-weight: normal !important;
	color: #666;
	line-height: 1rem;
	margin-top: 10px;
	text-align: justify
}
.tnc-cont .info ul li ul {
	padding: 0 0 0 20px
}
.tnc-cont .info ul li span {
	font-size: 0.9rem;
	font-weight: 700;
	color: #243746
	
}

.tnc-cont .info ul li:before {
	content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  	color: #ffb81c; /* Change the color */
  	font-weight: bold; /* If you want it to be bold */
  	display: inline-block; /* Needed to add space between the bullet and the text */
  	width: 1em; /* Also needed for space (tweak if needed) */
  	margin-left: -1em;
  	margin-right: -5px;
}
.catergeries-d .col-3 {
	margin-bottom: 0px;
}
@media only screen and (max-width: 960px) {
	.campaign .banner .countdown {
		width: 100%;
		align-items: center;
		bottom: -5px;
		margin:  10px auto 0;
		text-align: center !important;
	}
	.campaign .banner .countdown > p {
		font-size: 1rem;
		font-weight: bold;
		color: #fff;
		text-shadow: 5px 5px 10px black;
	}
	.campaign .banner .countdown .days {
		display: inline-block;
		margin: 0 auto;
		width: 50px;
		text-align: center;
		margin-right: 0.5rem;
		line-height: 40px;
		color: #fff;
		text-shadow: 5px 5px 10px black;

	}

	.campaign .banner .countdown:after {
		clear: both
	}
	.campaign .banner .countdown .days p {
		font-weight: bold;
		width: 100%;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 5px;
		font-size: 1.8rem;
		line-height: 2rem;
	}
	.campaign .banner .countdown .days span {
		font-size: 0.8rem;
		line-height: -0.5 !important;
		text-shadow: 5px 5px 10px black;
	}
}
@media only screen and (max-width: 728px) {
	.col-md-12 .event-cont .steps {
		width: 100%;
		float: none;
		margin-right: auto;
		margin-left: 0;
		overflow: hidden;
		text-align: left
	}
	.col-md-12 .event-cont .steps img {
		text-align: left;
		margin-left: -90px
	}

	.col-md-12 .event-cont .txt-cont {
		float:right;
		left: auto;
		right: 10px;
	}
	.event-cont .txt-cont {
		float:right;
		
		right: 10px;
	}
	.product div[class^=col-] {
		padding: 0 10px 5px
	}
	.howto .row div[class^=col] .txt-cont h3 {
		font-size: 1.5rem;
		color: #243746;
		line-height: 1rem
	}
	.howto .row div[class^=col] .txt-cont h3 span {
		font-size: 1rem;
		float: none;
		font-weight: 700;
		color: #243746;
		text-transform: uppercase;
	}

	.howto .row div[class^=col] .txt-cont h4 {
		font-size: 0.8rem;
		font-weight: normal;
		color: #ffb81c
	}
	.howto .row div[class^=col] p {
		padding-top: 10px;
	    padding-bottom: 10px;
	    font-size: 0.6rem;
	    line-height: 0.7rem;
	}

	.product-list.img-only .pro-img {
		padding-bottom: 90%
	}
	
	.double-banner, 
	.campaign-banner {
		height: auto !important;
		margin-bottom: 8px;
	}
	.double-banner div[class*=col-]{
		padding: 0 5px !important

	}
	.campaign-banner-small {
		width: calc(100% + 20px)
	}
	.campaign .banner .countdown {
		width: 100%;
		align-items: center;
		bottom: -5px;
		margin:  10px auto 0;
		text-align: center !important;
	}
	.campaign .banner .countdown > p {
		font-size: 0.7rem;
		font-weight: bold;
		color: #fff;
		text-shadow: 5px 5px 10px black;
	}
	.campaign .banner .countdown .days {
		display: inline-block;
		margin: 0 auto;
		width: 40px;
		text-align: center;
		margin-right: 0.5rem;
		line-height: 15px;
		color: #fff;
		text-shadow: 5px 5px 10px black;

	}

	.campaign .banner .countdown:after {
		clear: both
	}
	.campaign .banner .countdown .days p {
		font-weight: bold;
		width: 100%;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 5px;
		font-size: 1.2rem;
		line-height: 1.4rem;
	}
	.campaign .banner .countdown .days span {
		font-size: 0.5rem;
		line-height: -0.5 !important;
		text-shadow: 5px 5px 10px black;
	}
}


.MultiCarousel { 
	float: left;
	overflow: hidden;
	padding: 0px;
	width: 100%;
	position:relative;
	margin-bottom: 0px;
	height: 285px;
}
.MultiCarousel .MultiCarousel-inner {
	transition: 1s ease all;
	float: left;
}
.MultiCarousel .MultiCarousel-inner .item {
	float: left;

}
.MultiCarousel .MultiCarousel-inner .item > div {
	text-align: center;
	padding:10px;
	margin:10px;
	margin-left:20px;
	color:#666;
}
.MultiCarousel .MultiCarousel-inner .item > div img {
	max-width: 100%;
}
.leftLst, .rightLst {
	width: 30px;
	height:3px;
	background-color: #ccc;
	position:absolute;
	
	border: 0px;
	bottom: 0px;
	
	
}
.leftLst {
	left:calc(50% - 30px);
}

.rightLst {
	right:calc(50% - 30px);
}
.leftLst:focus, .rightLst:focus {
	border-style: none;
	border: 0;
	outline: none;
}

.leftLst.over, .rightLst.over {
	pointer-events: none;
	background-color: #ffb81c;
}

.highlight-cat {
	width: 100%;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 10px;
	padding: 15px 0 ;
	background-image: url(https://subplace.com/assets/images/others/banner-sub.png);
	background-size: auto 110%;
	background-repeat: no-repeat;

}


.highlight-cat h1 {
	font-size: 1rem;
	color: #ffb81c;
}
.highlight-cat h1 span {
	color: #243746;
}

.highlight-cat p {
	font-size: 0.8rem;
	color: #fff;
	padding-bottom: 10px;
	line-height: 0.9rem
}

.highlight-cat .btn-red {
	font-size: 0.7rem;
	padding: 4px 30px;
	border-radius: 30px;
	position: absolute;
	bottom: 0
}

.highlight-cat .sm-pro-list {
	width: 100%;
	height: calc(100vw / 12);
	border-radius: 10px;
	background: #fff;
	border: 1px solid #eee;
	overflow: hidden;
	text-align: center;
	cursor: pointer;
}

.highlight-cat .sm-pro-list img {
	max-height: 100%;
	transition: all 0.3s;
	cursor: pointer;
}
.highlight-cat .sm-pro-list:hover img {
	transform: scale(1.1);
	transform-origin: center
}
.highlight-cat .sm-pro-list:hover .price-tag {
	background-color: #ffb81c;
}
.highlight-cat .sm-pro-list .price-tag {
	width: 70%;
	position: absolute;
	float: right;
	right: 0px;
	bottom: -5px;
	background-color: #243746;
	border-radius: 5px;
	color: #fff;
	text-align: center;
	font-size: 1rem;
	transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    z-index: 100;
    cursor: pointer;

}

.highlight-cat .sm-pro-list .price-tag:before {
	content: "RM";
	font-size: 0.7rem
}

.highlight-cat .sm-pro-list .price-tag span {
	font-size: 0.7rem
}

.contain div > h2 {
	font-size: 0.9rem;
	padding-bottom: 8px;
	
}
.campaign .row > .tittle img{
	
	max-width: 100%;
}
.campaign .row > .tittle {
	text-align: center !important;
}
.campaign .row > .tittle h2{
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.5);
	
}

.campaign .contain > .row > div[class*=col-] > h2 {
	
	border-radius: 10px;
	padding-left: 0px;
	overflow: hidden;
	padding-top: 10px;
	color: #243746;
	
}
.contain div > p.right-link a {
	float: right;
	margin-top: -45px;
	font-size: 0.7rem;
	color: #243746
}

.contain div > p.right-link .tag {
	float: right;
	margin-top: -1.3rem;
	padding-left: 20px;
	padding-right: 20px;
}
.contain div > p.right-link > a img{
	max-width: 25px;
	margin-left: 5px;
	margin-right: 5px;
}

@media only screen and (max-width: 728px) {
	.highlight-cat {
		background: #fff !important;
		min-height: 100px;
	}
	.highlight-cat div:first-child[class^=col] {
		margin-right: -15px
	}
	.highlight-cat div[class^=col]{
		padding-right: 0
	}
	.highlight-cat .sm-pro-list {
		width: 100%;
		height: calc(100vw / 8);
		border-radius: 10px;
		background: #eee;
	}
	.highlight-cat .sm-pro-list .price-tag {
		width: 80%;
		float: right;
		background-color: #243746;
		border-radius: 5px;
		color: #fff;
		padding: 0px 1px;
		text-align: center;
		font-size: 0.8rem;
		right:-10px;
		bottom: 0px;
	}

	.highlight-cat .sm-pro-list .price-tag:before {
		content: "RM";
		font-size: 0.5rem
	}

	.highlight-cat .sm-pro-list .price-tag span {
		font-size: 0.5rem
	}
	.highlight-cat p {
		font-size: 0.7rem;
		color: #999;
		padding-bottom: 5px;
		line-height: 0.8rem
	}
	.login-pg .carousel-item img {
		max-width: 100%
	}
}

footer h2 {
	padding-top: 30px;
	padding-bottom: 30px;
	color: #777;
	font-size: 1rem;
	line-height: 0.8rem;
	font-weight: 500
}
footer h6 {
	padding-top: 10px;
	padding-bottom: 10px;
	color: #777;
	font-size: 1rem;
	line-height: 0.8rem;
	font-weight: 500
}

footer h2 span {
	font-size: 0.7rem
}
footer  p
 {
	font-size: 0.7rem;
	color: #999;
	line-height: 0.8rem
}
footer  a p{
	color: #999;
	padding-bottom: 8px;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}

footer  a:hover p{
	color: #243746;
}

footer .btn-red {
	margin-top: 20px;
	font-size: 0.6rem;
	letter-spacing: 0.2rem;
	line-height: 1rem;
	color: #ffffff;
	text-transform: uppercase;
}

footer .btn-red .icon {
	width: 20px;
	height: 20px;
	margin-top: -2px;
	background-size: cover;
	float: left;
	margin-right: 10px;
}

footer .btn-red .icon-chat {
  background-image: url(../img/icon/white/chat.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
footer .btn-red:hover .icon-chat {
  background-image: url(../img/icon/red/chat.png);
  
}
ul.social {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	list-style-type: none
}

ul.social li {
	float: left;
	padding-right: 10px;
}

ul.social li .icon {
	width: 35px;
	height: 35px;
	background-size: cover;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	
}
.icon-fb {
  background-image: url(../img/icon/red/fb.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
a:hover .icon-fb {
	background-image: url(../img/icon/black/fb.png);
}

.icon-google {
  background-image: url(../img/icon/red/google.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
}

a:hover .icon-google {
	background-image: url(../img/icon/blackyoutube.png);
}

.icon-ig {
  background-image: url(../img/icon/red/ig.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
}

a:hover .icon-ig {
	background-image: url(../img/icon/black/ig.png);
}

.icon-in {
  background-image: url(../img/icon/red/in.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
}

a:hover .icon-in {
	background-image: url(../img/icon/black/in.png);
}

.icon-tw {
  background-image: url(../img/icon/red/tw.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
a:hover .icon-tw {
	background-image: url(../img/icon/black/tw.png);
}

.icon-yt {
  background-image: url(../img/icon/red/youtube.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
a:hover .icon-yt {
	background-image: url(../img/icon/black/youtube.png);
}
.devices-view {
	display: none
}

.line {
	height: 1px;
	width: 100%;
	margin: 20px auto;
	background-color: #eeeeee;
}

@media only screen and (max-width: 980px) {
	footer h2 {
		padding-top: 20px;
		padding-bottom: 20px;
		color: #243746;
		font-size: 1rem;
		line-height: 0.8rem
	}
	
	.nav-item .icon {
		margin-right: 0px
	}
	.howto .btn {
		min-width: 150px;
		margin-left: 5px;
		margin-right: 5px;
	}
}

.contain.login-xs {
	width: 100%;
	max-width: 100%;
	position: absolute;
	margin: 45px auto 45px auto;
	right: auto;
	left: auto;
	top: 0;
	z-index: 1
}


.contain.login-xs.sign-up{
	width: 100%;
	max-width: 100%;
	position: relative;
	margin: 0 auto;
	padding-top: 50px;
	padding-bottom: 50px;
	right: 0;
	top: 0;
	z-index: 1
}

.contain.login-xs .notice {
	font-size: 0.75rem;
	color: #999;
	text-align: center;
	line-height: 0.8rem;
	padding-top: 0px;
	padding-bottom: 50px;
}
.login-pg {
	padding: 0;
}
.login-pg .slide {
border-radius: 0
}
.login-pg .carousel-item {
  height: 450px;
}

.login-pg .carousel-item img.d-block {
	margin: 0 auto;
}

.sign-up h3 {
	text-align: center;
	font-size: 0.9rem !important;
	padding-bottom: 20px
}
p.highlight {
	color: red !important;
	font-size: 0.7rem !important
}
.sign-up .icon {
	width: 100px;
	height: 100px;
	margin: 20px auto 10px;
	border-radius: 50%;
	background-color: #eee
}

.sign-up .icon-user {
    background-image: url(../img/icon/black/user.png);
    background-size: 90px 90px;
    background-repeat: no-repeat;
    background-position: center center;

}

.sign-up .icon-protection {
    background-image: url(../img/icon/black/protection.png);
    background-size: 90px 90px;
    background-repeat: no-repeat;
    background-position: center center;
}

.sign-up .key-protect {
    background-image: url(../img/icon/black/key-protect.png);
    background-size: 90px 90px;
    background-repeat: no-repeat;
    background-position: center center;
}


.login-xs .login-box {
	max-width: 400px;
	margin:0 auto 10px auto;
	background-color: #ffffff;
	min-height: 350px;
	margin-left: calc(100vw - 46%);
	padding: 10px 20px;
}

.sign-up .login-box {
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
	margin: 0 auto !important;
}

.login-box .nav-link {
	background: #ffffff;
	color: #243746;
	font-weight: 700;
	border-bottom: 3px solid transparent;
	padding-right: 0;
	padding-left: 0;
	margin-right: 10px;
	margin-left: 10px;
	font-size: 0.7rem;
	margin-bottom: 10px;
	border-radius: 0 !important;
}
.login-box li:first-child .nav-link {
	margin-left: 5px;
}
.login-box li:last-child .nav-link {
	margin-right: 5px;
}
.login-box {
	border-radius: 10px !important;
}
.login-box .nav-link.active {
	background: #ffffff;
	color: #243746;
	font-weight: bold;
	border-radius: 0 !important;
	border-bottom: 3px solid #ffb81c;
	margin-bottom: 10px;
}
.input-group-prepend .input-group-text,
.login-box  .input-group-prepend .input-group-text {
	border-top-left-radius: 50%;
	border-bottom-left-radius: 50%;
	padding-left: 15px;
}
.input-group-append .input-group-text, 
.input-group-prepend .input-group-text{
	height: 2.5rem
}

.input-group-append .input-group-text {
	border-top-right-radius: 50%;
	border-bottom-right-radius: 50%;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
}

.login-box .input-group {
	background-color: #f5f5f5;
    border: 1px solid #f5f5f5;
    margin-top: 6px;
    margin-right: 0;
    margin-left: 0;
    border-radius: 20px;
    transition: all 0.3s;
}

.login-box .input-group label{
	width: 100%;
	font-size: 0.7rem;
    margin-bottom: 0;
    margin-top: 10px;
    margin-left: 15px;
    color: #aaa;
    display: block
}


.veri-num .form-control {
	width: 2.5rem;
	text-align: center;
	line-height: 4rem;
	font-weight: lighter;
	color: #243746;
	height: 4rem;
	font-size: 2rem;
	margin-left: 0;
	padding: 0.375rem 0.5rem;
}

.veri-num .form-control::placeholder {
	color: #243746 !important;
}

.promocode .form-control {
	width: 20rem !important;
	margin: 0 auto !important;
	padding: 0 !important;
	font-weight: 300;
	font-size: 1.8rem
	
}

.promoCode {
	margin-top: 2rem;
	margin-bottom: 3rem
}

.promoCode img {
	width: 8rem
}

.login-box .input-group-text {
	background: transparent;
    border: 0px solid #eeeeee;
}

.login-box .input-group-append .input-group-text, .login-box .input-group-prepend .input-group-text {
	height: 36px !important;
}
.input-group-append {
	margin-left: 10px !important;
}
.input-group .form-group {
	height: 30px !important;
	width: calc(100% - 40px)
}

.login-box .btn{
	margin-top: 0px;
	width: 100%;
}
#signup .btn{
	margin-top: 0px;
}

.login-box h3 {
	font-size: 0.7rem;
	font-weight: 700;
	color: #243746;
	line-height: 1.4rem;
	padding-top: 10px;
}
.login-box .custom-control-label {
	font-size: 0.75rem !important;
	color: #999
}
#login p {
	font-size: 0.8rem;
	margin-top: 10px;
}

.login-box p a {
	color: #243746;
	text-decoration: underline;
}

.login-box p a:hover {
	color: #243746;
}
a.btn-red {
	color: #ffffff;
}
#login .input-group {
	padding-top: 0px;
}

.resetpw h2 {
	font-size: 1.1rem;
	margin-top: 20px;
	margin-bottom: 20px;
}

.resetpw p {
	font-size: 0.8rem;
	line-height: 0.9rem;
	text-align: center;
	margin-top: 10px
}

.resetpw .input-group {
	padding-top: 40px
}

.login-box .warning-txt {
	color: #ffb81c;
	text-align: left;

}


@media only screen and (max-width: 980px) {
	.login-pg .carousel-item {
		height: auto;
	}
	.login-pg .carousel-indicators {
		bottom: 25px;
	}
	.contain.login-xs {
		width: calc(100% - 5%);
		position: relative;
		z-index: 2;
		margin: -30px auto 20px;
		right: auto;
		padding-right: 0px;

	}
	.contain.login-xs.sign-up{
		width: 100%;
		max-width: 100%;
		position: relative;
		margin: 0 auto;
		right: 0;
		top: 0;
		z-index: 1;
		padding-right: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
	}
	.login-xs .login-box {
		max-width: calc(100% - 5%);
		margin: 0 auto 0 auto;
		background-color: #ffffff;
		height: auto;
		border-radius: 20px;
		padding: 10px 20px;
	}
	.sign-up .login-box {
		width: 100%;
		max-width: 100%;
		border-radius: 0;
		margin: 0 auto;
		box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2)
	}
	.login-box .tab-content {
		width: 90%;
		margin: 0 auto;
	}
	.sign-up .login-box .tab-content {
		width: 100%;
		margin: 0 auto;
	}
	.resetpw .input-group {
		width: 90%;
		margin: 0 auto;
	}
	.login-box .warning-txt {
		width: 90%;
		margin: 0 auto;

	}
	.resetpw .btn-bottom {
		width: 90%;
		margin: 0 auto;
	}
}
.inner-page {
	width: 100%;
	margin: 0 auto;
	position: relative;
}

.inner-page h2 {
	font-size: 0.7rem;
	font-weight: bold;
	line-height: 1.5rem;
	padding-bottom: 10px;
}

.wrapper {
    width: 100%;
    margin: 0 auto;
	position: relative;
    align-items: stretch;
    overflow-x: hidden;
    display: flex;
}
.inner-page .sidebar {
	position: relative;
	padding-right: 0;
	padding-left: 0;
	background: #fff;
	border-right: 1px solid #eee;
	border-left: 1px solid #eee;
	flex: 0 0 25%;
	max-width: 25%;
	transition: all 0.3s !important;
	flex-shrink:0;
}
.sidebar .my-account {
	width: 100%;
	margin: 10px auto 0;
	padding: 0;
	list-style-type: none
}

.sidebar .my-account li {
	width: 100%;
	margin: 0 auto 10px;
	padding: 0;
	position: relative;
}

.sidebar .my-account li a p {
	font-size: 0.8rem;
	font-weight: normal;
	padding: 10px;
	text-align: left;
}
.sidebar .my-account li a p i {
	margin-right: 10px
}

.sidebar .my-account li a p span.number {
	float: right;
	background-color: #ffb81c;
	color: #fff;
	padding: 3px;
	margin-top: 0px;
	font-size: 0.6rem;
	border-radius: 10px;
}
.sidebar .my-account li.active a p {
	color: #ffb81c;
	font-weight: bold;
	background-color: #243746
}
.sidebar .my-account li.signout a p {
	color: #ffb81c;
}

.sidebar .my-account li a:hover p {
	background-color: #243746
}
#content2 {
	width: calc(100% - 25%);
	margin: 0 auto 20px;
	padding-right: 15px;
	padding-left: 15px;
	flex-grow:1;
	transition: all 0.3s !important;
}

#content2.active {
	width: calc(100% - 60px);
	
}

#content3 {
	width: calc(100% - 25%);
	margin: 0 auto 20px;
	padding-right: 15px;
	padding-left: 15px;
	flex-grow:1;
	transition: all 0.3s !important;
}

#content3.active {
	width: calc(100% - 60px);
	
}
#content {
	width: calc(100% - 25%);
	margin: 0 auto 20px;
	padding-right: 15px;
	padding-left: 15px;
	flex-grow:1;
	transition: all 0.3s !important;
}

#content.active {
	width: calc(100% - 60px);
	
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
.my-account li #sidebarCollapse h2 {
	font-size: 1rem;
	font-weight: 700;
	padding: 10px 15px 0 15px;
}
.my-account li #sidebarCollapse.is-active h2 {
	padding-top: 30px;
	border-bottom: 2px solid #ffb81c;
}
.my-account li #sidebarCollapse h2:after {
	content: " ";
	background-image: url(../img/icon/black/back.png);
    background-size:20px 20px;
    background-repeat: no-repeat;
    background-position: center bottom;
    position: absolute;
    
    display: inline-block;
    width: 30px; 
    height: 30px;
    margin-top: -7px;
    margin-bottom: 10px;

    right: 10px;
}

.my-account li #sidebarCollapse.is-active h2:after{
	content: " ";
	background-image: url(../img/icon/black/list.png);
    background-size:20px 20px;
    background-repeat: no-repeat;
    background-position: center bottom;
    position: absolute;
    display: inline-block;
    width: 30px;
    height: 30px;
	right: 15px;
	top: 0px;
	text-align: center;
}

#sidebar.active {
    min-width: 60px;
    max-width: 60px;
    text-align: center;
}

#sidebar.active li a h2 span, 
#sidebar.active li a p span {
    display: none
}

#sidebar.active ul li a i {
    margin-right:  0;
    display: block;
    font-size: 1.2em;
    margin-bottom: 5px;
    text-align: center;
}

#sidebar.active .dropdown-toggle::after {
    top: auto;
    bottom: 10px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}

#sidebar .my-account li a p b {
    display: none;
}
#sidebar.active .my-account li a p b {
  	width: 8px;
   	height: 8px;
   	top: 5px;
   	left: 35px;
   	border-radius: 50%;
   	float: right;
   	position: absolute;
   	background-color: #ffb81c;
   	display: block;
}

#sidebar2.active {
    min-width: 60px;
    max-width: 60px;
    text-align: center;
}

#sidebar2.active li a h2 span, 
#sidebar2.active li a p span {
    display: none
}

#sidebar2.active ul li a i {
    margin-right:  0;
    display: block;
    font-size: 1.2em;
    margin-bottom: 5px;
    text-align: center;
}

#sidebar2.active .dropdown-toggle::after {
    top: auto;
    bottom: 10px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}
#sidebar3.active {
    min-width: 60px;
    max-width: 60px;
    text-align: center;
}

#sidebar3.active li a h2 span, 
#sidebar3.active li a p span {
    display: none
}

#sidebar3.active ul li a i {
    margin-right:  0;
    display: block;
    font-size: 1.2em;
    margin-bottom: 5px;
    text-align: center;
}

#sidebar3.active .dropdown-toggle::after {
    top: auto;
    bottom: 10px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}


@media (max-width: 768px) {
    /* 80px and its content aligned to centre. Pushing it off the screen with the
       negative left margin
    */
    .sidebar.shipping {
    	display: none
    }
    .sidebar {
    	max-width: 60px !important;
    	transition: all 0.3s !important;
    }
    .sidebar li a h2 span, 
    .sidebar li a p span {
    	display: none;
    	transition: all 0.3s !important;
    }

    .sidebar li a p i.subicon {
    	margin-right:  0;
    	margin-left: 10px !important;
    	display: inline-block;
    	font-size: 1.2em;
    	margin-bottom: 0px;
    	text-align: center !important;
    }

    .sidebar {
        margin-left: 0;
        transition: all 0.5s !important;
    }
    #sidebar.active {
        min-width: 250px !important;
        max-width: 250px !important;
        margin-left: 0px !important;
        top: 0;
        height: 100vh;
        position: fixed;
        z-index: 99;
    	overflow: scroll;
        text-align: left;
    }
    #sidebar.active li a h2 span, 
    #sidebar.active li a p span {
    	display: inline-block;
    }

    #sidebar2.active {
        min-width: 250px !important;
        max-width: 250px !important;
        margin-left: 0px !important;
        top: 0;
        height: 100vh;
        position: fixed;
        z-index: 9999;
    	overflow: scroll;
        text-align: left;
    }
    #sidebar2.active li a h2 span, 
    #sidebar2.active li a p span {
    	display: inline-block;
    }
    #sidebar3.active {
        min-width: 250px !important;
        max-width: 250px !important;
        margin-left: 0px !important;
        top: 0;
        height: 100vh;
        position: fixed;
        z-index: 99;
    	overflow: scroll;
        text-align: left;
    }
    #sidebar3.active li a h2 span, 
    #sidebar3.active li a p span {
    	display: inline-block;
    }
    #sidebar.active .my-account li a p b {
    	display: none;
    }
    #sidebar .my-account li a p b {
    	width: 8px;
    	height: 8px;
    	top: 5px;
    	left: 35px;
    	border-radius: 50%;
    	float: right;
    	position: absolute;
    	background-color: #ffb81c;
    	display: block;
    }
    #sidebar.active .my-account li a p {
		font-size: 0.8rem;
		font-weight: normal;
		padding: 10px;
		text-align: left;
	}
	#sidebar.active li a p i {
		
		margin-right: 10px !important;
		text-align: left;
		display: inline-block;
	}

	#sidebar.active li a p i:after {

		background-position: 0 2px
	}

	#sidebar2.active li a p i {
		
		margin-right: 10px !important;
		text-align: left;
		display: inline-block;
	}

	#sidebar2.active li a p i:after {

		background-position: 0 2px
	}

	#sidebar3.active li a p i {
		
		margin-right: 10px !important;
		text-align: left;
		display: inline-block;
	}

	#sidebar3.active li a p i:after {

		background-position: 0 2px
	}

	#sidebar.active .my-account li #sidebarCollapse h2 {
		padding-top: 0px !important;
		border-bottom: 0px solid #ffb81c;
	}

    .my-account li #sidebarCollapse h2 {
		padding-top: 30px;
		border-bottom: 2px solid #ffb81c;
	}

	#sidebar.active .my-account li #sidebarCollapse h2:after{
		content: " ";
		background-image: url(../img/icon/black/back.png);
	    right: 10px
	}

    .my-account li #sidebarCollapse h2:after{
		content: " ";
		background-image: url(../img/icon/black/list.png);
	    background-size:20px 20px;
	    background-repeat: no-repeat;
	    background-position: center bottom;
	    position: absolute;
	    display: inline-block;
	    width: 30px;
	    height: 30px;
		right: 15px;
		top: 0px;
		text-align: center;
	}


    .dropdown-toggle::after {
        top: auto;
        bottom: 10px;
        right: 50%;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }
    #content {
    	width: calc(100% - 60px);
    	margin: 0 auto 20px;
    	padding-right: 15px;
    	padding-left: 15px;
    	transition: all 0.3s !important;
    }

    #content.active {
    	width: calc(100% - 250px);
    	margin: 0 auto;
    	padding-left: 15px;
    	padding-right: 15px;
    	transition: all 0.3s !important;

    }
    #sidebar .collapse {
		display: none
	}
	#content2 {
    	width: calc(100% - 60px);
    	margin: 0 auto 20px;
    	padding-right: 15px;
    	padding-left: 15px;
    	transition: all 0.3s !important;
    }

    #content2.active {
    	width: calc(100% - 250px);
    	margin: 0 auto;
    	padding-left: 15px;
    	padding-right: 15px;
    	transition: all 0.3s !important;

    }
    #sidebar2 .collapse {
		display: none
	}
	#content3 {
    	width: calc(100% - 60px);
    	margin: 0 auto 20px;
    	padding-right: 15px;
    	padding-left: 15px;
    	transition: all 0.3s !important;
    }

    #content3.active {
    	width: calc(100% - 250px);
    	margin: 0 auto;
    	padding-left: 15px;
    	padding-right: 15px;
    	transition: all 0.3s !important;

    }
    #sidebar3 .collapse {
		display: none
	}
}

.page-title {
	width: 100%;
	margin: 0 auto 0;
	position: relative;
	padding-top: 10px;
}
.page-title .line {
	margin: 0;
	margin-bottom: 10px;
}
.page-title h1 {
	font-size: 1.2rem;
	margin-bottom: 0;
	text-shadow: 2px 0px 2px rgba(255, 255, 255, 0.9)
}

.page-title h1 span {
	color: #999999;
	font-size: 0.7rem;
	font-weight: normal;
	font-family: 'Roboto', sans-serif;

}

.page-title .breadcrumb {
  padding: 0 0 10px;
  margin-bottom: 0;
  list-style: none;
  background-color: transparent;
}
ul.breadcrumb li {
  display: inline;
  color: #000;
  font-size: 0.7rem;
  line-height: 2rem;
}
ul.breadcrumb li a {
	text-decoration: underline;
}
ul.breadcrumb li+li:before {
  padding: 0 15px;
  font-size: 1rem;
  color: black;
  line-height: 0rem;
  font-weight: bold;
  content: "\00B7";
}

ul.breadcrumb li.active {
	color: #ffb81c;
}

.cate-banner {
	margin-top: 15px;
}

.cate-banner img {
	max-width: 100%;
}
.shop-links, 
.product-filter, 
.side-sp {
	float: right;
	top: 0;
	position: absolute;
	right: 0;
	padding: 0;
}

.side-sp .friend {
	position: relative;
	width: 130px;
	text-align: right;
	margin-top: 15px;
}
.side-sp .friend p {
	width: calc(100% - 30px);
	float: left;
	font-size: 0.8rem;
	line-height: 0.9rem;
	padding-top: 3px;
	padding-right: 10px
}
.side-sp .friend i {
	width: 30px;
	height: 30px;
	float: right;
	top: 0
}

.verlist {
	width: 100%;
}

.verlist h3 {
	font-size: 0.7rem;
	font-weight: bold;
	
}
.verlist .table p {
	font-size: 0.7rem;
	line-height: 0.8rem;
}
.verlist .table {
	margin-bottom: 0;
}
.verlist .table td {
	padding: 0.5rem;
}

.verlist .table thead, 
.verlist .table tbody {
	border: 1px solid #eeeeee
}
.verlist .table thead {
	border-bottom: 0px;
}
.verlist .table .space{
	border: 0px;
}

.verlist .table .space td {
	height: 8px !important; 
	font-size: 0
}
.verlist .table tbody {
	border-top: 0px;
}

.verlist .table th {
	font-size: 0.7rem;
	font-weight: bold;
	padding: 0.5rem 0.5rem 0;
}
.verlist .table .thumb {
	width: 60px;
	height: 60px;
	margin: 0 auto;
	overflow: hidden;
	background-color: #eeeeee
}

.verlist .table .item-quantity {
	border: 1px solid #999999;
	color: #999999;
	padding: 5px;
}


.verlist .table .total {
	text-align: center
}


.verlist .btn {
	font-size: 0.7rem;
	padding: 4px 8px;
}

.verlist .price {
	font-size: 0.8rem;
	font-weight: bold;
	padding-bottom: 5px;
}
.verlist .price:before {
	content: "RM "
}

.verlist .table .signup {
	font-size: 0.6rem;
	color: #999999;
	margin-top: 10px;
}
.address h2 {
	padding-bottom: 0
}
.address div[class^=col-] {
	margin-bottom: 10px;
}


.address-view h1 {
	font-size: 0.6rem !important;
	line-height: 0.6rem !important;
	margin-top: 0px;
	margin-bottom: 10px;
	color: #999 !important;
	font-weight: normal !important;
}
.address-view h2 {
	padding-bottom: 0 !important;
}
.address-view p {
	font-size: 0.7rem;
	line-height: 0.8rem
}

.address-view .phone {
	padding: 10px 0 !important;
}

.inner-page .btn-black-line {
	font-size: 0.8rem ;
	color: #243746 !important
}

.inner-page .btn-black-line:hover {
	color: #ffffff !important
}
.btn-bottom-right {
	float: right;
	bottom: 0;
	margin-top: 20px;
	
}

@media (max-width: 768px) {
	.page-title {
		width: 100%;
		margin: 0px auto 0;
		padding-left: 0px;
		position: relative;
	}
	.banner .breadcrumb {
		display: none
	}

}
@media (max-width: 480px) {
	.friend p {
		display: none
	}
	.verlist table, thead, tbody, th, td, tr { 
		display: block;
		text-align: center; 
	}

}
.address-view h3 {
	font-size: 1.1rem;
	padding-bottom: 10px;
}

.for-btn {
	margin-top: -40px;
	padding-top: 0px;
	padding-bottom: 0px;
	text-align: right;
	float: right
}

.for-btn a {
	float: right
}


.for-btn .subicon {
	height: 15px;
    width: 15px;
}
.subicon-userprofile:after{
	margin-top: 3px;
	height: 15px;
    width: 15px;
    background-size: 15px 15px;
    background-image:url(/img/icon/white/protection.png);
    background-position: 0 0px
}
.btn .subicon-userprofile:after{
	margin-top: 3px;
	height: 15px;
    width: 15px;
    background-size: 15px 15px;
    background-image:url(/img/icon/white/protection.png);
    background-position: 0 0px
}

.btn:hover .subicon-userprofile:after {
	height: 15px;
    width: 15px;
    background-size: 15px 15px;
	background-image:url(/img/icon/white/protection.png);
}
.subicon-warning:after{
	margin-top: 3px;
	height: 15px;
    width: 15px;
    background-size: 15px 15px;
    background-image:url(/img/icon/white/warning.png);
    background-position: 0 0px
}

.btn .subicon-warning:after{
	margin-top: 3px;
	height: 15px;
    width: 15px;
    background-size: 15px 15px;
    background-image:url(/img/icon/white/warning.png);
    background-position: 0 0px
}
.subicon-keyprotect:after{
	margin-top: 3px;
	height: 15px;
    width: 15px;
    background-size: 15px 15px;
    background-image:url(/img/icon/white/key-protect.png);
    background-position: 0 0px
}
.btn .subicon-keyprotect:after{
	margin-top: 3px;
	height: 15px;
    width: 15px;
    background-size: 15px 15px;
    background-image:url(/img/icon/white/key-protect.png);
    background-position: 0 0px
}

.btn:hover .subicon-warning:after {
	height: 15px;
    width: 15px;
    background-size: 15px 15px;
	background-image:url(/img/icon/white/warning.png);
}

.for-btn .subicon-userprofile:after{
	height: 15px;
    width: 15px;
    background-size: 15px 15px;
}

.for-btn:hover .subicon-userprofile:after {
	height: 15px;
    width: 15px;
    background-size: 15px 15px;
	background-image:url(/img/icon/white/edit-profile.png);
}



.custom-control-label {
	font-size: 0.8rem;
	line-height: 1.55rem
}

.custom-checkbox .custom-control-label::before {
	border-radius: 0.1rem;
	 border-color: #ccc;
    background-color: #ccc;
    border-radius: 50%;
}
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #ffb81c;
    background-color: #ffb81c;
 }
 .custom-control-label::after {
 	top: 0.4rem;
 	width: 0.7rem;
 	height: 0.7rem;
    left: -1.35rem;
	background: no-repeat 99% / 99% 99%;
	content: "";
	font-family: "Font Awesome 5 Free";
	background-image: url(../img/icon/white/check.svg);
 }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
	content: "";
	font-family: "Font Awesome 5 Free";
	background-image: url(../img/icon/white/check.svg);
}

.btn-rounded {
	border-radius: 20px;
	font-size: 0.7rem !important;
	line-height: 0.8rem;
	padding: 5px 8px;
	min-width: 60px;
}
.switch {
  margin-left:calc(100% - 40px);
  position: relative;
  display: inline-block;
  width:40px;
  height: 10px;
  
}


.form-margin .switch {
	top: -12.5px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: -5px;
  background-color: #ffb81c;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #243746;
}


input:focus + .slider {
  box-shadow: 0 0 1px #243746;
}

input:checked + .slider:before {
  -webkit-transform: translateX(12px);
  -ms-transform: translateX(12px);
  transform: translateX(12px);
  background-color: #ffb81c;
}
.slider.round {
  border-radius: 20px;
}

.slider.round:before {
  border-radius: 50%;
}

.my-profile .switch .ans, 
.sign-up .switch .ans{
	position: absolute;
    cursor: pointer;
    top: -8px;
    left: -50px;
    bottom: 0;
	width: 100px;
	height: 20px
}
.my-profile .switch .ans {
	line-height: 1.5rem
}
.my-profile .switch input:checked ~ .ans:before, 
.sign-up .switch input:checked ~ .ans:before {
	content: "Yes";
	color: #243746;
	font-weight: 700;
	font-size: 0.8rem
}
.my-profile .switch input ~ .ans:before, 
.sign-up .switch input ~ .ans:before {
	content: "No";
	color: #999;
	font-weight: 700;
	font-size: 0.8rem
}

#content .collapse {
	margin-top: 10px;
}

#content .btn {
	font-size: 0.7rem
}
#content .form-control, #content .form-control:focus{
	background: transparent;
}

.form-control:disabled, .form-control[readonly] {
	background-color: transparent;
	color: #ccc !important;
	cursor: not-allowed;
} 


.form-control:disabled::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #243746;
  opacity: 1; /* Firefox */
}

.form-control:disabled:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #243746;
}

.form-control:disabled::-ms-input-placeholder { /* Microsoft Edge */
  color: #243746;
}

.form-group {
	background-color: #f5f5f5;
	border:1px solid #f5f5f5;
	margin-top: 6px;
	margin-right: 15px;
	margin-left: 20px;
	border-radius: 20px;
	transition: all 0.3s
}


.login-box .form-group {
	margin-right: 0 !important;
	margin-left: 0 !important;
	text-align: left;
}
.form-group.veri-num{
	width: 2.5rem;
	margin: 20px 5px 20px !important;
	text-align: center;
	border-radius: 15px;
	display: inline-block;
}
.form-group.promocode {
	width:20rem;
	margin-top: 0 !important;
	
}

.login-box .input-group:focus-within, 
.login-xs .input-group:focus-within, 
.form-group:focus-within {
	border:1px solid #ccc;
}
 
.login-box .input-group:invalid-within, 
.login-xs .input-group:invalid-within, 
.form-group::invalid-within {
	border: 1px solid #dc3545 !important;
}

.login-box .input-group:valid-within, 
.login-xs .input-group:valid-within, 
.form-group::valid-within {
	border: 1px solid #28a745 !important;
}


.form-group label {
	font-size: 0.7rem;
	margin-bottom: 0 ;
	margin-top: 10px;
	margin-left: 15px;
	color: #aaa
}

.card-thumb {
	width: 100%;
	margin: 0 auto;
	height: 80px;
	background: #eeeeee;
	overflow: hidden !important;
}
.card-thumb .custom-control {
	position: absolute;
}
.card-thumb img {
	max-width: 100%;
	
	top: 0;
}
.card-list div[class^=col-]{
	margin-bottom: 10px;

}
.card-list .for-btn {
	padding-bottom: 0
}

.card-list h2 {
	padding-bottom: 0
}

.my-thumb {
	width: 100%;
	margin: 0 auto 10px;
	
	background: #eeeeee;
	border-radius: 50%;
	overflow: hidden !important;
	text-align: center;
}
.my-thumb img{
	max-width: 100%;
	margin: 0 auto;
}
.my-profile div div[class^=col-] {
	padding-right: 15px;
	padding-left: 15px;
}

.my-btn {
	text-align: right;
	margin-top: 1.7rem;
}

.my-btn .btn {
	width: 100%;
}

.product-banner .carousel-item iframe {
 	position: absolute;
 	top: 10.5%;
 	left: calc((100% - 30%) / 3);
 	width: 30%;
 	height: 75%;
}

.product-banner .carousel-control-next, 
.product-banner .carousel-control-prev {
	width: 5%;
	color: #243746;
}

.product-page {
	margin-top: -150px;
	margin-bottom: 20px;
}

.product-page .row div[class^=col-] + div[class^=col-] {
	padding-right: 5px;
	padding-left: 5px;
}

.plan-option {
	width: 100%;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.preferred {
	margin: 10px auto;
	width: 90px;
	border-radius: 3px;
	background-color: #243746;
	line-height: 1.2rem;
	font-size: 0.7rem;
	color: #ffffff;
	text-align: center;
	float: left;
	margin-top: -30px;
	font-family: 'Roboto', sans-serif;
	
}
.option-style {
	width: 100%;
	margin: 0 auto;
	padding: 10px;
	background-color: #ffffff;
	border-radius: 4px;
	border: 1px solid #eeeeee;
	height: 350px
}
.var-option input, 
.plan-option input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}


.plan-option input:checked ~ .option-style {
  border: 1px solid #243746;
}
.plan-header {
	width: 100%;
	margin: 0 auto;
	position: relative;
	text-align: center
}
.clearfix {
	clear: both !important;
}

.plan-header > h2 {
	font-size: 0.9rem;
	line-height: 1rem;
	margin-top: 10px;
	padding-bottom: 0;
	height: 32px;
	overflow: hidden;
}

.plan-img {
	width: 80px;
	height: 80px;
	background-color: #eeeeee;
	margin: 10px auto 0;
	position: relative;
}

.plan-option p {
	font-size: 0.7rem;
	line-height: 0.8rem;
}
.plan-duration {
	color: #999999
}
p.plan-pricing {
	font-size: 1.8rem;
	line-height: 2rem;
	font-weight: lighter;
	color: #ffb81c;
}

.plan-dis {
	width: 100%;
	margin: 10px auto;
	position: relative;
}
.plan-dis > h2 {
	padding-bottom: 0;
	padding-top: 10px;
	margin: 0;
	line-height: 0.8rem
}
.plan-thumb {
	width: 100%;
	margin: 10px auto 10px;
	position: relative ;
	padding: 0 !important
}
.plan-thumb div.list {
	border: 1px solid #eeeeee;
	height: 70px;
	padding: 5px
}

.plan-thumb div.list + div {
	border-left: 0
}
.wrap {
	width: 100%;
	height: 60px;
	overflow:hidden;
	margin: 0 auto;
	padding: 0
}
.plan-thumb .wrap img {
	width: 100%;
	margin: 0 auto;
}
.plan-description {
	font-size: 0.7rem !important;
	height:40px;
	overflow: hidden;
	line-height: 0.8rem !important;
}

.btn-adjust {
	position: relative;
	margin: 10px auto;
}

.btn-adjust .btn {
	width: 100%;
	font-size: 0.8rem
}
.other-option {
	margin-top: 20px;
	margin-bottom: 20px;
}
.other-option h2 {
	padding-bottom: 0
}
.other-option .total{
	font-size: 1.8rem;
	line-height: 2rem;
	text-align: right;
	color: #ffb81c;
}
.other-option p {
	font-size: 0.7rem;
	color: #999999;
	line-height: 0.8rem;
	text-align: right;
}

.other-option .btn {
	margin-top: 10px;
	font-size: 0.9rem
}
.product-page .other-option div[class^=col-] + div[class^=col-] {
	padding-right: 15px;
	padding-left: 15px;
}

.other-option .form-control {
	background-color: #ffffff;
	border-color: #eeeeee;
}
.other-option .form-control[type="number"] {
	text-align: center;
	background-color: #eee !important;
}
.var-option .btn {
	margin-top: 0
}
.var-option .radio-black-line {
	border: 2px solid #999999;
	color: #666666;
	font-weight: normal;
	font-size: 0.7rem;
	position: relative;
	font-family: 'Roboto', sans-serif;
}
label.var-option {
	margin-bottom: 0
}
.var-option .radio-black-line .triangle-bottomleft {
      width: 0;
      height: 0;
      border-bottom: 10px solid transparent;
      border-right: 10px solid transparent;
      position: absolute;;
      bottom: 0;
      left: 0;
      transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}

.var-option input:checked ~ .radio-black-line {
  border: 2px solid #243746;
  color: #243746;
}

.var-option input:checked ~ .radio-black-line .triangle-bottomleft {
	border-bottom: 10px solid #243746;
}
.star-rating .list-inline-item {
	color: #ffde00;
}
.star-rating .list-inline-item.none-rated {
	color: #ccc
}
.star-rating p {
	text-align: left
}

.star-rating .list-inline-item a{
	color: #ffb81c;
}
.star-rating .list-inline-item a:hover {
	color: #243746
}

.promotion-tag {
	font-size: 0.7rem !important;
	padding: 5px 20px 5px 10px;
	background-color: #ffb81c;
	position: relative;
	border-left: 3px solid #243746;
	

}

.promotion-tag a {
	color: #ffffff !important
}
.promotion-tag a:after {
	content: " ";
	height: 10px;
	width: 10px;
	float: right;
	margin-left: 5px;
	background-image: url(../img/icon/black/caret.svg);
  	background-size: 10px 10px;
  	background-repeat: no-repeat;
  	background-position: center center;
  	-webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent; 
  border-right:10px solid #ffffff;
  position: absolute;
  top: -1px;
  right: -1px
}
.shop-info .row {
	margin-top: 30px;
	
}
.shop-info .row div[class^=col-] {
	padding-left: 0;
	padding-right: 0;
}
.shop-info .shop-logo {
	width: 100px;
	height: 100px;
	margin-right: 10px;
	float: left;
	background-color: #eeeeee
}
.shop-info p.for-btn {
	float: right;
	margin-top: -10px;
	padding-bottom: 0
}

.shop-info p .btn {
	font-size: 0.7rem;

}
.accordion .nav-tabs {
	border-radius: 0;
	width: 100%;
	margin: 0 auto;

}
.nav-tabs {
	border: 0px;
}
.nav-tabs .nav-link {
	border-radius: 0;
	font-weight: bold;
	text-align: left;
	width: 100%;
	border: 0px;
	font-size: 0.8rem;
	border-bottom: 1px solid #eeeeee;
	border-top:1px solid #eeeeee;
}

.nav-tabs .nav-link:after {
	content: " ";
	height: 20px;
	width: 10px;
	float: right;
	margin-left: 5px;
	background-image: url(../img/icon/black/caret.svg);
  	background-size: 10px 10px;
  	background-repeat: no-repeat;
  	background-position: center center;
  	-webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.nav-tabs .nav-link.active {
	border-bottom: 3px solid #243746; 
}

.compare h4 {
	font-size: 1rem;
	letter-spacing: 0.1rem;
	text-align: center;
	padding-bottom: 10px;
}

.compare table thead tr th, 
.compare table tr td {
	text-align: center;
}

.compare table thead tr th {
	font-size: 0.8rem;
	line-height: 0.9rem;
	font-family: 'Roboto', sans-serif;
}

.compare table tr th {
	text-align: left;
	line-height: 1rem;
	font-size: 0.8rem;
	font-family: 'Roboto', sans-serif;

}
.compare table tr td.yes {
	color: #009bc7;
	line-height: 2rem
}

.compare table tr td.no {
	color: #999999;
	line-height: 2rem
}
.compare table tr td {
	font-size: 0.8rem;
	line-height: 0.8rem;
	line-height: 2rem
}
.compare table thead tr th.prefer p {
	font-size: 0.7rem;
	color: #999999;
	text-align: center;
	line-height: 2rem
}
.compare table thead tr th.prefer , 
.compare table tr td.prefer {
	background-color: #fafafa
}

.compare table tr th i{
	float: right;
	top: 0;
	color: #cccccc
}

.compare table tr th span {
	font-weight: normal;
	color:#999999;
	font-size: 0.8rem
}
.compare table tr.price td{
	font-size: 1rem;
	font-weight: bold;
	color:#ffb81c;
}
.compare table tr th:first-child {
	border-right:1px solid #dee2e6
}
.compare table tbody tr:last-child {
	border-bottom: 1px solid #dee2e6
}

.compare table .dropdown-menu {
	top: -20px !important;
	left: 100% !important;
	background-color: #ffffff;
	font-size: 0.7rem;
	text-align: left;

}
.compare table .dropdown-menu p {
	text-align: left;
	padding: 0 10px;
}
.review-top {
	text-align: center;
}
.review-top h5 {
	font-size: 3rem;
	text-align: center;
	margin-top: 50px;
	font-weight: normal;
}
.review-top p {
	font-size: 0.7rem;
	color: #999999;
	margin-top: 0;
	line-height:0;
	padding-top: 0
}
.rating-pro {
	width: 200px;
	margin: 0;
	padding: 0;
	position: relative;
	text-align: left
}
.rating-pro > ul {
	width: 100%;
	margin: 10px auto;
	padding: 0;
	list-style-type: none
}


.rating-pro .star-rating {
	margin-top: 3px;
}

.rating-pro > ul li p {
	float: right;
	margin-top: -10px;
}
.rating-pro > ul li.pro {
	width: 100%;
	margin-top: 3px;
}

.rating-pro .list-inline-item:not(:last-child) {
	margin-right: 0
}
.progress {
	height: 0.5rem
}

.review-ttl {
	line-height: 2rem !important;
	padding-bottom: 0 !important
}
.review-comment .select2-container--default .select2-selection--single{
	border: 0px solid #eeeeee !important;
}

.select2-container--open .select2-dropdown {
	border: 1px solid #eeeeee !important;
}

.review-comment .filter .select2-selection--single .select2-selection__rendered:before {
	content: "Filter by ";
	color: #999999;
	font-size: 0.7rem
}
.review-comment .sort .select2-selection--single .select2-selection__rendered:before {
	content: "Sort by ";
	color: #999999;
	font-size: 0.7rem
}

.review-comment {
	padding-left: 15px;
	padding-right: 15px;
	margin-top: 10px;
}

.review-comment .th {
	border-bottom: 1px solid #dee2e6;
	border-top: 1px solid #dee2e6;
}
.review-comment .th:not(:last-child) {
	border-right: 1px solid #dee2e6;
}
.tnc ol {
	font-size: 0.8rem;
	line-height: 0.9rem;
	padding-top: 10px;
}
.tnc p {
	font-size: 0.8rem;
	line-height: 0.9rem;
	padding-left: 10px;
	padding-right: 10px;
}

.container-xl .row {
	padding-right: 5px;
	padding-left: 5px;
}

.container-xl .carousel {
	width: 100%;
	margin: 0 auto;
}

.container-xl .carousel .carousel-inner .row div[class^=col-] {
	
}
.container-xl .carousel .carousel-control-next,
.container-xl .carousel .carousel-control-prev {
	color: #243746;
	width: 30px;
	margin-top: -8px;
	margin-left:0px;
	z-index: 12;
	transition: all 0.3s;
	
	
}

.container-xl .carousel .carousel-control-next {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	margin-right:-5px
}

.container-xl .carousel .carousel-control-prev {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	margin-left: -5px
}
.container-xl .carousel .carousel-control-next i, 
.container-xl .carousel .carousel-control-prev i {
	padding: 10px;
	border-radius: 4px;

}

@media (max-width: 980px) { 
	.product-page {
		width: 90%;
	}
	.product-page .row div[class^=col-] {
		margin-bottom: 10px;
		padding-left: 5px;
		padding-right: 5px
	}
	.product-page .row div[class^=col-]  + div[class^=col-] {
		padding-left: 5px;
	}

	.shop-info .row div[class^=col-] {
		padding-left: 0;
		padding-right: 0;
	}
	.shop-info .list-inline-item:not(:last-child) {
		margin-right: 0
	}
	
}
@media (max-width: 480px) { 
	.product-page {
		width: 90%;
	}
	.product-page .row div[class^=col-] {
		margin-bottom: 10px;
	}
	.product-page .row div[class^=col-] + div[class^=col-] {
		padding-left: 15px;
	}
	.plan-thumb div.list {
		border: 1px solid #eeeeee;
		height: 100px;
		padding: 5px
	}
	.wrap {
		width: 100%;
		height: 90px;
		overflow:hidden;
		margin: 0 auto;
		padding: 0
	}
	.product-banner .carousel-item {
		height: 200px;
		overflow: hidden;
	}
	.product-banner .carousel-item img {
		max-height: 100%;
	}
}

.total-price {
	width: 100%;
	position: fixed;
	bottom: 0px;
	z-index: 2
}

.sticky {
	position: fixed !important;
	margin: 0 auto 0px !important;
	bottom: auto !important;
	z-index: 102;
	transition: all 0.3s;
	top: 0
}
.modal-backdrop {
	z-index: 99 !important
}

.total-price .contain {
	background-color: #eeeeee
}
.total-price .contain p.conti{
	float: left
}

.total-price .contain h2 {
	text-align: right;
	font-size: 1.2rem;
	padding-top: 10px;
	color: #ffb81c
}
.total-price .contain h2:before {
	content:"Grand Total ";
	font-size: 0.8rem;
	color: #243746;
	padding-right: 10px;
}

.total-price .btn-red {
	line-height: 1.5rem
}

.btn-none {
	font-size: 0.8rem;
	line-height: 1.5rem;
	color: #ffb81c !important;
	font-weight: bold
}
.btn-none:hover {
	color: #243746 !important;
}
.btn-none:before {
	content: " ";
	height: 25px;
	width: 20px;
	float: left;
	margin-right: 5px;
	background-image: url(../img/icon/black/caret.svg);
  	background-size: 20px 20px;
  	background-repeat: no-repeat;
  	background-position: center center;
  	-webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
.btn-none:hover::before {
	background-image: url(../img/icon/red/caret.svg);

}

.by-shop div[class^="col-"]{
	margin-bottom: 10px;
}

.by-shop .total .price {
	font-size: 0.9rem;
	color: #FFB81C
}
.by-shop table {
	border: 1px solid #eeeeee;

}

.by-shop .verlist td,
.by-shop .verlist td.price {
    vertical-align: middle;
}
.by-shop .verlist .thumb {
	width: 80px;
	height: 80px;
}

.verlist .thumb {
	overflow: hidden;
}

.verlist .thumb img {
	width: 100%;
}
.verlist .thumb .custom-checkbox {
	position: absolute;
}
.by-shop .for-btn p {
	text-align: center;
}

.by-shop .for-btn p:not(:last-child) {
	padding-bottom: 10px;
}
.by-shop .verlist .item-price .input-group, 
.by-shop .quanity .input-group {
	margin: 0 auto;
	border: 1px solid #eeeeee;
	border-radius: 1rem;
	background: #eeeeee 
}

.login-xs .input-group .form-control{

	background: transparent;
	border-radius: 2rem; 
}
.input-group .form-control{

	background: #eee;
	border-radius: 2.5rem;
	height: 2.5rem
}

.item-price .input-group .input-group-prepend .input-group-text ,
.item-price .input-group .input-group-append .input-group-text ,
.item-price .input-group .form-control , 
.by-shop .quanity .input-group .input-group-prepend .input-group-text ,
.by-shop .quanity .input-group .input-group-append .input-group-text ,
.by-shop .quanity .input-group .form-control {
	height: 2rem;
}

.item-price .input-group .input-group-prepend .input-group-text ,
.item-price .input-group .input-group-append .input-group-text, 
.by-shop .quanity .input-group .input-group-prepend .input-group-text ,
.by-shop .quanity .input-group .input-group-append .input-group-text {
	border-radius: 50%;
	width: 2rem;
	height: 2rem;
	text-align: center;
	padding: .55rem;
	background: #ffffff !important;
}
.item-price .form-control,
.by-shop .quanity .form-control {
	border: 0px;
	background: #eeeeee !important;
	padding: 0.1rem 0.3rem;
	text-align: center;
}

.by-shop .verlist .item-price {
	display: none
}

@media (max-width: 970px) { 
	.full-contain {
		width: 90%;
		margin: 0 auto;
	}
	.total-price .contain p.conti{
		float: none;
		display: none
	}
	
}
@media (max-width: 768px) {
	

	.by-shop .verlist tr:not(:first-child) {
		border-top: 1px solid #eeeeee;
	}
	.by-shop .verlist .table tbody{
		border: 0 ;
	}
	.by-shop .verlist .single,
	.by-shop .verlist .quanity, 
	.by-shop .verlist .total {
		display: none
	}
	.item-price .input-group {
		float: right
	}
	.by-shop .verlist .item-price {
		width: 100%;
		display: block;
		margin: 0 auto;
	}
	.by-shop .verlist .item-price p{
		float: left;
		font-size: 1rem;
		color: #FFB81C;
		line-height: 2rem;
		font-weight: bold
	}
}

.shipping-info {
	margin: 0 15px 15px;
}

.shipping-info h3 {
	font-size: 1rem;
	margin-bottom: 10px;
}

.shipping-info  a {
	float: right;
	font-size: 0.7rem;
	color: #FFB81C;
	padding-top: 5px;
	text-decoration: underline;
	font-weight: normal;
	font-family: 'Roboto', sans-serif;
	letter-spacing: 0
}

.shipping-info a:hover {
	color: #243746;
}

.shipping-info p {
	font-size: 0.75rem;
	line-height: 0.9rem
}

.shipping-info p.billing {
	line-height: 2rem;
	color: #FFB81C;
}
.shipping-info p.billing a {
	padding: 0
}

.shipping-info .btn {
	font-weight: bold;
	text-decoration: none;
	padding: 3px 10px;
}
.shipping-info .sign {
	width: 100%;
	height: 80px;
	background: #ffffff;
	margin:10px auto; 
	border: 1px dashed #cccccc;
}
.devices-view .sign {
	width: 70%;
	height: 60px;
	background: #ffffff;
	margin:0 0 5px; 
	border: 1px dashed #cccccc;
}

p.btn-m-ship {
	float: right;
	width: 60px;
	height: 60px;
	margin-top: -65px;
	line-height: 3rem;
	text-align: center;
}

p.btn-m-ship a {
	color: #ffffff
}

p.btn-m-ship a:hover {
	color: #243746;
}
.shipping-info .card-img {
	width: 40px;
	margin: 10px 0 10px 15px;
}
.shipping-info .card-img img {
	max-width: 100%
}

.sh-btn {
	margin: 15px 15px 0;
}

.place-order .total-box {
	width: 100%;
	margin: 0px auto 10px;
	border: 1px solid #243746;
}


.total-box .input-group-append .btn {
	border-radius: 2rem
}

.total-box .input-group {
	border-radius: 2rem;
	background: #eeeeee;
}
.total-box .input-group .form-control {
	background: #eeeeee !important;
	height: 2rem;
}
.total-box h2 {
	margin-top: 10px;
}

.total-box .sub-box {
	padding-top: 10px;
}
.total-box .sub-box p{
	width: 70px;
	font-size: 0.7rem;
	color: #999999;
	float: left;
	margin-top: 0px;
}

.total-box .sub-box h5 {
	font-size: 0.9rem;
	font-weight:bold;
	text-align: left;
}
.total-box .grand-total {
	text-align: right;
}
.total-box .grand-total p {
	margin: 20px auto 0;
	color: #999999;
	font-size: 0.6rem
}

.total-box .grand-total h2 {
	margin: 0;
	padding: 0;
	font-size: 1.2rem;
	color: #FFB81C;
	letter-spacing: 0
}
.total-box .grand-total p.dis {
	margin: 0;
	font-size: 0.7rem
}
.total-box .grand-total p span {
	color: #243746;
	font-weight: bold
}
.m-ship {	
	display: none
}



.m-ship h3 a {
	float: right;
	font-size: 0.7rem;
	font-weight: normal;
	text-decoration: underline;
	letter-spacing: 0;
}

.m-ship h3{
	font-size: 1rem;

}

.m-ship p {
	font-size: 0.75rem;
	line-height: 0.9rem;
}

.m-ship .card-img {
	width: 60px;
	margin: 0 auto
}

.m-ship .card-img img {
	max-width: 100%;
}

@media (max-width: 768px) { 
	.m-ship {
		display: block
	}
}
.product-paging ul {
	margin-bottom: 0
}

.page-link {
	border: 0px !important;
	font-size: 0.8rem;
	color: #243746;
	font-weight: bold;
}
.page-item:first-child .page-link, .page-item:last-child .page-link {
	border-radius: 0px !important;
}
.page-link:hover {
	color: #FFB81C;
	background: #eeeeee
}
.active > .page-link {
	background: #FFB81C !important;
	color: #243746 !important;
}
.feat-product {
	width: calc(100% + 20px);
	margin-right: -10px;
	margin-left: -10px;
	padding-left: 0;
	padding-right: 0
}
.feat-product.container-xl .row {
	padding-right: 0;
	padding-left: 0
}

.container-xl .carousel .carousel-inner .row {
	margin: 0 auto;
}

.carousel-item {
	width: 100%;
	position: relative;
}

.product-filter {
	margin-top: 8px;
}
.product-filter button {
	float: right;
	margin-top: 5px;
	margin-left: 10px;
}

.product-filter button.btn {
	padding: 6px;
	color: #999999
}
.product-filter button.btn.active {
	color: #243746
}
.product-filter .form-group {
	float: left;
	width: 180px;
}
.product-filter .select2-container .select2-selection--single .select2-selection__rendered {
	color: #000000;
	font-weight: bold;
}
.product-filter .select2-container .select2-selection--single .select2-selection__rendered:before{
	content:"Sort by ";
	color: #999999;
	font-weight: normal
}
.carafil-list {
	min-height: inherit;
	height: inherit; 
}
.catafil-list nav {
	width: 100%;
	margin: 0 auto;
}

.catafil-list nav ul {
	margin: 0 auto;
	padding: 0;
	list-style-type: none;

}

.catafil-list nav ul li {
	color: #243746
}
.nav__list input[type=checkbox]:checked + label{
	font-weight: bold;
	background: #243746;
	color: #FFB81C;
	transition: all 0.3s
}

.nav__list .search {
	width: 90%;
	margin: 5px auto;
}
.nav__list .search .input-group-append {
	margin-left: 0px !important;

}

.nav__list .search .input-group-prepend {
    margin-right: -5px !important;
}

.nav__list .search .input-group-text {
	font-size: 0.6rem;
	color: #999
}

.nav__list .search .input-group-prepend .input-group-text.left  {
	border-radius: 0px !important
}

.nav__list .search .input-group-append .input-group-text.right {
	padding: 0 10px;
	background-color: #243746;
	color: #fff;
	font-size: 0.7rem;
	transition: all 0.3s
}

.nav__list .search .input-group-append .input-group-text.right:hover {
	background-color: #FFB81C;
}

.nav__list .search .form-control.max {
	margin-left: 0px;
}

.catafil-list nav  ul.nav__list li.single:hover, 
.catafil-list nav ul li label:hover {
	background: #243746;
	color: #FFB81C;
}

.catafil-list nav  ul.nav__list li.single p, 	
.catafil-list nav ul li label {
	font-size: 0.8rem;
	width: 100%;
	padding: 10px 15px !important;
	margin: 0
}
.catafil-list h2 .arrow, 
.catafil-list nav ul li.single div.arrow, 
.catafil-list nav ul li label div.arrow {
	width: 15px;
	height: 15px;
	float: right;
	margin-right: 0px;
	background-image: url(../img/icon/black/caret.svg);
  	background-size: 10px 10px;
  	background-repeat: no-repeat;
  	background-position: center center;
  	-webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: -webkit-transform .65s ease;
  	transition: transform .65s ease;
}
 
.catafil-list nav ul li.single div.arrow {
	margin-top: -25px;
	margin-right: 15px;
	-webkit-transition: all .3s ease;
  	transition: all .3s ease;
}

.catafil-list nav ul li.single:hover div.arrow {
	background-image: url(../img/icon/red/caret.svg);
	margin-right: 10px
}

.catafil-list nav ul li label:hover > div.arrow, 
.nav__list input[type=checkbox]:checked + label > div.arrow {
	background-image: url(../img/icon/red/caret.svg);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.nav__list input[type=checkbox] + label.active > div.arrow {
	background-image: url(../img/icon/black/caret.svg);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

/**
 * Hide nested lists
 */

.group-list, .sub-group-list, .sub-sub-group-list {
  height: 100%;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .5s ease-in-out;
  transition: max-height .5s ease-in-out;
}

.nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */
max-height: 2000px; }
.group-list {
	background:rgba(37, 55, 70, 0.1);
}

.nav__list .group-list li label:hover, 
.group-list li.single p:hover {
	background: rgba(255, 255, 255, 0.5);
	color: #243746;
}

.nav__list .group-list input[type=checkbox]:checked + label{
	font-weight: bold !important;
	background: rgba(255, 255, 255, 0.5);
	color: #243746;
}
.nav__list .group-list input[type=checkbox] + label.active{
	font-weight: bold !important;
	background: #FFB81C;
	color: #243746;
}
.sub-group-list {
	background: rgba(255, 255, 255, 0.8);
}
.nav__list .sub-group-list input[type=checkbox]:checked + label{
	font-weight: bold;
	color: #243746;
}
.catafil-list nav ul li.single p {
	width: 100%;
	font-size: 0.8rem;
	width: 100%;
	padding: 10px 15px 10px 25px;
	margin: 0;
}

.catafil-list nav .group-list li label {
	padding: 10px 15px 10px 25px;
}

.nav__list .active a p {
	font-weight: bold;
	color: #243746;
	background-color: #FFB81C
}
.nav__list > .active:hover a p {
	font-weight: bold;
	color: #FFB81C;
}

.nav__list ul.price-range {
	background: rgba(255, 255, 255, 0);
}

.nav__list ul.price-range li div{
	padding: 10px 15px;
}
.nav__list ul.price-range .irs-with-grid .irs-grid {
	display: none
}

.nav__list ul.price-range .irs--flat .irs-bar {
	background: #243746;
	height: 7px;
	top: 28px;
}
.nav__list ul.price-range .irs--flat .irs-min, .nav__list ul.price-range .irs--flat .irs-max {
	background-color: transparent;
}

.nav__list ul.price-range .irs--flat .irs-min:before {
	content: "min "
}

.nav__list ul.price-range .irs--flat .irs-max:after {
	content: " max"
}
.nav__list ul.price-range .irs--flat .irs-handle>i:first-child {
	background: #FFB81C;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	top: 2px
}
.nav__list input[type=checkbox]:checked + label.priceRange {
	background: transparent;
	color: #243746;
}
.catafil-list h2 .arrow, 
.nav__list input[type=checkbox]:checked + label.priceRange div.arrow {
	background-image: url(../img/icon/red/caret.svg);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.irs--flat {
	height: 70px;
}
.nav__list ul.price-range .irs--flat .irs-handle{
	margin-left: -5px;
}

.nav__list ul.price-range .irs--flat .irs-line {
	height: 7px;
	top: 28px;
}
.irs--flat .irs-from, .irs--flat .irs-to, .irs--flat .irs-single {
	background-color: transparent;
	color: #666666;
	font-size: 0.9rem;
	line-height: 1
}

.irs-from, .irs-to, .irs-single {
	top: 50px;

}

.irs--flat .irs-from:before, .irs--flat .irs-to:before, .irs--flat .irs-single:before {
	border-top-color: transparent !important;
	content: "RM ";
font-size: 8px;
left: 5px;
width: auto;
height: auto;
bottom: 10px;
}
.price-range div {
	text-align: right
}
.price-range .btn {
	font-size: 0.6rem;
	padding: 4px 6px;
}
.nav__list ul.price-range {
	
}
.nav__list ul.brand {
	background: transparent;
	
}
.nav__list ul.brand li div{
	padding: 0px 15px
}
.nav__list ul.brand li label {
	width: auto;
	margin:  0px 0px 6px;
	padding: 0px 0 !important;
}

.nav__list ul.brand li .var-option .btn {
	padding: 4px 10px;
	border-color: #243746;
	color: #243746;
	font-weight: bold
}
.nav__list ul.brand li .var-option input:checked ~ .radio-black-line {
	background: #243746;
	color: #ffffff
}

.catafil-list h2 {
	font-size: 0.8rem !important;
	color: #243746;
	padding: 10px 15px 5px 15px !important;
	border-bottom: 3px solid #FFB81C;
}
.catafil-list h2 a .arrow
.catafil-list h2 .arrow {
	background-image: url(../img/icon/black/caret.svg);
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.feat-pro {
	width: 100%;
	margin: 0 auto;
	background: #fafafa;
	padding-bottom: 10px;
}

.feat-pro .row {
	padding-top: 10px;

}

.feat-pro .product {
	padding-top: 0
}

.feat-pro .product > h2 {
	padding-top: 10px
}
.contain > .product > .col-12 h2 {
 padding-top: 10px
}

.subicon {
	-webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1.3rem;
    width: 20px;
    height: 20px;
    margin-top:-1px;
    float: left;
    margin-right: 5px;
}

.subicon-chat:after{
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/black/chat.png) no-repeat 0 0;
    background-size: 20px 20px;
}

.shop-links p .btn:hover .subicon-chat:after {
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/white/chat.png) no-repeat 0 0;
  	background-size: 20px 20px;
}
.subicon-follow:after{
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/red/like.png) no-repeat 0 0;
    background-size: 20px 20px;
}

.shop-links p .btn:hover .subicon-follow:after {
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/black/like.png) no-repeat 0 0;
  	background-size: 20px 20px;
}
.subicon-user:after{
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/black/user.png) no-repeat 0 0;
    background-size: 20px 20px;
}



a:hover p .subicon-user:after, 
li.active .subicon-user:after{
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/red/user.png) no-repeat 0 0;
    background-size: 20px 20px;
}

.subicon-userprofile:after{
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/black/edit-profile.png) no-repeat 0 0;
    background-size: 20px 20px;
}
a:hover p .subicon-userprofile:after, 
li.active .subicon-userprofile:after{
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/red/edit-profile.png) no-repeat 0 0;
    background-size: 20px 20px;
}

.subicon-warning:after{
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/black/warning.png) no-repeat 0 0;
    background-size: 20px 20px;
}
a:hover p .subicon-warning:after, 
li.active .subicon-warning:after{
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/red/warning.png) no-repeat 0 0;
    background-size: 20px 20px;
}

.subicon-card:after{
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/black/card.png) no-repeat 0 0;
    background-size: 20px 20px;
}
a:hover p .subicon-card:after, 
li.active .subicon-card:after{
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/red/card.png) no-repeat 0 0;
    background-size: 20px 20px;
}

.subicon-location:after{
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/black/location.png) no-repeat 0 0;
    background-size: 20px 20px;
}
a:hover p .subicon-location:after, 
li.active .subicon-location:after{
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/red/location.png) no-repeat 0 0;
    background-size: 20px 20px;
}

.subicon-sub:after{
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/black/bag.png) no-repeat 0 0;
    background-size: 20px 20px;
}
a:hover p .subicon-sub:after, 
li.active .subicon-sub:after{
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/red/bag.png) no-repeat 0 0;
    background-size: 20px 20px;
}
.subicon-reward:after{
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/black/reward.png) no-repeat 0 0;
    background-size: 20px 20px;
}
a:hover p .subicon-reward:after, 
li.active .subicon-reward:after{
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/red/reward.png) no-repeat 0 0;
    background-size: 20px 20px;
}
.subicon-delivery:after{
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/black/delivery.png) no-repeat 0 0;
    background-size: 20px 20px;
}
a:hover p .subicon-delivery:after, 
li.active .subicon-delivery:after{
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/red/delivery.png) no-repeat 0 0;
    background-size: 20px 20px;
}

.subicon-logout:after{
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/red/logout.png) no-repeat 0 0;
    background-size: 20px 20px;
}
a:hover p .subicon-logout:after, 
li.active .subicon-logout:after{
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/red/logout.png) no-repeat 0 0;
    background-size: 20px 20px;
}

.subicon-qr:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/black/qr.png) no-repeat 0 0;
    background-size: 100% 100%;
}
a:hover .subicon-qr:after, 
li.active .subicon-qr:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/red/qr.png) no-repeat 0 0;
    background-size: 100% 100%;
}

.subicon-envolop:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/black/envolop.png) no-repeat 0 0;
    background-size: 100% 100%;
}
a:hover .subicon-envolop:after, 
li.active .subicon-envolop:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/red/envolop.png) no-repeat 0 0;
    background-size: 100% 100%;
}
.subicon-billing:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/black/billings.png) no-repeat 0 0;
    background-size: 100% 100%;
}
a:hover .subicon-billing:after, 
li.active .subicon-billing:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/red/billings.png) no-repeat 0 0;
    background-size: 100% 100%;
}
.subicon-gifts:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/black/gifts.png) no-repeat 0 0;
    background-size: 100% 100%;
}
a:hover .subicon-gifts:after, 
li.active .subicon-gifts:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/red/gifts.png) no-repeat 0 0;
    background-size: 100% 100%;
}
.subicon-mobile:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/black/mobile.png) no-repeat 0 0;
    background-size: 100% 100%;
}
a:hover .subicon-mobile:after, 
li.active .subicon-mobile:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/red/mobile.png) no-repeat 0 0;
    background-size: 100% 100%;
}

.subicon-friend-refer:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/black/friend-refer.png) no-repeat 0 0;
    background-size: 100% 100%;
}
a:hover .subicon-friend-refer:after, 
li.active .subicon-friend-refer:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/red/friend-refer.png) no-repeat 0 0;
    background-size: 100% 100%;
}

.subicon-mobile-key:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/black/mobile-key.png) no-repeat 0 0;
    background-size: 100% 100%;
}
a:hover .subicon-mobile-key:after, 
li.active .subicon-mobile-key:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/red/mobile-key.png) no-repeat 0 0;
    background-size: 100% 100%;
}
.subicon-eyes:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/black/eye-close.png) no-repeat 0 0;
    background-size: 100% 100%;
}
a:hover .subicon-eyes:after, 
li.active .subicon-eyes:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/black/eye-open.png) no-repeat 0 0;
    background-size: 100% 100%;
}

.subicon-search:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/black/search.png) no-repeat 0 0;
    background-size: 100% 100%;
}
a:hover .subicon-search:after, 
li.active .subicon-search:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/red/search.png) no-repeat 0 0;
    background-size: 100% 100%;
}

.subicon-minus:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/black/minus.png) no-repeat 0 0;
    background-size: 100% 100%;
}
a:hover .subicon-minus:after, 
li.active .subicon-minus:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/red/minus.png) no-repeat 0 0;
    background-size: 100% 100%;
}

.subicon-plus:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/black/plus.png) no-repeat 0 0;
    background-size: 100% 100%;
}
a:hover .subicon-plus:after, 
li.active .subicon-plus:after{
	display:inline-block;
    height:100%;
    width:100%;
    content: "";
    background:url(../img/icon/red/plus.png) no-repeat 0 0;
    background-size: 100% 100%;
}
.btn-minus .subicon{
	margin-left: -12px;
	width: 36px;
	height: 36px
}

.btn-plus .subicon{
	margin-left: -12px;
	width: 36px;
	height: 36px
}

.login-box .subicon {
	margin-right: 0
}
.side-sp .friend i {
	margin-top: -30px
}

.shop-links p {
	padding-top: 0px;

}
.shop-links .btn {
	font-size: 0.8rem !important;
	padding: 5px 10px;

}
.page-title .star-rating ul {
	margin-bottom: 6px
}

.page-title p.btn{
	font-size: 0.6rem;
	font-weight: normal;
	float: left;
	margin-right: 10px;
}


.inner-page {
	margin-bottom: 0px;
}

div.arrow-down {
	width: 15px;
	height: 15px;
	float: right;
	position: absolute;
	top: 13px;
	right: 10px;
	margin-right: 0px;
	background-image: url(../img/icon/black/caret.svg);
  	background-size: 10px 10px;
  	background-repeat: no-repeat;
  	background-position: center center;
  	-webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: -webkit-transform .65s ease;
  	transition: transform .65s ease;
}
.shop-cata .dropdown-menu li a div.arrow {
	width: 15px;
	height: 15px;
	float: right;
	margin-top: -25px;
	margin-right: 10px;
	background-image: url(../img/icon/black/caret.svg);
  	background-size: 10px 10px;
  	background-repeat: no-repeat;
  	background-position: center center;
  	-webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: -webkit-transform .65s ease;
  	transition: transform .65s ease;
}
.shop-cata .dropdown-menu li a.active div.arrow, 
.shop-cata .dropdown-menu li a:hover div.arrow {
	background-image: url(../img/icon/red/caret.svg);
	-webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.shop-cata .dropdown-menu {
	border-radius: 0;
	border: 0;
	padding-top: 0;
	padding-bottom: 0;
	background: transparent;
	width: 200px;
	text-align: left
}

.shop-cata > .dropdown-menu {
	background: #ffffff;
	box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.1);	
}

.shop-cata .dropdown-menu li a p{
	border: 0;
	padding: 6px 15px;
	font-weight: normal;
	margin: 0;
	line-height: 1.3rem;
	outline: 0 !important;
	text-align: left;
	color: #243746;
}
.shop-cata .dropdown-menu li a.active p, 
.shop-cata .dropdown-menu li a:hover p {
	background: #243746;
	color: #FFB81C;
	font-weight: bold;
}
.shop-cata .dropdown-menu li a p:focus {
	border: 0px;
	outline: 0
}
.shop-cata .dropdown-menu ul.dropdown-menu {
	position: relative;
	background: rgba(0, 0, 0, 0.05);
}

.hot-deal {

}
.sidebar.active .subicon {
	float: none;
	margin: 0px auto !important;
}
@media (max-width: 768px) { 
	
	.product-filter .form-group{
		margin-top: -10px;
		display: none
	}
	
	.catergory-filter .sidebar {
    	max-width: 250px !important;
    	min-width: 250px !important;
    	margin-left: -250px;
    	text-align: left;
    }
    .catergory-filter .sidebar li a p span {
    	display: block;
    }

    .catergory-filter .sidebar li a p i {
    	margin-right:  0;
    	margin-left: 10px;
    	display: block;
    	font-size: 1.2em;
    	margin-bottom: 0px;
    	text-align: left !important;
    }
    
    .catergory-filter #sidebar.active {
        min-width: 250px;
        max-width: 250px;
        width: 250px;
        text-align: left;
        margin-left: 0px !important;
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 99;
        overflow: scroll;
    }

    .dropdown-toggle::after {
        top: auto;
        bottom: 10px;
        right: 50%;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }
    .catergory-filter #content {
    	width: 90% !important;
    	margin: 0 auto;
    	padding-right: 15px;
    	padding-left: 15px;
    	left: 0px;
    }
    
    #sidebar .collapse {
		display: none
	}
	.catafil-list h2 .arrow {
		background-image: url(../img/icon/black/caret.svg);
	  -webkit-transform: rotate(360deg);
	  -ms-transform: rotate(360deg);
	  transform: rotate(360deg);
	}

	.shop-pg .contain {
		width: 90% !important;
    	margin: 0 auto 15px;
	}
	.sidebar .subicon {
		float: none;
		margin: 0px auto !important;
	}
	.add-margin {
	    margin: 10px auto;
	}

	.event-cont .btn {
		
	    padding: .3rem .65rem;
	    font-size: 0.65rem;
	    line-height: 1.2;
	    border-radius: 4rem;
	    transition: all 0.3s ease-in-out;
		-webkit-transition: all 0.3s ease-in-out;
	}
	.tnc-cont hr.right {
	    width: calc((100% - 50%) / 2);
	    float: right;
	}
	.tnc-cont hr.left {
	    width: calc((100% - 50%) / 2);
	    float: left;
	}
	footer h2 {
		font-size: 0.8rem !important
	}
	footer h2 span {
		font-size: 0.6rem !important
	}

	footer p {
		font-size: 0.7rem
	}

	footer .btn-red {
	    margin-top: 20px;
	    font-size: 0.6rem;
	    letter-spacing: 0.01rem;
	    line-height: 1rem;
	    color: #ffffff;
	    text-transform: uppercase;
	}

	ul.social li {
	    float: left;
	    padding-right: 5px;
	}
	ul.social li .icon {
		width: 30px;
		height:30px
	}
}

.hot-deal .product-list {
	border: 1px solid #eeeeee;
}

.hot-deal .product-list .pro-img {
	width: 50%;
	float: left;
	margin-bottom: 0;
	

}

.hot-deal .product-list .pro-info {
	width: 50%;
	float: right;

}
.hot-deal .product-list .pro-info h4 {
	margin-top: 12%;
}
.hot-deal .product-list .offer-tag {
	z-index: 99;
	height: 25px;
	width: 100px;
	padding-top: 5px;
	padding-bottom: 5px;
	left: -8px;
	top: 110px;
}

.hot-deal .product-list .pro-info .extra {

	margin-top: 10px;
}
.pro-info h2 {
	font-size: 0.7rem !important;
	color: #243746;
	height: 1.8rem;
	line-height: 0.9rem;
	margin-top: 5px;
	margin-bottom: 5px;
	overflow: hidden;
	font-weight: normal !important;
}
.sidebar .product-list {
	width: 200px;
	margin-top: 10px;
	margin-bottom: 10px;
	border: 1px solid #eee;
}
.sidebar .pro-info h2 {
	font-size: 0.7rem !important;
	color: #243746;
	height: 1.8rem;
	line-height: 0.9rem;
	margin-bottom: 5px;
	margin-top: 5px;
	border: none !important;
	padding: 0 !important;
	overflow: hidden;
	font-weight: normal !important;
}

.sidebar .promo-ads {
	width: 200px;
	margin: 0 auto 10px;
	padding-top: calc(59.5% - 5px);
	border: 1px solid #eee;
}


.sidebar .read-more {
	width: 25px;
    float: right;
    margin-top: -2px;
}

.sidebar .read-more img {
	max-width: 90%;
}

.place-order .col-3{
	margin-top: 10px;
	margin-bottom: 10px;
	padding-right: 0;
}
.place-order div:nth-child(n+3).col-3{
	margin-left: -15px;
}
.place-order .col-3 .round {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: #ccc;
	color: #fff;
	text-align: center;
	display: flex;
	align-items: center;
	padding: 5px 11px;
	font-weight: 700;
	font-size: 0.8rem;
}
.place-order .col-3 hr {
	width: calc(100% - 30px);
	border-top: 5px solid #ccc;
	margin-top: -18px;
	margin-left: 30px
}

.place-order .active hr {
	width: calc(100% - 30px);
	border-top: 5px solid #ffb81c;
	margin-top: -18px;
	margin-right: 0px
}

.place-order hr {
	width: calc(100% - 30px);
	border-top: 5px solid #ccc;
	margin-top: -18px;
	margin-right: 0px
}
.place-order .active .round {
	background-color: #ffb81c;
	
}
.place-order .col-3 .round.last {
	font-size: 0.6rem;
	padding: 5px 5px;
	position: absolute;
	top: 0;
	right: -30px;
}

.place-order .active .round.last {
	background-color: #ccc;
}
.place-order .active .round.active.last {
	background-color: #ffb81c;
	color:#243746;
}
.order-list .order {
	width: 100%;
	margin: 0 auto;
	border: 1px solid #eee;
	border-radius: 10px;
	background-color: #fff;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
}

.order-list .order .order-img {
	width: 150px;
	background-color: #ccc;
	height: 130px;
	margin: 0;
	position: relative;
	overflow: hidden;
}
.order-list .order .order-img .pro-img {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

.order-list .order .order-img .pro-img img {
	width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    vertical-align: middle;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    flex-shrink: 0;
    transition: all 0.3s;
}

.order-list .order .order-info {
	width: calc(100% - 150px);
	padding: 10px;
	float: right;
	position: absolute;
	top: 0;
	right: 0;
	vertical-align: middle;
}


.order-list .order .order-info h2 {
	width: 80%;
	font-size: 0.8rem;
	height: 18px;
	padding-bottom: 10px;
	color:#243746;
	font-weight: normal;
	vertical-align: middle;
	overflow: hidden;
}

.order-list .order .order-info p.price {
	width: 20%;
	float: right;
	position: absolute;
	top: 40px;
	right: 10px;
	text-align: right;
	font-size: 1.3rem;
	color: #ffb81c;
	font-weight: 700
}


.order-list .order .order-info p.price:before {
	content:"RM";
	font-size: 0.9rem
}

.order-list .order .order-info p.price span{
	
	font-size: 0.9rem
}

.order-list .order .order-info p.price:after{
	content:" / month";
	font-size: 0.7rem;
	font-weight: normal;
	color:#243746;
}

.order-list .order .order-info p.details {
	width: 80%;
	line-height: 0.9rem;
	font-size: 0.8rem;
	color:#666;
	height: 70px;
	overflow: hidden;
}

.order-list .order .order-info p.details span {
	
	font-size: 0.6rem;
	color:#999;
}

.order-info {
	height: 130px;
	
}
.order-list .order .order-info .input-group {
	width: 20%;
	position: absolute;
	right: 10px;
   	margin-top: -20px;
    border: 1px solid #eeeeee;
    border-radius: 1rem;
    background: #eeeeee;
    float: right
}
.order-list .order .order-info .form-control, .order-list .order .order-info .form-control {
    border: 0px;
    background: #eeeeee !important;
    padding: 0.1rem 0.3rem;
    text-align: center;
}

.order-list .order .order-info .input-group .form-control {
    height: 2rem;
}
.order-list .order .order-info .input-group .input-group-prepend .input-group-text,
.order-list .order .order-info .input-group .input-group-append .input-group-text {
    border-radius: 5px 0 0 5px;
    width: 2rem;
    height: 2rem;
    text-align: center;
    padding: .55rem;
    background: #ffffff !important;
}

.order-list .order .order-info .input-group .input-group-append .input-group-text {
	border-radius: 0 5px 5px 0;
}

.order-info .read-more {
	
	font-size: 0.6rem;
    float: right;
    margin-top: -90px;
}

.order-info .read-more a {
	color: #999
}

.order-info .read-more img {
	max-width: 20px;
}

.bg-white {
	background-color: #fff;
	border-radius: 10px;
	overflow: hidden;
	padding: 15px;
	margin: 0 auto;
	border:1px solid #eee;
}
.bg-white embed {
	width: 80%;
	height: 800px;
	margin: 0 10%;
	border: 0;
	background-color: #fff
}

.custom-control h2 {
	font-size: 0.8rem;
	color: #243746;
	margin-top: 5px;
}

.bg-white p {
	font-size: 0.75rem;
	text-align: justify-all;
	color: #666;
	line-height: 0.9rem
}

.bg-white div[class*="col-"] h2 {
	font-size: 1rem;
	color: #243746;
}

.bg-white div[class*="col-"] h1 {
	font-size: 1rem;
	line-height: 1.8rem;
	color: #243746;
}

.bg-white div[class*="col-"] {
	padding: 0
}

.bg-white div[class*="col-"] h4 {
	font-size: 0.6rem;
	color: #999;
	font-weight: normal
}

.bg-white div[class*="col-"] p {
	font-size: 0.8rem;
}

.bg-white div[class*="col-"].info p {
	font-size: 0.8rem;
	text-align: left;
}

.bg-white div[class*="col-"] .read-more {
	font-size: 0.6rem;
	float: right;
	margin-top: -2rem;
	z-index: 10;
	position: absolute;
	right: 0
}
.bg-white div[class*="col-"] .read-more a {
	color: #999
}

.bg-white div[class*="col-"] .read-more img {
	width: 20px;
}
.bg-white div[class*="col-"] .btn {
	
}


.bg-white .custom-control-label {
	width: 100%;
	line-height: 1rem;
	display: inline-block;
	align-content: center;
	align-items: center;
}
.bg-white .custom-control-label p {
	margin-top: 5px;
	width: 45%;
	display: inline-block;
}

.bg-white .custom-control-label .cc-num {
	font-size: 0.9rem;
	color: #243746;

}
.bg-white .custom-control-label .cc-img {
	position: absolute;
	float: right;
	right: 0px;
	top: -5px;
	width: 50px;
	height: 30px;
	overflow: hidden;
	display: flex;
	align-items: center
}

.bg-white .custom-control-label .cc-img img {
	width: 50px;
}
.goto {
	position: relative;
	text-align: right;
	margin: 0px;
	font-size: 0.7rem;
	z-index: 1;
	line-height: 20px;
}
.goto i {
	font-size: 20px;
}
.goto img {
	width: 20px;
}

.plan-review {
	width: 100%;
	margin: 0 auto;
	position: relative;

}

.plan-review .plan-img {
	display: inline-block;
	width: 100px;
    height: 100px;
    background-color: #eeeeee;
    margin: 0 auto ;
    position: relative;
    border-radius: 10px;
	overflow: hidden;
}
.plan-review .plan-img > .pro-img {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    margin-left: auto;
    margin-right: auto;
}
.plan-review .plan-img > .pro-img img {
	width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    vertical-align: middle;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    flex-shrink: 0;
    transition: all 0.3s;
}
.plan-review .plan-details {
	display: inline-block;
	margin: 0 auto ;
	position: absolute;
	width: calc(100% - 100px);
	padding-left: 15px;
	overflow: hidden;

}
.plan-review .plan-details > span {
	font-size: 0.7rem;
	color: #999
}

.plan-review .plan-details h2 {
	font-size: 0.8rem !important;
	font-weight: normal;
	width: 90%
}

.plan-review .plan-details p {
	position: absolute;
	vertical-align: bottom;
	
}

.plan-review .plan-details p.details {
	position: relative;
	font-size: 0.8rem;

}

.plan-review .plan-details p.details span {
	font-size: 0.7rem;
	color: #999
}

.plan-review .plan-details p.price {
	float: left;
	color: #ffb81c;
	font-weight: 700;
	font-size: 1.2rem
}

.plan-review .plan-details p.qty {
	top: 0;
	right: 0px;
	color: #243746;
	font-weight: 700;
	font-size: 1.2rem
}
.plan-review .plan-details p.qty span {
	font-size: 0.8rem;
	color: #999;
	font-weight: normal
}
.non-price p.price:before {
	content: "";
	font-size: 0.8rem;
}

.plan-review .plan-details p.price span {
	font-size: 0.8rem;
}
.plan-review .plan-details p.price:before {
	content: "RM";
	font-size: 0.8rem;
}
.plan-review .plan-details p.price:after {
	font-weight: normal;
	content: " / month";
	font-size: 0.8rem;
	color: #243746; 
}

.bg-white h2 span {
	font-size: 0.7rem;
	color: #999;
	font-weight: normal
}
.invoice-details p,
.invoice-qty p,
.invoice-price p {
	padding-bottom: 10px;
	line-height: 1rem;
}

.invoice-details p {
	font-size: 0.9rem !important;
	color: #666; 
	
}
.invoice-details p span {
	font-size: 0.8rem;
	color: #999;
}
.invoice-qty p {
	color: #999;
	padding-bottom: 6px;
	text-align: right
}

.invoice-price p {
	font-size: 1.2rem !important;
	color: #666;
	padding-bottom: 6px;
}

.invoice-price p:before {
	content: "RM";
	font-size: 0.7rem
}

.invoice-price p span {
	font-size: 0.7rem
}
.discount p {
	color: red
}

.invoice-price.discount p:before {
	content: "(-) RM" !important;
	font-size: 0.8rem
}


.total h4{
	font-size: 0.8rem;
	color: #243746; 
}

.total h2{
	font-size:1.5rem !important;
	color: #ffb81c;
}

.total h2:before {
	font-size: 0.8rem;
	content: "RM"
}

.total h2 span {
	font-size: 0.8rem;
}



.bg-white .signature {
	height: 100px;
	border:0px;
	border-bottom: 1px dashed #999;
}
.invoice-details p b {
	color: #243746; 
}

.success-ani {
	width: 50%;
	height: 100px;
	max-width: 100px;
	margin: 5% auto 5%;
	position: relative;
	overflow: hidden;
}
.login-xs .success-ani {
	margin: 70px auto 5%;
}
.success-ani img {
	position: absolute;
}


.success-ani .check {
	width: 100px;
	top:0;
	left: 0
}

.success-ani .star1 {
	top:0;
	left: 17px;
	width: 35px;
}

.success-ani .star2 {
	top:30px;
	left: 5px;
	width: 20px;
}

.success-ani .star3 {
	top:45px;
	left: 32px;
	width: 15px;
}

.success-ani .lock {
	width: 100px;
	top:0;
	left: 0
}

.success-ani .lock.extra {
	width: 100px;
	top:0;
	left: -12px
}

.success-ani .phone {
	width: 100px;
	top:0;
	left: -6px
}
.success-ani .key {
	width: 20px;
	bottom:17px;
	right:40px;
}

.success-ani .input {
	width: 80px;
	top:17px;
	right:0;
}
.success-ani .input.add {
	width: 80px;
	top:48px;
	right:0;
}
.success-ani .pw1 {
	width: 15px;
	right: 10px;
	top: 27px;
}
.success-ani .pw2 {
	width: 15px;
	right: 25px;
	top: 27px;
}
.success-ani .pw3 {
	width: 15px;
	right: 40px;
	top: 27px;
}

.success-ani .pw4 {
	width: 15px;
	right: 55px;
	top: 27px;
}
.success-ani .pw1.add, 
.success-ani .pw2.add, 
.success-ani .pw3.add, 
.success-ani .pw4.add {
	top: 58px !important;
}

.success-ani.openemail {
	height: 140px;

}

.success-ani .mail {
	width: 100px;
	height: 60px;
	margin-top: 40px;
	background-color: transparent;
	border-right: 5px solid #243746;
	border-top: 5px solid #243746;
	border-bottom: 5px solid #243746;
	border-left: 5px solid #243746;
	position: relative;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	transform-style: preserve-3d;
}

.success-ani .mail:before {
	content:" ";
	position: absolute;
	top: 0px;
	left: 0px;
	border-left: 45px solid #fff;
	border-right: 45px solid transparent;
	border-top: 25px solid transparent;
	border-bottom: 25px solid #fff;
	z-index: 5;
	border-radius: 10px;
	transform-origin: top;
}

.success-ani .mail:after {
	content:" ";
	position: absolute;
	top:0px;
	right: 0px;
	border-left: 45px solid transparent;
	border-right: 45px solid #fff;
	border-top: 25px solid transparent;
	border-bottom: 25px solid #fff;
	z-index: 5;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	transform-origin: top;
}

.success-ani .cover:before {
	content:" ";
	position: absolute;
	top: 0px;
	left: 0px;
	border-left: 45px solid transparent;
	border-right: 45px solid transparent;
	border-top: 25px solid #fff;
	border-bottom: 30px solid transparent;
	z-index: 7;
	transform-origin: top;

}

.success-ani .cover:after {
	content:" ";
	position: absolute;
	top: 0px;
	left: -10px;
	border-left: 55px solid transparent;
	border-right: 55px solid transparent;
	border-top: 30px solid #243746;
	border-bottom: 35px solid transparent;
	z-index: 6;
	transform-origin: top;

}

.success-ani .letter {
	position: absolute;
	z-index: 3;
	left: 5px;
	background:#ffb81c;
	width: 80px;
	height: 45px;
	border-radius: 10px;

}

.success-msg p{
	font-size: 0.8rem;
	color: #666
}
.custom-checkbox .custom-control-label::after {
	background-size: 80% 80%;
	background-position:45%;
}
.pro-pg .other-option .row {
	margin-right: 0;
	margin-left: 0
}

.pro-pg .info {
	
	padding-right: 15px !important;
}

.pro-pg .info .extra {
	font-size: 0.75rem;
	padding: 10px 0 10px 0;
}

.pro-pg .info .extra .free-shipping {
	color:#ffb81c;
	padding: 5px;
	background-color: #243746;
	border: 1px solid #243746;
	border-radius: 3px;
	margin-right: 10px;
}

.pro-pg .info .extra .sub-promo {
	color:#ffb81c;
	padding: 5px;
	background-color: #fff9e7;
	border: 1px solid #ffb81c;
	border-radius: 3px;
	margin-right: 10px;
}

.pro-pg .info .extra .charity {
	color:#a83f39;
	padding: 5px;
	background-color: #FFC0CB;
	border: 1px solid #a83f39;
	border-radius: 3px;
}

.pro-pg .info h2 {
	line-height: 1.2rem;
	font-weight: normal
}
.pro-pg .info .price {
	font-size: 1.5rem;
	color: #ffb81c;
	font-weight: 700;
	text-align: left;
	padding-bottom: 0px;
}

.pro-pg .info .price.percentage:before {
	content: "" !important;
	font-size: 0.8rem;
}

.pro-pg .info .price:before {
	content: "RM";
	font-size: 0.8rem;
}
.pro-pg .info .price .after {
	font-size: 0.8rem;
	color: #243746;
	font-weight: normal
}
.pro-pg .info .price span {
	font-size: 0.8rem;
	color: #ffb81c;
}

.info .promo {
	width: 100%;
	margin: 10px auto 0;
}
.info .promo label {
	width: 100%;
	left: auto;
	top: 0;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	text-align: left
}
.info .promo label::before {
	width: 100%;
    border-radius: 10px;
    left: 0;
    height: 100%;
    top: -1px;
	background-color: transparent;
    border-color: transparent;
}

.info .promo label::after {
	content: "Use now";
	text-align: center;
	font-size: 0.6rem;
	color: #999;
	left: auto;
    right:0px;
    top: 0px;
    margin-right: 10px;
    background-color: #eee;
    background-size: 60% 60%;
    background-position: 50%;
    width: 60px;
    height: 20px;
    padding: 3px;
    border-radius: 10px;
}
.info .promo.redeem label::after {
	content: "Redeem";
}

.info .promo label .icon {
	width: 70px;
	float: left;
	text-align: center
}

.info .promo label .copy {
	width: calc(100% - 80px);
	float: right
}
.info .promo label .icon img {
	max-width: 70%;
	padding-top: 10px;
	padding-bottom: 10px;
}

.info .promo label .copy h2 {
	font-size: 0.8rem;
	font-weight: 700;
	color: #999;
	padding-bottom: 3px;
}
.pro-pg .info .grey .copy h2{
	color: #999
}

.info .promo label .copy p {
	text-align: left;
	color: #999;
	font-size: 0.7rem
}

.info .promo input[type="checkbox"] {
	width: 100%;
	box-sizing: border-box;
    padding: 0;
    position: absolute;
    left: 0;
    z-index: -1;
    height: 1.25rem;
    opacity: 0;
}


.info .promo input[type="checkbox"]:checked ~ label {
	border: 1px solid #ffb81c;
}

.info .promo input[type="checkbox"]:checked ~ label .copy h2 {
	color: #ffb81c;
}

.info .promo input[type="checkbox"]:checked ~ label::after {
	background-color: #ffb81c;
	color: #fff
}


.info-campaign .promo {
	width: 100%;
	margin: 10px auto 10px;
	background-color: #fff;
	border: 1px solid #ffb81c;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	text-align: left
}

.campaign .product .banner {
	width: 100%;
	border-radius: 10px;
	margin: 0px auto 0px;
	overflow: hidden;
}

.campaign .voucher .carousel-inner  {
	border-radius: 10px
}

.info-campaign .promo .btn {
	
	text-align: center;
	font-size: 0.75rem;
	font-weight: bold;
	color: #fff;
	line-height: 22px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: #ffb81c;
    background-size: 60% 60%;
    background-position: 50%;
    width: 100px;
    height: 30px;
    padding: 3px;
    border-radius: 10px;
}
.info-campaign .promo .btn.btn-grey {
	
	text-align: center;
	font-size: 0.75rem;
	font-weight: bold;
	color: #555;
	line-height: 22px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: #ccc;
    background-size: 60% 60%;
    background-position: 50%;
    width: 100px;
    height: 30px;
    padding: 3px;
    border-radius: 10px;
}

.info-campaign .promo .icon {
	width: 80px;
	height: 80px;
	margin: 10px;
	float: left;
	text-align: center;
	overflow: hidden;
	align-items: center;
	display: flex;
}

.info-campaign .promo .copy {
	width: calc(100% - 100px);
	float: right;
	padding-left: 10px;
	padding-right: 10px;
	border-left: 1px dashed #ffb81c;
}
.info-campaign .promocode {
	width: 100%;
	margin-top: 20px;
	background-color: #eee;
	border-radius: 10px;
	color: #000 !important;
	font-weight: bold;
	font-size: 0.9rem !important;
	padding: 8px !important; 
	margin-bottom: 10px;
	line-height: 0.1rem
}
.info-campaign .promo .icon img {
	max-width: 100%;
	padding: 5px;
	border-radius: 10px;
}

.info-campaign .promo .copy h2 {
	font-size: 0.8rem;
	font-weight: 700;
	color: #ffb81c;
	padding-bottom: 3px;
	padding-top: 10px
}

.info-campaign .promo .copy p {
	text-align: left;
	color: #999;
	font-size: 0.7rem;
	line-height: 0.8rem;
	padding-bottom: 10px
}

.info-campaign .promo input[type="checkbox"] {
	width: 100%;
	box-sizing: border-box;
    padding: 0;
    position: absolute;
    left: 0;
    z-index: -1;
    height: 1.25rem;
    opacity: 0;
}

.pro-pg .info .loc {
	text-align: left; margin-top:5px; margin-bottom: 10px; float: left
}
.order-detail .loc {
	margin-top:5px; margin-bottom: 10px; float: left
}
.order-detail .location {
	font-size: 0.7rem;
	border: 1px solid #243746;
	padding: 4px 10px;
	border-radius: 4px;
	margin-right: 5px;
	
}
.pro-pg .info .location {
	font-size: 0.7rem;
	border: 1px solid #243746;
	padding: 4px;
	border-radius: 20px;
	margin-right: 5px;
	line-height: 1.8rem;
}

.pro-pg .info ul {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	list-style-type: none
}
.pro-pg .info ul li {
	padding: 0;
	font-size: 0.8rem;
	font-weight: 700;
}
.pro-pg .info ul li:before {
	padding: 10px 10px 0 0;

    font-size: 1.1rem;
    line-height: 0rem;
    font-weight: bold;
    color: #ffb81c;
    content: "\00B7";
  
}

.pro-pg .info h3 {
	font-size: 0.7rem;
	color: #999;
	font-weight: normal;
	padding-bottom: 5px;
}
.plan-includes .plan-info h2, 
.pro-pg .info .custom-control-label h2 {
	font-size: 0.75rem !important;
	height: 1.6rem;
	overflow: hidden;
	font-weight: 700;
	color: #243746;
}
.pro-pg .info div.custom-control-label h2.price {
	font-size: 1.2rem !important;
	line-height: 1.6 !important
}

.pro-pg .info div.custom-control-label .btn-sm {
	font-size: 0.9rem !important;
    line-height: 1.6rem !important;
    padding: 2px 1.2rem !important;
}
.pro-pg .info .custom-control-label h2 span {
	font-size: 0.8rem;
	color: #999;
	font-weight: normal
}
.pro-pg .info .custom-control-label h2 span.save {
	color: #ffb81c;
	font-weight: 700;
}
.pro-pg .info .promo .included-item {
	display: inline-block;
}


.included-item .only-text {
	width: 100%;
	margin: 5px auto;
}


.pro-pg label.var-option  {
	margin-bottom: 5px !important;
	margin-right: 5px !important;
}

.included-item .item {
	width: 80px;
	float: left;
	margin-top: 5px;
	margin-right: 10px;
}

.c-card,
.shipping {
	
	margin-right: 0px; 
    margin-left: 0px;
}
.included-item .item p{
	text-align: center;
	padding-top: 5px;
	font-size: 0.7rem !important;
	line-height: 0.8rem;
	font-weight: 700;
	color: #243746;
}
.items-img {
	width: 80px !important;
	height: 0;
	border: 1px solid #ccc !important;
	padding-bottom: 65px;
    position: relative;
    border-radius: 4px;
    margin-left: auto;
    margin-right: auto;
}

.items-img img {
	width: 100%;
    height: 100%;
    top: 0;
    left: 0;
	vertical-align: middle;
	-o-object-fit: contain;
    object-fit: contain;
	position: absolute;
}
.pro-pg .info .plan-box {
	width: 100%;
	margin: 10px auto 15px
}
.pro-pg .info .plan-box .custom-control {
	padding-left: 0
}
.pro-pg .info .plan-box .custom-checkbox,
.pro-pg .info .plan-box .custom-checkbox .custom-control-input {
	width: 100%;
	
}
.pro-pg .info .plan-box.opt-img .item {
	max-width: 80px;
    height: 0;
    padding-bottom: 75%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.pro-pg .info .opt-img label {
	display: inline-flex;
	align-items: center;
}
.pro-pg .info .opt-img .item img {
	width: 100%;
    height: 100%;
    top: 0;
    left: 0;
	vertical-align: middle;
	-o-object-fit: contain;
    object-fit: contain;
	position: absolute;
}
.pro-pg .info .opt-img .plan-info {
	width: calc(((100% - 260px)) - 5px) !important
}
.col2 .plan-includes {
	margin-bottom: 10px;
}
.plan-includes .plan-info:first-child, 
.pro-pg .info .opt-img.col2 .plan-info:first-child, 
.pro-pg .info .opt-img .plan-info:first-child {
	width: calc(105px - 5px) !important;

}

.pro-pg .info .opt-img .plan-info.last {
	width: calc(155px - 5px) !important;
}
.pro-pg .info .opt-img.col2 .plan-info {
	width: calc(((100% - 155px)) - 5px) !important
}
.plan-includes .plan-info.last, 
.pro-pg .info .opt-img.col2 .plan-info.last {
	width: calc(50px - 5px) !important;
}
.plan-includes {
	width: 100%;
	height: 80px;
	display: inline-flex;
    align-items: center;
}
.plan-includes .plan-info .item{
	width: 100%;
	border-radius: 10px;
	border: 1px solid #ccc;
	overflow: hidden;
}

.plan-includes .plan-info .item:before {
	position: absolute;
	content:"\00a0";
	background-color: #243746;
	right: auto;
    z-index: 1;
    background-size: 60% 60%;
    background-position: 50%;
    width: 20px;
    height: 20px;
    padding: 3px;
    border-radius: 50%;
    clear: both;
   
}

.plan-includes .plan-info .item:after {
	z-index: 10;
	left: 3px;
	width: 12px;
    height: 12px;
    padding: 10px 3px;
	position: absolute;	
	background: no-repeat 99% / 99% 99%;
    content: "";
    font-family: "Font Awesome 5 Free";
    background-image: url(../img/icon/white/check.svg);
}

.plan-choice .custom-checkbox.plan-btn .custom-control-label, 
.MultiCarousel .info .plan-box .custom-checkbox.plan-btn .custom-control-label {
	display: block !important;
}

.plan-choice .plan-info, 
.MultiCarousel .info .plan-info {
	width: calc((100% / 2) - 5px) !important;
}
.plan-includes .plan-info:nth-child(2), 
.plan-choice .plan-info:nth-child(2), 
.MultiCarousel .info .plan-info:nth-child(2) {
	width: calc(100% - 90px) !important
}

.MultiCarousel .info .plan-box .plan-btn .plan-info .item, 
.plan-choice .custom-checkbox.plan-btn .item {
	width: 100%;
    height: 0;
    padding-bottom: 75%;
    position: relative;
}
.MultiCarousel .info .plan-box .plan-btn .plan-info .item img, 
.plan-choice .custom-checkbox.plan-btn .item img {
	width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    vertical-align: middle;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
}

.MultiCarousel .MultiCarousel-inner .item > div {
	text-align: left;
	margin: 10px 0 !important;
	margin-left: 0 !important;
}

.MultiCarousel .info .plan-box .plan-btn .plan-info .item-pic {
	width: 100%;
    height: 0;
    padding-bottom: 75%;
    position: relative;
    background: #fff;
}

.MultiCarousel .info .plan-box .plan-btn .plan-info .item-pic img {
	width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    vertical-align: middle;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
}

.MultiCarousel .plan-includes .plan-info .item-pic:before {
	position: absolute;
	content:"\00a0";
	background-color: #243746;
	right: auto;
    
    background-size: 60% 60%;
    background-position: 50%;
    width: 20px;
    height: 20px;
    padding: 3px;
    border-radius: 50%;
    clear: both;
}

.MultiCarousel .plan-includes .plan-info .item-pic:after {
	z-index: 10;
	left: 15px;
	width: 12px;
    height: 12px;
    padding: 10px 3px;
	position: absolute;	
	background: no-repeat 99% / 99% 99%;
    content: "";
    font-family: "Font Awesome 5 Free";
    background-image: url(../img/icon/white/check.svg);
}

.MultiCarousel .info {
	padding-right: 0 !important
}
.plan-scroll {
	width: 40px;
	height: 40px;
	transition: all 0.3s;
}
.plan-scroll.leftLst {
	left: 10px;
}

.plan-scroll.rightLst {
	right: 10px;
}

.plan-scroll.leftLst.over, .plan-scroll.rightLst.over {
	background-color: rgba(0, 0, 0, 0.1) !important;
	color: #fff
}
.plan-scroll.leftLst.over:hover, .plan-scroll.rightLst.over:hover, 
.plan-scroll.leftLst.over:focus, .plan-scroll.rightLst.over:focus {
	background-color: rgba(0, 0, 0, 0.1) !important;
	color: #fff
}
.plan-scroll.leftLst, .plan-scroll.rightLst {
	
	color: #fff;
	border: 1px solid #eee;
	padding: 0.6rem 0.5rem;
	margin-top: 5px;
	bottom: 5px
}
.plan-scroll.leftLst:hover, .plan-scroll.rightLst:hover, 
.plan-scroll.leftLst:focus, .plan-scroll.rightLst:focus {
	color: #fff;
	background-color: #ffb81c;
}
.plan-choice .plan-info:first-child, 
.MultiCarousel .info .plan-info:first-child {
	width: 80px !important
}

.plan-choice .plan-info.w-100, 
.MultiCarousel .info .plan-info.w-100 {
	width: 100% !important;
	margin: 0;
	height: 35px;
	overflow: hidden;
}
.other-plan {
	margin-right: -15px !important;
}
.MultiCarousel .info .plan-info:first-child img {
	max-width: 100%
}
.plan-choice .plan-info p, 
.MultiCarousel .info .plan-info p {
	padding-top: 8px;
}
.plan-choice .plan-info p.rrr, 
.MultiCarousel .info .plan-info p.rrr {
	padding-top: 0px !important;
}
.pro-pg .info .plan-box .custom-checkbox .custom-control-label {
	width: 100%;
	border-radius: 10px;
	left: auto;

	background: #FFFAEA;
	border: 1px solid #FFFAEA;
	top: 0;
	padding: 15px 10px;
	
}
.plan-includes .plan-info h2, 
.pro-pg .info .plan-box .custom-checkbox .custom-control-label h2 {
	font-size: 0.8rem;
	line-height: 0.9rem;
	padding-bottom: 0
}
.pro-pg .info .plan-box .custom-checkbox .custom-control-label h2.small {
	font-size: 0.7rem;
	line-height: 0.8rem;
	padding-bottom: 0
}
.plan-includes .plan-info p, 
.pro-pg .info .plan-box .custom-checkbox .custom-control-label p {
	width: auto;
	font-size: 0.75rem;
	line-height: 0.87rem;
	margin-top: 0px;
	color: #999;
	text-align: left !important
}
.pro-pg .info .plan-box .custom-checkbox .custom-control-label .price {
	font-size: 1.5rem;
	text-align: right
}
.pro-pg .info .plan-box .custom-checkbox .custom-control-label .price span {
	color: #243746;
	font-weight: 500;
	font-size: 0.7rem;
}
.pro-pg .info .plan-box .custom-checkbox .custom-control-label .price span.month {
	content: " ";
	font-size: 0.7rem;
	color: #999;
}
.pro-pg .info .plan-box .custom-checkbox .custom-control-label .rrr.mth {
	font-size: 0.7rem;
	text-decoration: none !important;
}
 
.pro-info p.rrr.discount {
	color: #999;
	height: 18px;
}
 
.pro-pg .info .rrr {
	padding-top: 0;
	font-size: 0.7rem;
	text-decoration: line-through;
}

.pro-pg .info .rrr.discount {
	text-decoration: none !important;
}
.pro-info p.rrr.discount > span, 
.pro-pg .info .rrr.discount > span {
	text-decoration: line-through !important;
}
.pro-info p.rrr.discount:before, 
.pro-pg .info .rrr.discount span:before, 
.pro-info p.rrr.discount span.discount:before,
.pro-pg .info .plan-box .custom-checkbox .custom-control-label .rrr.mth:before {
	content: "" !important
}
.pro-info p.rrr.discount > span:before, 
.pro-pg .info .rrr:before, 
.pro-pg .info .plan-box .custom-checkbox .custom-control-label .rrr:before {
	content:"RM";
}
.pro-pg .info .rrr span:before {
	content:".";
}
.pro-info p.rrr.discount span.discount, 
.pro-pg .info .rrr.discount span.discount {
	color: #243746;
	text-decoration: none !important;
}

.pro-pg .info h2.ttl {
	font-size: 0.8rem !important;
	font-weight: 700;
	color: #ffb81c;
	margin-top: 10px;
}

.pro-pg .info .ttl span{
	float: right;
	margin-right: 6px;
}
.pro-pg .info .ttl span i {
	margin-left: 8px;
}
.pro-pg .info .ttl span .btn-text {
	border-color: #999
}

.pro-pg .info .ttl span .btn-text:hover {
	border-color: #243746 !important;
}


.pro-pg .info .ttl span .btn-text:not(.collapsed) .show {display:none}
.pro-pg .info .ttl span .btn-text.collapsed .hide {display:none}


.deliver .btn-text:not(.collapsed) .show {display:none}
.deliver .btn-text.collapsed .hide {display:none}

.collapse:not(.show) {

}
.pro-pg .info .option {
	width: 100%;
	margin: 8px auto;
	position: relative;
	display: inline-flex;
	align-items: center;
}

.pro-pg .info.planinclude .option{
	display: block;
}
.pro-pg .info.planinclude .option .opt-col {
	width: 100% !important;
}
.pro-pg .info.planinclude .option .opt-col > div {
	margin-top: 0 !important
}
.pro-pg .info .option .opt-col {
	width: calc(100% - ((100% / 3 ) - 5px) - (105px - 5px));
	margin-right: 5px;
}
.pro-pg .info .option .opt-col:first-child {
	width: calc((100% / 3) - 5px);
}
.pro-pg .info .option .opt-col:last-child {
	width: calc(105px - 5px)
}

.pro-pg .info .option.col2 {

}

.pro-pg .info .include-opt {
	padding: 10px;
    margin-top: -10px;
    background: #fff;
    z-index: 2 !important;
    position: relative;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 1px solid #eee;
}

.pro-pg .info .include-opt .option:nth-child(2n + 1) {
	border-top: 1px solid #eee;
	padding-top: 10px
}

.coverage.outlet h3:before {
	content: "\00B7 ";
	margin-right: 10px;
}

.coverage h3, 
.pro-pg .info .option h3 {
	margin-top: 0;
	font-weight: 700 !important;
	color: #666 !important;
	font-size: 0.8rem !important
}
.coverage h3 span, 
.coverage h4 {
	color: #243746 !important;
	font-size: 0.7rem !important;
	padding-bottom: 5px;
	font-weight: normal !important;
	float: none !important
}
.pro-pg .info .option  p {
	font-size: 0.8rem;
	text-align: left;
	color: #243746;
	

}
.pro-pg .info .option p span {
	color: #ffb81c;
}

.pro-pg .info .option  p  a span{
	font-size: 0.7rem;
	padding: 5px 6px;
	font-weight: 700;
	color: #243746 !important;
	border-radius: 15px;
	background: #eee;
}
.pro-pg .info h2.ttl span.right-link a span {
	padding: 3px 6px;
	color: #243746 !important;
	border-radius: 15px;
	font-weight: 700;
	font-size: 0.7rem;
	background: #eee;
}
.row .opt {
	padding-right: 15px !important;
}
.pro-pg .info .option  p  a:not(.collapsed) .show {
	display: none
}
.pro-pg .info .option  p  a.collapsed .hideopt {
	display: none 
}
.pro-pg .info .option  p  a img {
	width: 18px
}
.pro-pg .info .option  p  a:hover {
	color: #243746
}

.pro-pg .other-option .right-link .btn {
	margin-top: -8px !important;
	padding: 5px 10px !important;
	font-size: 0.6rem !important;
}

.pro-pg .info h2.ttl:after {
	content: "\00a0";
	position: absolute;
	top: 30px;
	left: 0;
	width: 30px;
	height: 4px;
	border-radius: 2px;
	background-color: #ffb81c;
}

.custom-control-label .plan-info {
	width: calc((100% / 3) - 5px);
	margin-right: 5px;
	float: left
}

.custom-control-label .plan-info.second {
	width: calc(((100% - ((100% / 3) - 5px))/3) - 10px);
	margin-right: 5px;
	float: left
}

.custom-control-label .plan-info.more {
	width: calc((100% / 2)/2 - 5px);
}

.custom-control-label .plan-info .discript {
	font-size: 0.8rem !important;
	color: #666 !important
}
.pro-pg .info .plan-box .custom-checkbox .custom-control-label::before {
	width: 100%;
	border-radius: 10px;
	left: 0;
	height: 100%;
	top: -1px;
	background-color: transparent;
	border-color: transparent;
	clear: both;
}

.pro-pg .info .plan-box .custom-checkbox .custom-control-label::after {
	left: auto;
	right: -1px;
	top: -1px;
	background-color: #eee;
	background-size: 60% 60%;
	background-position: 50%;
	width: 20px;
	height: 20px;
	padding: 3px;
	border-radius: 50%;
	clear: both;
}

.pro-pg .info .plan-box .custom-checkbox.plan-btn:hover .custom-control-label::after, 
.pro-pg .info .plan-box .custom-checkbox.active .custom-control-label::after, 
.pro-pg .info .plan-box .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
	background-color: #243746;
}
.pro-pg .info .plan-box .custom-checkbox.plan-btn:hover .custom-control-label::before, 
.pro-pg .info .plan-box .custom-checkbox.active .custom-control-label::before, 
.pro-pg .info .plan-box .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
	background-color: transparent;
	border-color: transparent;
}
.pro-pg .info .plan-box .custom-checkbox.plan-btn:hover .custom-control-label,
.pro-pg .info .plan-box .custom-checkbox.active .custom-control-label, 
.pro-pg .info .plan-box .custom-checkbox .custom-control-input:checked ~ .custom-control-label {
	background-color: transparent;
	border: 1px solid #243746;
}
.pro-pg .planinclude .plan-box .custom-checkbox.active .custom-control-label {
	border: 1px solid #eee;
}
.pro-pg .info .plan-box .custom-checkbox.plan-btn .custom-control-label,
.pro-pg .info .plan-box .custom-checkbox.active .custom-control-label {
	display: inline-flex;
    align-items: center;
}

.pro-pg .info .plan-box .custom-checkbox.plan-btn:hover .custom-control-label .price,
.pro-pg .info .plan-box .custom-checkbox.plan-btn:hover .custom-control-label .price span,
.pro-pg .info .plan-box .custom-checkbox .custom-control-input:checked ~ .custom-control-label .price, 
.pro-pg .info .plan-box .custom-checkbox .custom-control-input:checked ~ .custom-control-label .price span{
	color: #ffb81c;

}

.pro-pg .info .plan-box .custom-checkbox.plan-btn:hover .custom-control-label .price span.month,
.pro-pg .info .plan-box .custom-checkbox .custom-control-input:checked ~ .custom-control-label .price span.month {
	color: #243746;
}

.pro-pg .info .plan-box .custom-control-label .prefer-tag {
	padding: 5px 10px;
	right: 35px;
	top: -12px;
	border-radius: 5px;
	background-color: #243746;
	float: right;
	position: absolute;
	color: #fff;
	font-size: 0.7rem;
	line-height: 0.8rem;
}

.info .btn {
	min-width: auto !important;
}
.info .var-option .radio-black-line {
	font-weight: 700;
	border-color: #ccc;
	color: #999
}
.price-display {
	margin-right: 0;
	margin-left: 0
}

.float-price {
	position: fixed;
	width: 100%;
	margin: 0 auto;
	background-color: #fff;
	max-width: 100%;
	z-index: 999;
	transition: all 1s;
	border-top: 2px solid #ffb81c;
	padding-bottom:10px;
	bottom: 0
}

.float-price.btm {
	position: relative;
	background: #fafafa
}

.show {
	opacity:1;
    bottom:0;
}

footer, 
.body-container {
	transition: all 1s;
}

.body-container.add-bottom {
	padding-bottom: 100px;
}

.footer-fixed-bottom {
	display: none;
}

.float-price > div > div {
	align-items: center;
}
.float-price .upfront .tag-txt {
	font-size: 1rem;
	color: #999;
	line-height: 1rem;
	font-weight: 300;
}

.float-price .month .tag-txt {
	font-size: 1rem;
	color: #999;
	line-height: 1rem;
	font-weight: 300;
}

.float-price .month {
	border-right: 2px solid #ffb81c;
}

.float-price .plan .tag-txt {
	font-size: 0.8rem;
	color: #243746;
	line-height: 1rem;
	font-weight: 700;
}
.float-price .plan .details {
	width: 50%;
	float: left
}
.float-price .upfront .details, 
.float-price .month .details, 
.float-price .plan .details {
	font-size: 0.7rem;
	color: #999;
	line-height: 1rem;
	font-weight: 400;
}
.float-price .upfront .details span, 
.float-price .month .details span {
	font-weight: 700;
	color: #243746;
}
.float-price .plan .details span {
	float: right;
	font-weight: 700;
	color: #243746;
	padding-right: 10px
}
.float-price .plan .tag-txt span {
	font-size: 0.7rem;
	font-weight: normal;
}

.float-price .price {
	font-size: 1.1rem;
	color: #243746;
	font-weight: bold
}

.float-price .upfront {
	text-align: right !important
}
 

.float-price .upfront .price {
	font-size: 1.8rem;
}
.float-price .price:before {
	content: "RM";
	font-size: 0.8rem
}

.float-price .price span {
	font-size: 0.8rem
}
.float-price .upfront .input-group {
	width: 150px; float: left; margin-top: 10px;
}
.price-display .upfront .tag-txt {
	font-size: 1rem;
	color: #999;
	line-height: 2rem;
	font-weight: 300;
}

.price-display .month .tag-txt {
	font-size: 1rem;
	color: #999;
	line-height: 2rem !important;
	font-weight: 300;
}
.price-display .month {
	border-right: 2px solid #ffb81c;
}

.price-display .plan .tag-txt {
	font-size: 0.8rem;
	color: #243746;
	line-height: 1rem;
	font-weight: 700;
} 
.price-display .plan .details {
	font-size: 0.7rem;
	color: #999;
	line-height: 1.2rem;
	font-weight: 400;
}
.price-display .plan .details span {
	float: right;
	
	font-weight: 700;
	color: #243746;
}
.price-display.plan .tag-txt span {
	font-weight: normal;
}

.price-display .price {
	font-size: 1.6rem !important;
	color: #243746;
	font-weight: bold
}
.price-display .upfront .price {
	font-size: 1.8rem;
}
.price-display .price:before {
	content: "RM";
	font-size: 0.8rem
}

.price-display .price span {
	font-size: 0.8rem
}

.info .input-group > .input-group-prepend > .input-group-text {
	border: 1px solid #eee;
    width: 2rem;
    height: 2rem;
    background-color: #fff;
    border-radius: 50% !important
}


.info .input-group > .input-group-append > .input-group-text {
	border: 1px solid #eee;
   	width: 2rem;
    height: 2rem;
    background-color: #fff;
    border-radius: 50% !important;
    margin-left: -10px;
}

.info .btn-plus .subicon {
    margin-left: -13px;
  	width: 2rem;
    height: 2rem;

}

.info .btn-minus .subicon {
	width: 2rem;
    height: 2rem;
    
    margin-left: -16px;
}


.info .input-group .form-control {
	margin-left: 5px;
	margin-right: 5px;
	text-align: center;
	font-size: 1rem;
	height: 2rem;
	padding-left: 2px;
	padding-right: 2px;
	border-radius: 2rem;
	background-color: transparent;

}

.info .input-group {
	background-color: transparent;
	max-width: 170px;
	width: auto
}

.review .star-rating .rate {
	font-size: 1.2rem;
	padding-left: 10px;
	color: #243746;
	font-weight: 700
}

.user-info {
	width: 100%;
	position: relative;
	display: inline-flex;
	align-items: center
}

.user-info .user-pic {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #eee;
	margin-right: 10px;
}

.user-info .user h2{
	font-size: 0.8rem !important;
	padding-bottom: 3px;
}

.user-info .user p {
	font-size: 0.7rem !important;
	color: #999 !important
}

.user-info .star-rating {
	display: flex;
	align-items: center;
	right: 0;
	position: absolute;
}

.user-info .star-rating p {
	font-size: 0.6rem !important;
	color: #999
}

.user-info .star-rating .list-inline-item:not(:last-child) {
    margin-right: 0.2rem;
}

.user-info .star-rating .list-inline-item .fas {
	font-size: 0.8rem
}

.user-comment {
	padding: 5px 0px 10px;
}

.review .line{
	margin-top: 6px;

}
.review .nav-tabs .nav-link{
	border: 0px;
	text-align: center;
	font-weight: normal;
	color: #999;
	font-size: 0.7rem
}
.review .nav-tabs .nav-link:after {
    content: " ";
    height: 8px;
    width: 10px;
    float: none;
    margin-top: 5px;
    display: block;
    margin-right:auto;
    margin-left: auto;
    background-image: url(../img/icon/black/caret.svg);
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transform: rotate(
-90deg
);
    -ms-transform: rotate(-90deg);
    transform: rotate(
-90deg
);
}

.shop .shop-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #fff;
	display: inline-flex;
	align-items: center;
	float: left;
	margin-right: 10px;
	overflow: hidden;
	border: 1px solid #eee;
}
.shop h2 {
	padding-top: 15px;
}
.shop .shop-icon img {
	max-width: 100%
}

.shop p {
	font-size: 0.7rem;
	color: #999
}
.shop p.follow {
	font-size: 0.7rem;
	color: #999;
	margin-left: 30px;
}

.shop p.follow span {
	font-size: 1.2rem;
	color: #243746;
	font-weight: 700
}

.rating-pro {
	width: 100%
}
.rating-pro > ul > li{
	width: 20%;
	float: left;
}
.rating-pro > ul > li:not(:first-child){
	padding-left: 10px;
}
.rating-pro > ul li p {
    float: right;
    margin-top: -18px !important;
}

.more-info h2 {
	padding-bottom: 0px !important
}

.more-info , 
.more-info p, 
.more-info p span,
.more-info li,
.more-info li p,
.more-info li p span,
.more-info li span {
	font-size: 0.8rem !important;
	font-family: 'Roboto' !important
}

.more-info p a {
	float: none !important
}
.more-info img {
	max-width: 100%;
	padding-bottom: 10px
}

.flex-container a:hover,
.flex-slider a:hover {
  outline: none;
}
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
.flex-pauseplay span {
  text-transform: capitalize;
}
/* ====================================================================================================================
 * BASE STYLES
 * ====================================================================================================================*/
.flexslider {
  margin: 0;
  padding: 0;
}
.flexslider .slides > li {
  display: none;
  -webkit-backface-visibility: hidden;
}
.flexslider .slides img {
  width: 100%;
  display: block;
}
.flexslider .slides:after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
html[xmlns] .flexslider .slides {
  display: block;
}
* html .flexslider .slides {
  height: 1%;
}
.no-js .flexslider .slides > li:first-child {
  display: block;
}
/* ====================================================================================================================
 * DEFAULT THEME
 * ====================================================================================================================*/
.flexslider {
  margin: 0 15px 10px auto;
  position: relative;

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
 overflow: hidden;

}

.flexslider .overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 20%;
	z-index: 10;
	background: rgb(0,0,0);
background: -moz-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
background: -webkit-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=0.8);
}
.flexslider .overlay .share {
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 10;
	font-size: 0.7rem;
	display: inline-flex;
	align-items: center;
}
.flexslider .overlay .share a {
	color: #fff
}
.flexslider .overlay .share img {
	width: 20px;
	height: 20px;
}
.flexslider .overlay .offer-tag {
    width: 100%
}
.flexslider .overlay .offer-tag .dis-tag,
.flexslider .overlay .offer-tag .event-tag {
	font-size: 1.2rem;
	line-height: 0.8rem;
	padding:10px;
	float: left
}
.flexslider .overlay .offer-tag .dis-tag span,
.flexslider .overlay .offer-tag .event-tag span {
	font-size: 0.7rem;
	line-height: 0rem;
}

.flex-viewport {
  max-height: 2000px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.loading .flex-viewport {
  max-height: 300px;
}

.carousel li {
  margin-right: 5px;
  
}

#carousel.flexslider {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;

}

.flex-direction-nav {
  height: 0;
}
.flex-direction-nav a {
  text-decoration: none;
  display: block;
  width: 40px;
  height: 40px;
  margin: -20px 0 0;
  position: absolute;
  top: 50%;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  color: #243746;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {
  
  font-size: 20px;
  display: inline-block;
  padding: 10px;
  color: #243746;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.flex-direction-nav a.flex-next:before {
 	
}
.flex-direction-nav .flex-prev {
  left: -50px;
}
.flex-direction-nav .flex-next {
  right: -50px;
  text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
  opacity: 0.7;
  left: 10px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
  opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
  opacity: 0.7;
  right: 10px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
  opacity: 1;
}
.flex-direction-nav .flex-disabled {
  opacity: 0!important;
  filter: alpha(opacity=0);
  cursor: default;
  z-index: -1;
}
.flex-pauseplay a {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 5px;
  left: 10px;
  opacity: 0.8;
  z-index: 10;
  overflow: hidden;
  cursor: pointer;
  color: #000;
}
.flex-pauseplay a:before {
 
  font-size: 20px;
  display: inline-block;
}
.flex-pauseplay a:hover {
  opacity: 1;
}
.flex-pauseplay a.flex-play:before {
  content: '\f003';
}
.flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: -40px;
  text-align: center;
}
.flex-control-nav li {
  margin: 0 6px;
  display: inline-block;
 
}
.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background: #666;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-indent: -9999px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.flex-control-paging li a:hover {
  background: #333;
  background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
  background: #000;
  background: rgba(0, 0, 0, 0.9);
  cursor: default;
}
.flex-control-thumbs {
  margin: 5px 0 0;
  position: static;
  overflow: hidden;
}
.flex-control-thumbs li {
  width: 25%;
  float: left;
  margin: 0;
}
.flex-control-thumbs img {
  width: 100%;
  height: auto;
  display: block;
  opacity: .7;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.flex-control-thumbs img:hover {
  opacity: 1;
}
.flex-control-thumbs .flex-active {
  opacity: 1;
  cursor: default;
}

.sliders { margin: 50px 0 10px!important; }
#slider {
	border: 1px solid #eee;

}

.flexslider li .pro-img {
	position: relative;
    width: 100%;
    padding-bottom: 75%;

}

.flexslider li .pro-img img {
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -o-object-fit: contain;
    object-fit: contain;
    vertical-align: middle;
    border-style: none;
}

.flexslider li .pro-img iframe {
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -o-object-fit: contain;
    object-fit: contain;
    vertical-align: middle;
    border-style: none;
}
#carousel ul {
	margin: auto;
}
#carousel li {margin-right: 5px; -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; overflow: hidden; border: 1px solid #eee; transition: all 0.3s}
#carousel img {display: block; cursor: pointer; opacity: 0.6}
#carousel .flex-active-slide,  
#carousel li:hover {opacity: 1; border: 1px solid #243746;}
#carousel li:hover img, 
#carousel .flex-active-slide img {opacity: 1;}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  /*padding-top: calc(25vh); *//* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.6);
}

.modal.modal-big {
	/*padding-top: calc(10vh); */
}

/* Modal Content (image) */
.modal-content {
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  display: block;

}
.modal .welcome {
	text-align: center
}
.modal .welcome  h2 {
	font-size: 1rem;
	color: #243746;
}

.modal .welcome p {
	color: #999;
	font-size: 0.8rem
}

.modal .modal-sm h2 {
	font-size: 1rem;
	color: #243746;
}

.modal .modal-sm p{
	color: #999;
	font-size: 0.8rem
}

.welcome .modal-content {
	padding: 0px;
}
/* Caption of Modal Image */
#caption {
  margin: 0 auto;
  display: block;
 
  max-width: 500px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  
}
/* Add Animation */
.select-promo .modal-content,
#caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}
.modal-content.promo p {
	font-size: 0.7rem;
	line-height: 0.9rem;
}
.modal-content.promo {
	-webkit-animation-name: zoomon;
  -webkit-animation-duration: 0.6s;
  animation-name: zoomon;
  animation-duration: 0.6s;
}
.modal-content.promo button {
	width: 100%
}

.modal-content .qr {
	max-width: 80%
}

.extra-info ul {
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	list-style-type: none
}

.extra-info li {
	float: left;
	margin-bottom: 3px;
	padding-right: 2px
}
.extra-info li p {
	
	line-height: 0.7rem
}
.extra-info li a p{
	color: #999
}

.extra-info li a:hover p {
	color: #666
}


.extra-info ul li p:after {
	padding: 0px 1px;
    font-size: 0.6rem;
    line-height: 0.1rem;
    color: #ccc;
    font-weight: bold;
    content: " | ";
}

.input-group-append .btn {
	margin: 6px 10px;
	padding: 3px 8px;
	border-radius: 30px !important;
	line-height: 1.3rem
}

@-webkit-keyframes zoom {
  from {bottom: -500px} 
  to {bottom: -1.75rem}
}

@keyframes zoom {
  from {bottom: -500px} 
  to {bottom: -1.75rem}
}


@-webkit-keyframes zoomon {
  from {transform: scale(0);} 
  to {transform: scale(1);}
}

@keyframes zoomon {
  from {transform: scale(0);} 
  to {transform: scale(1);}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 25px;
  color: #fff;
  font-size: 30px;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #ffc107;
  text-decoration: none;
  cursor: pointer;
}
.float-price .buy {
	padding-right: 0;
	display: flex
}
.float-price .bottom-txt {
	font-size: 0.6rem;
	color: #999
}

.float-price .icon {
	margin: 0 auto 5px;
	width: 30px;
	height: 30px;
}

.float-price .icon-home {
	background-position: center;
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-image: url('../img/icon/black/home.png');
}

.float-price .icon-chat {
	background-position: center;
	background-size: 30px 30px;
	background-repeat: no-repeat;
}
.float-price .icon-list {
  background-image: url(../img/icon/black/block-list.png);
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: center center;
 
}
.float-price .icon-plan {
  background-image: url(../img/icon/black/bag.png);
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: center center;
 
}
.float-price .icon-search {
  background-image: url(../img/icon/black/search.png);
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: center center;
 
}
.float-price .icon-fav {
	background-position: center;
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-image: url('../img/icon/black/rating.png');
}
.icon-addfav {
	background-position: center;
	background-size: 20px 20px;
	background-repeat: no-repeat;
	background-image: url('../img/icon/black/fav.png');
}
.float-price .icon-addfav {
	background-position: center;
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-image: url('../img/icon/black/fav.png');
}
.grand-total {
	border-top: 1px dashed #243746;
	margin-top: -10px !important;
	border-radius: 0 0 10px 10px !important;
	
	padding: 15px 15px  0 !important;

}

.grand-total .invoice-price p {
	color: #FFB81C !important;
	font-size: 2rem !important
}
.promo-code {
	margin-bottom: 15px;
}
.promo-code .form-control {
	background: #fff;
	border-color: #243746;
	border-right: 0px;
	height: 2rem
}
.promo-code .input-group-text {
	padding: 0;
	background: #fff;
	border-color: #243746;
	border-left: 0;
	height: 2rem;
}

.promo-code .input-group-text .btn {
	height: 2rem;
	font-size: 0.7rem;
	line-height: 1.3rem;
	margin-right: -1px;
}

.form-group input[type="file" i] {
	font-size: 0.8rem;
	height: 2.2rem;
	color: #495057;
	padding: 0.1rem 0.75rem;
}

.upload {
	background-color: transparent;
    border: 1px solid #eeeeee;
    margin-top: 6px;
    margin-right: 15px;
    margin-left: 20px;
    border-radius: 20px;
    transition: all 0.3s;
    text-align: center;
    position: relative;
}

.upload label {
	width: 100%;
	height: 100px;
	margin: 60px auto 40px;
	text-align: center;
	background-image: url(../img/icon/grey/plus@2x.png);
	background-size: 50px 50px;
	background-repeat: no-repeat;
	background-position: top center;
	padding-top: 60px;
	overflow: hidden;
	
}

.upload input[type="file" i] {
	height: 180px;
	width: 100%;
	top: 0;
	right: 0;
	margin: 0;
	text-align: center;
	opacity: 0;
	position: absolute;

}

.upload .thumbnail-img {
	width: 100%;
	height: 200px;
	margin-bottom: -200px;
	overflow: hidden;
	border-radius: 20px;
	text-align: center;
}

.upload .thumbnail-img img {
	max-height: 100%;
	padding: 10px;
	border-radius: 20px;
}

div.highlight {
	border-color: #fc0000;
	margin-left: 15px
}

div.highlight h2 {
	color: #db0535 !important
}

.forms-wizard {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  display: table;
  table-layout: fixed;
  border-radius: 0.35rem;
  border: 0;
}

.forms-wizard.order-flow {
	width: calc(100% - 100px);
	margin: 0 auto;
}

.forms-wizard li {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 1rem 0;
  color: #adb5bd;
  position: relative;
}



.forms-wizard.order-flow li{
	 color: #999;
	 font-size: 0.7rem;
	 line-height: 3rem ;
	 cursor: default !important;
}

.forms-wizard.order-flow li:last-child {
	width: 40px;
}

.forms-wizard.order-flow li p{
	width: 200px;
	margin-left: calc((40px - 200px) / 2);
	text-align: center;
	line-height: 0.8rem;
	color: #999;
	font-size: 0.8rem;
	font-weight: normal
}

.forms-wizard.order-flow li.active p {
	font-size:0.8rem;
	font-weight: 700;
	color: #203546;
}
.forms-wizard.order-flow li.done p {
	font-size:0.8rem;
	font-weight: 700;
	color: #ffb81c;
}
.forms-wizard.order-flow li p span:after {
	content: "\00a0"
}
.forms-wizard.order-flow li p span {
	font-size: 0.7rem;
	font-weight: normal;
	color: #999
}
.forms-wizard li .nav-link {
  display: block;
  padding: 0;
  color: #adb5bd;
  font-weight: normal;
  text-align: center;
  border: 0px;
  font-size: 0.7rem;
  margin: 0 !important;
}
.forms-wizard li .nav-link:after {
	display: none
}

.forms-wizard li::after, .forms-wizard li::before {
  position: absolute;
  height: 4px;
  top: 45%;
  margin-top: -1rem;
  width: 50%;
  content: '';
  background: #dee2e6;
  z-index: 5;
  transition: all .2s;
}
.forms-wizard.order-flow li::before {
	width: 100%;
	left: 0
}

.forms-wizard.order-flow li::after {
	width: 100%;
	left: 0
}
.forms-wizard.order-flow li::after, .forms-wizard.order-flow li::before {
  background: #ccc;
}
.forms-wizard.order-flow li.active::after {
	background: #fff;
  	animation: progress-active 2s ease infinite;
}
.forms-wizard li::after {
  left: 50%;
}

.forms-wizard li::before {
  left: 0%;
}

.forms-wizard li:first-child::before {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.forms-wizard li:last-child::after {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.forms-wizard li em {
  font-style: normal;
  font-size: 1rem;
  background: #ced4da;
  color: #fff;
  text-align: center;
  padding: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 25px;
  display: block;
  margin: 0 auto 0.5rem !important;
  position: relative;
  z-index: 7;
  transition: all .2s;
}

.forms-wizard.order-flow li.non-success:after {
	background: #ccc
}
.forms-wizard.order-flow li.non-success em {
	background: #ccc
}
.forms-wizard.order-flow li.non-success p {
	color: #999
}
.forms-wizard.order-flow li.active.error:before {
	background: #fc0000
}

.forms-wizard.order-flow li em {
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 40px;
	background: #ccc;
	margin: 0 0 0.5rem !important;

}
.forms-wizard.order-flow li.error em {
	background: #fc0000
}

.forms-wizard.order-flow li.done.error:after {
	background: #fc0000
}

.forms-wizard.order-flow li.done.error p {
	color: #fc0000
}

.forms-wizard.order-flow li em[class*="of-icon-"] {
	background-position: center;
	background-size: 30px 30px;
	background-repeat: no-repeat;
}
.forms-wizard.order-flow li em.of-icon-order, .forms-wizard.order-flow li.done em.of-icon-order  {
	background-image: url('../img/icon/black/myorder@2x.png');
}
.forms-wizard.order-flow li.active em.of-icon-order {
	background-image: url('../img/icon/red/myorder@2x.png');
}

.forms-wizard.order-flow li em.of-icon-pay, .forms-wizard.order-flow li.done em.of-icon-pay {
	background-image: url('../img/icon/black/card.png');
}
.forms-wizard.order-flow li.active em.of-icon-pay {
	background-image: url('../img/icon/red/card.png');
}

.forms-wizard.order-flow li em.of-icon-verify-kyc, .forms-wizard.order-flow li.done em.of-icon-verify-kyc {
	background-image: url('../img/icon/black/edit-profile.png');
}
.forms-wizard.order-flow li.active em.of-icon-verify-kyc {
	background-image: url('../img/icon/red/edit-profile.png');
}

.forms-wizard.order-flow li em.of-icon-success, .forms-wizard.order-flow li.done em.of-icon-success {
	background-image: url('../img/icon/black/checked.png');
}
.forms-wizard.order-flow li.active em.of-icon-success {
	background-image: url('../img/icon/red/checked.png');
}

.forms-wizard.order-flow li em.of-icon-active, .forms-wizard.order-flow li.done em.of-icon-active {
	background-image: url('../img/icon/black/bag.png');
}
.forms-wizard.order-flow li.active em.of-icon-active {
	background-image: url('../img/icon/red/bag.png');
}

.forms-wizard.order-flow li em.of-icon-cancel, .forms-wizard.order-flow li.done em.of-icon-cancel, .forms-wizard.order-flow li.active em.of-icon-cancel {
	background-image: url('../img/icon/white/close.png');
}
.forms-wizard.order-flow li em.of-icon-refund, .forms-wizard.order-flow li.done em.of-icon-refund {
	background-image: url('../img/icon/black/transection.png');
}
.forms-wizard.order-flow li.active em.of-icon-refund {
	background-image: url('../img/icon/red/transection.png');
}
.forms-wizard.order-flow li em.of-icon-overdue, .forms-wizard.order-flow li.done em.of-icon-overdue, .forms-wizard.order-flow li.active em.of-icon-overdue {
	background-image: url('../img/icon/white/warning.png');
}

.forms-wizard.order-flow li em.of-icon-ceases, .forms-wizard.order-flow li.done em.of-icon-ceases {
	background-image: url('../img/icon/black/delele.png');
}
.forms-wizard.order-flow li.active em.of-icon-ceases {
	background-image: url('../img/icon/red/delele.png');
}

.forms-wizard.order-flow li em.of-icon-loc, .forms-wizard.order-flow li.done em.of-icon-loc {
	background-image: url('../img/icon/white/location.png');
}
.forms-wizard.order-flow li.active em.of-icon-loc {
	background-image: url('../img/icon/red/location.png');
}

.forms-wizard.order-flow li em.of-icon-deliver, .forms-wizard.order-flow li.done em.of-icon-deliver {
	background-image: url('../img/icon/white/delivery.png');
}
.forms-wizard.order-flow li.active em.of-icon-deliver {
	background-image: url('../img/icon/red/delivery.png');
}



@keyframes progress-active {
  0% {
    opacity: .9;
    width: 0;
  }
  100% {
    opacity: 0;
    width: 100%;
  }
}

.forms-wizard.order-flow li em img {
	width: 30px
}
.forms-wizard li.done span {
  color: #203546;
}

.forms-wizard li.active .nav-link {
  color: #495057;
}

.forms-wizard li.active em {
  background: #203546;
  color: #ffb81c;
}

.forms-wizard li.active::after, .forms-wizard li.active::before {
  background: #203546;

}

.forms-wizard li.done em {

  background: #ffb81c;
  overflow: hidden;
}

.forms-wizard li.done em::before {
  width: 42px;
  height: 42px;
  font-size: 1.2rem;
  line-height: 40px;
  text-align: center;
  display: block;
}

.forms-wizard li.done::after, .forms-wizard li.done::before {
  background: #ffb81c;
}

.forms-wizard li.done:hover {
  color: #495057 !important;
}

.forms-wizard li:hover {
  color: #6c757d;
}
.forms-wizard.order-flow li:hover {
 
}
.forms-wizard-alt .forms-wizard li {
  font-size: 0.9rem;
}

.forms-wizard-alt .forms-wizard li em {
  width: 12px;
  height: 12px;
  line-height: 12px;
  text-indent: -999rem;
  border: #fff solid 2px;
}

.forms-wizard-vertical .forms-wizard {
  display: block;
  width: 100%;
  float: left;
}

.forms-wizard-vertical .forms-wizard li {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%
}
.forms-wizard-vertical .forms-wizard li:last-child {
	 width: 100%
}

.forms-wizard-vertical .forms-wizard li::before, .forms-wizard-vertical .forms-wizard li::after {
  width: 2px;
  height: 100%;
  left: calc((32px - 2px));
}
.forms-wizard-vertical .forms-wizard li.active::before, .forms-wizard-vertical .forms-wizard li.active::after {
	background: #ccc;
}
.forms-wizard-vertical .forms-wizard li.last::before, .forms-wizard-vertical .forms-wizard li.last::after {
	display: none
}


.forms-wizard-vertical .forms-wizard li {
  text-align: left;
  display: flex;
  align-items: center;
  align-content: flex-start;
  padding: 0.75rem;
  border-radius: 0.4rem;
  transition: all .2s;

}

.forms-wizard-vertical .forms-wizard li em {
	width: 40px;
  	margin: 0 0.75rem 0 0;
}
.forms-wizard-vertical .forms-wizard li em[class*="of-icon-"] {
	background-position: center;
	background-size: 20px 20px;
	background-repeat: no-repeat;
}
.forms-wizard-vertical .forms-wizard li p {
	width: calc(100% - 40px);
	margin-top: -15px;
	text-align: left;
	margin-left: 15px;
}
.forms-wizard-vertical .forms-wizard.order-flow li.active::after {
	display: none
}
.forms-wizard-vertical .forms-wizard li a:active, .forms-wizard-vertical .forms-wizard li a:focus, .forms-wizard-vertical .forms-wizard li a:hover {
  background: #e9ecef;
  color: #495057 !important;
}

.forms-wizard-vertical .forms-wizard li.active a {
  background: #203546;
  color: #fff;
}
.forms-wizard-vertical .forms-wizard li p, 
.forms-wizard-vertical .forms-wizard li.active p {
	color: #ffb81c;
	font-weight: 700
}

.forms-wizard-vertical .forms-wizard li.active p .colored {
	color: #ffb81c;
}

.forms-wizard-vertical .forms-wizard li.active a:active, .forms-wizard-vertical .forms-wizard li.active a:focus, .forms-wizard-vertical .forms-wizard li.active a:hover {
  color: #fff !important;
}

.forms-wizard-vertical .forms-wizard li.active a em {
  background: rgba(255, 255, 255, 0.2);
}

.forms-wizard-vertical .form-wizard-content {
  width: 70%;
  overflow: auto;
}

.order-flow-msg {
	font-size: 0.8rem;
	color: #999;
	line-height: 1rem;
	margin-bottom: 20px;
}

.order-flow-msg.warning {
	color: #fc0000
}

.carousel-indicators.brands {
	bottom: -30px !important;
}

.carousel-indicators.brands li {
	background-color: #ccc;
	margin-right: -4px;
	opacity: 1
}
.carousel-indicators.brands li.active {
	background-color: #ffb81c;
}
.campaign .carousel-indicators.brands li {
	opacity: 0.6
}
.campaign .carousel-indicators.brands li.active {
	background-color: #fff;
	opacity: 1
}
.rewards {
	text-align: right
}
.rewards .var-option .btn {
	min-width: auto !important;
	margin-bottom: 10px;
}

.select-promo {
	width: 100% !important;
	min-width: 100%;
	position: absolute;
	left: 0;
	bottom: -1.8rem;
}

.add-address {
	width: 80% !important;
	min-width: 80%;
	margin: 0 auto;
}

.add-address .modal-content, 
.select-promo .modal-content {
	padding: 0
}

.extra-info {
	background-color: #eee;
	color: #999;
	padding-top: 30px;
	padding-bottom: 30px;
}

.extra-info h1 {
	font-size: 0.9rem;
	font-weight: normal;
	padding-top: 5px;
	color: #666;
	line-height: 1.2rem;
	padding-bottom: 0px;
}
.extra-info ul[class*="col-"] {
	padding-left: 15px;
	padding-right: 15px
}
.extra-info a h2 {
	margin-bottom: 5px;
	font-weight: 500;
	font-size: 0.8rem;
	padding-top: 5px;
} 

.extra-info p {
	font-size: 0.7rem
}

.controls-top {
	position: absolute;
	width: 100%;
	height: 100%
}

.campaign .controls-top {
	overflow: hidden;
}

 
.controls-top .btn-floating {
	z-index: 10;
	position: absolute;
	width: 50px;
	height: 50px;
	background-color: #fff;
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	top: calc(50% - 25px);
	box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.1)
}

.campaign .controls-top .btn-floating {
	z-index: 10;
	position: absolute;
	width: 50px;
	height:calc(100% - 20px);
	border-radius: 10px;
	text-align: center;
	top: 10px;
	background: transparent;
	box-shadow: none;
	overflow: hidden;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	cursor: pointer;
	vertical-align: middle;
	justify-content: center;
  	align-content: center;
  	flex-direction: column;
  	display: flex;
  	color: rgba(0, 0, 0, 0.3);
}

.campaign .controls-top .btn-floating:hover {
	background: rgba(0, 0, 0, 0.3);
	color: #fff 
}

.controls-top .btn-floating.left {
	left: -15px
}

.controls-top .btn-floating.right {
	right: -15px;
}

.controls-top .btn-floating:hover.left {
	left: 8px
}

.controls-top .btn-floating:hover.right {
	right: 8px;
}

.partner img{
	max-width: 100%;
	padding: 0px 30px 0px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.function-icon {
	width: 100%;
	margin: 10px auto;
	position: relative;
	text-align: center
}

.function-icon .noti-auto {
	position: absolute;
	left: 50%;
	top: -5px;
	font-size: 0.7rem;
	font-weight: bold;
	background-color: #fff;
	border: 2px solid #ffb81c;
	color: #ffb81c;
	padding: 2px 5px;
	border-radius: 20px;
}
.function-icon .noti-auto.red {
	left: 49%;
	top: 25px;
	border: 2px solid #ff0000;
	color: #ff0000;
	padding:4px 4px;
	line-height: 0.7rem;
}
.function-icon .noti-auto.orange {
	left: 49%;
	top: 25px;
	border: 2px solid #FF9138;
	color: #FF9138;
	padding:4px 4px;
	line-height: 0.7rem;
}

.function-icon .noti-auto.green {
	left: 49%;
	top: 25px;
	background-color: #fff;
	border: 2px solid#28a745;
	color: #28a745;
	padding:4px 4px; line-height: 0.7rem;
	
}

.function-icon p {
	font-size: 0.7rem;
	color: #999;
	padding-top: 10px
}
.function-icon img {
	max-width: 50px;
}

.user-fav {
	display: inline-flex;
	align-items: center;
}

.user-fav img {
	width: 30px
}

.user-fav p {
	font-size: 0.8rem;
	color: #243746;
	font-weight: bold;
}

.user-fav p span {
	color: #999;
	font-size: 0.6rem;
	font-weight: normal;
	padding-left: 20px
}
footer .logos {
	width: 100%;
	position: relative;
	display: inline-flex;
	align-items: center;
}
footer .logos div {
	width:33.33%;
	margin-bottom: 8px
}
footer .logos div img {
	max-width: 50%;
	text-align: center;
}

.user-dw .note-number {
	padding: 3px;
	font-size: 0.6rem;
	color: #fff;
	background-color: #ffb81c;
	border-radius: 5px;
	line-height: 0.8rem;
	float: right;
}
header .search .input-group .form-control {
	background-color: #fff;
	border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}

header .search .input-group .input-group-prepend .input-group-text {
	border-color: #fff;
	background-color: #fff
}

.add-margin-10 {
	margin: 20px auto 0;
}
.subicon-phone,
.subicon{
	 height: 20px;
    width: 20px;
}
.subicon-phone:after {
	display:inline-block;
    height:20px;
    width:20px;
    content: "";
    background:url(../img/icon/black/mobile.png) no-repeat 0 0;
    background-position: 0 -2px;
    background-size: 20px 20px;
}
.pd-adjust {
	padding: 0;
	line-height: 0
}
.noti-list, 
.sub-list {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
	padding: 0
}
.sub-list.cardsub-list {
	border: 1px solid #eee;
	border-radius: 10px;
	margin-bottom: 8px;
}

.ex-h3 {
	font-size: 0.8rem;
	padding-bottom: 5px;
	font-weight: normal;
	color: #243746;
	font-style: italic;
}

.sub-list .img {
	display: inline-block;
    width: 120px;
    height: 120px;
    background-color: #eeeeee;
    margin: 0;
    position: relative;
    border-radius: 10px 0 0 10px;
    overflow: hidden;
}

.sub-list .promo {
	background-color: #ffffff !important;
}


.sub-list .img > .pro-img {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    margin-left: auto;
    margin-right: auto;
}

.sub-list .img > .pro-img img {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    vertical-align: middle;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    flex-shrink: 0;
    transition: all 0.3s;
}

.sub-list .promo > .pro-img img{
	padding: 20px;
}

.noti-list .details {
	width: 100%;
	display: inline-block;
	border-radius: 0 10px 10px 0;
	padding: 15px;
}
.sub-list .details {
	width: calc(100% - 120px);
	display: inline-block;
	border-radius: 0 10px 10px 0;
	padding: 8px 15px;
}
.noti-list .details p.pro-ttl, 
.sub-list .details p.pro-ttl {
	padding-top: 0px;
	font-size: 0.8rem;
	color: #243746;
	height: 0.9rem;
	overflow: hidden;
	padding-right: 80px
}

.sub-list .details p.pro-ttl:after {
	content:"...";
}
.voucher p.pro-ttl {
	padding-right: 0 !important
}
.voucher p.date {
	margin-top: 20px;
}

.noti-list .details p.pro-ttl {
	padding-right: 15px;
}
.noti-list .details p {
	padding-top: 10px;
	font-size: 0.7rem;
	color: #666
}
.noti-list .details p.pro-ttl span {
	padding: 3px 10px;
	margin-top: 0px;
	font-weight: 700;
	font-size: 0.6rem;
	color: #243746;
	background-color: #ffb81c;
	border-radius: 5px;
}
.sub-list .details p.order span {
	padding: 3px 10px;
	margin-top: 0px;
	
	font-weight: 700;
	font-size: 0.6rem;
	color: #243746;
	float: right;
	border: 1px solid #243746;
	border-radius: 5px;
}
.sub-list .details p.order span.red {
	color: #fc0000;
	border: 1px solid #fc0000;
}
.noti-list .details p.pro-price, 
.sub-list .details p.pro-price {
	color: #ffb81c;
    font-size: 1rem;
    font-weight: bold;
    line-height: 2rem;
    position: relative;
    padding-top: 0px;
}

.sub-list .details p.pro-price:before {
	content: "RM";
	font-size: 0.8rem;

}

.sub-list .details p.pro-price span {
    font-size: 0.8rem;
}
.sub-list .details p.pro-price span.per {
    font-weight: normal;
    color: #243746;
}
.sub-list .details .billing {
	width: 100%;
	display: inline-flex;
	border-top: 1px solid #eee
}
.sub-list .details p.date.price {
	width: 50%;
	line-height: 1rem;
	font-size: 0.7rem;
	font-weight: normal;
	color: #999
}
.sub-list .details p.date.price span.pr:before {
	content: "RM";
	font-size: 0.7rem;
}

.sub-list .details p.date.price span {
	color: #243746;
	font-size: 1.1rem;
	font-weight: 700
}
.sub-list .details p.date.price span.per, 
.sub-list .details p.date.price span.cent{
    font-size: 0.7rem;
    color: #243746;
    
}
.details.bill p.pro-ttl span {
	margin-top: -15px;
}

.details.bill p.order {
	color: #999
}
.sub-list .details p span.tag {
	padding: 3px 10px;
	background-color: #FAE9BE;
	color: #ffb81c;
	font-weight: 700;
	font-size: 0.7rem;
	border-radius: 10px;
	
}

.sub-list .details p span.tag-voucher {
	padding: 3px 10px;
	font-weight: 700;
	font-size: 0.8rem;
	border-radius: 10px;
	background-color: #ffb81c;
	color: #fff;
}
.sub-list .details p span.sub-promo {
	padding: 3px 10px;
	font-weight: 700;
	font-size: 0.8rem;
	border-radius: 10px;
	background:#fff9e7;
	color: #FFB81C;
}
.sub-list .details p span.free-shipping {
	padding: 3px 10px;
	font-weight: 700;
	font-size: 0.8rem;
	border-radius: 10px;
	background-color: #243746;
	color: #FFB81C;
}
.sub-list .details p span.tag-empty {
	padding: 3px 10px;
	background-color: transparent;
	color: #ffb81c;
	font-weight: 700;
	font-size: 0.7rem;
	border-radius: 10px;
	
}
.noti-list .details p.date, 
.sub-list .details p.date {
	font-size: 1rem;
	font-weight: 700;
	color: #243746;
	padding-top: 10px
}
.noti-list .details p.date span, 
.sub-list .details p.date span {
	font-size:0.6rem;
	color: #999;
	font-weight: normal
}
.noti-list .details p.date span.more, 
.sub-list .details p.date span.more {
	float: right;
	margin-top: -2px;
}
.noti-list .details p.date span.more img, 
.sub-list .details p.date span.more img {
	width: 20px;
}
.bd-example-modal-sm .modal-dialog{
	width: 250px;
}

.btn-fix-width {
	min-width: 150px
}

#content .form-group{
	margin-left: 0;
	margin-right: 0
}
#content .bg-white {
	padding: 15px 0
}

#content .bg-white div[class*="col-"] {
	padding-left: 15px;
	padding-right: 15px;
}
.nav-link {
	padding: 0
}
#content .nav-link h2 {
	line-height: 1.2rem !important;
	border-bottom: 3px solid transparent;
}
.nav-link h2 {
	font-size: 0.7rem;
	line-height: 2rem;
	padding-bottom: 10px;
	font-weight: normal;
	color: #666;
	transition: all 0.3s;

}

.nav-link h2 span {
	padding-block-end: 6px;
	border-bottom: 3px solid transparent;
}

.nav-item a p.filter {
	width: 30px;
	height: 30px;
	border-radius: 50% 0 0 50%;
	background-color: #ffb81c;
	padding-top: 3px;
	margin: 0 0px 0 auto;
}

.nav-item a p.filter img {
	width: 20px !important;
	text-align: center
}

.nav-link.active h2 {
	font-size: 0.8rem;
	font-weight: 700;
	color: #243746;
}

.nav-link.active h2 span{
	border-bottom: 3px solid #ffb81c;
}
#content .nav-link.active h2 {
	border-bottom: 3px solid #ffb81c;
}
.nav .col-1, 
.nav .col {
	padding-right: 0;
	padding-left: 0
}

.filter-tag {
	width: 100%;
	margin: 0 auto;
	position: relative;
}

.filter-tag ul {
	width: 100%;
	list-style-type: none;
	margin: 10px 0;
	padding: 0;
	font-size: 0.7rem;
	line-height: 1.2rem
}

.filter-tag ul li {
	float: left;
	margin-right: 10px;
	background-color: #243746;
	color: #fff;
	padding: 3px 10px;
	border-radius: 20px;
	width: auto
}

.filter-tag ul li .close-tag {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #fff;
	float: right;
	top: 0;
	margin-right: -7px;
	margin-left: 5px;
	text-align: center;
}

.filter-tag ul li .close-tag img {
	width: 15px;
}

#content .bg-white.pd-adjust {
    padding: 0;
    line-height: 0;
}

#content .list > div:nth-child(even) {
	margin-top: 20px !important;
	margin-bottom: 20px !important
}

.list > div[class*="col-"]:nth-child(even){
	margin-top: 20px !important;
	margin-bottom: 20px !important
}
.pro-pg .form-group {
	margin-right: 0;
	margin-left: 0
}

.custom-checkbox h3 {
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.5rem;
	color: #243746
}

.plan-included {
	background-color: #fff;
	border: 1px solid #243746;
	width: 100%;
	margin: -10px auto 0;
	position: relative;
	padding: 20px 10px 15px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top: 0px;
	z-index: 1
}

.plan-included h2 {
	padding-bottom: 6px !important;
	font-size: 0.8rem !important
}
.plan-included .info {
	padding-right: 0 !important
}

.plan-included .info p.qty {
	float: left;
	font-size: 0.9rem;
	font-weight: 700;
	color: #243746;
	line-height: 2rem
}

.plan-included .item {
	width: 100%;
	float: left !important;
	margin-right: 10px !important;
	margin-bottom: 0px !important;
}

.plan-included .item .items-img {
	width: 90% !important;
	margin: 0 0px 10% 0
}

.plan-included h2 span{
	font-size: 0.6rem;
	font-weight: normal;
	color: #243746;
	float: right
}

.pro-pg .input-group{
	width: 120px !important;	
}

.pro-pg .input-group .form-control {
	
}

.pro-pg .input-group .input-group-append {
	margin-left:0 !important;
}

.pro-pg .input-group > .input-group-append > .input-group-text {
	margin-left: -40px;
	z-index: 10;
	background-color: transparent;
	border-color: transparent;
}

.pro-pg .input-group > .input-group-prepend > .input-group-text {
	margin-right: -40px;
	z-index: 10;
	background-color:transparent;
	border-color: transparent;
}
.pro-pg .info .btn-minus .subicon {
	margin-left: -10px;
}

.plan-box .input-group {
	z-index: 10
}

.plan-included .custom-checkbox .custom-control-label {
	padding: 0 !important;
	overflow: hidden;
}
.pro-pg .info .plan-box .plan-included .custom-checkbox {
	width: 90%;
	margin-right: 10%
}

.pro-pg .info .plan-box .plan-included .custom-checkbox img, .pro-pg .info .plan-box .plan-included .custom-checkbox .custom-control-input img {
	width: 100%
}
.pro-pg div[class*=col-md-7] .row > .info {
	padding-right: 0 !important
}

.pro-pg .col-md-7 .row > .info .promo {
	padding: 0 5px;
}
.other-option {
	overflow: unset
}
.other-option .MultiCarousel {
	height: auto;
}
.carousel-control-prev, .carousel-control-next {
	opacity: 1;
	color: #243746;
}

.carousel-control-prev:hover, .carousel-control-next:hover {
	opacity: 1;
	color: #ffb81c;
}
.pro-pg .info .plan-box .custom-checkbox .custom-control-label .price.first:after {
	content:" ";

}

.var-option.item {
	width: 80px;
	overflow: hidden;
	margin-right: 6px
}
.var-option.item .radio-black-line {
	border-radius: 10px;
	padding: 0;
	overflow: hidden;
}
.var-option.item  img {
	max-width: 100%
}

.dis-style {
	border:0;
	padding: 0;
	margin-top: 10px
}

.info h3 span {
	float: right
}

.popover {
	height: fit-content;
	height: -moz-fit-content;
	top: -80px !important
}
.store-landing {
	padding-top: 20px;
}
.store-landing .contain.head {
	position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    flex-shrink: 0;
    width: 100%;
	height: 150px;
	background-size: 100%;
	background-repeat: no-repeat;
	background-color: #eee
}

.store-landing .head .store-info{
	position:absolute;
	left: 1rem;
	top: 2rem;
	width: 50%;
	background-color: rgba(255, 255, 255, 0.8);
	height: calc(100% - 4rem);
	align-items: center;
	padding: 5px;
	border-radius: 10px;
}

.store-landing .head .store-info .row {
	display: flex;
	align-items: center
}


.head .store-info .store-logo {
	width: 75px;
	height: 75px;
	border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-color: #eee;
}

.head .store-info .store-logo img {
	max-width: 100%;
}

.head .store-info > div h1{
	font-size: 1rem;
	color: #243746 !important;
	font-weight: 700
}

.head .store-info > div h1 span {
	font-size: 0.7rem;
	color: #243746 !important;
	line-height: 1rem !important
}

.head .store-info > div p {
	font-size: 0.8rem;
}

.head .store-info > div p a {
	color: #999
}

.head .store-info div.followers p {
	font-size: 0.7rem;
	font-weight: 700;
	color: #243746;
	line-height: 1.5rem
}

.head .store-info div.followers p span {
	font-size: 0.8rem;
	color: #999;
	font-weight: normal
}

.head .store-info div.followers img {
	width: 1.2rem !important;
	float: left;
	margin-right: 6px;
}

.head .store-info .icon-btn img{
	width: 40px;
	padding: 5px;
	margin-bottom: 5px;
	border-radius: 50%;
	height: 40px;
	background-color: transparent;
}
.head .store-info .icon-btn img.chat {
	background-color: #243746;
}

.head .store-info .icon-btn img.fav {
	background-color: #ffb81c;
}

.head .store-info .icon-btn {
	font-size: 0.8rem;
	line-height: 1.2rem;

}

.head .store-info .icon-btn a.chat {
	color: #243746;
}

.head .store-info .icon-btn a.fav {
	color: #ffb81c;
}

.store-landing .store-menu {
	font-size: 0.8rem;
	line-height: 2.5rem;
	height: auto;
	background-color: #fff
}
.store-landing .store-menu .input-group {
	margin: 1px auto;
	padding-right: 2px;

}
.store-landing .store-menu .form-control {
	border: 1px solid #eeeeee;
	background: transparent;
	border-radius: 0;
}
.store-landing .store-menu .input-group-text.right {
	border-top-right-radius: 0rem !important;
    border-bottom-right-radius: 0rem !important;
}
.store-landing .store-menu .input-group-text {
	background: transparent;
}

.store-landing .store-menu > a {
	color: #999;
	padding-bottom: 0.6rem;
	border-bottom: 3px solid transparent
}

.store-landing .store-menu .col > a {
	padding-left: 15px;
	padding-right: 15px;
	border-bottom: 3px solid transparent
}

.store-landing .store-menu a.cata {
	font-weight: 700;
	color:  #243746;
	padding-left: 15px;
	padding-right: 0px;
}
.store-landing .store-menu a.cata:after {
	content: " ";
	height: 40px;
    width: 10px;
    float: right;
    right: 0px;
   
    margin-right: -15px;
    background-image: url(../img/icon/grey/caret.svg);
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.store-landing .store-menu a:hover {
	color: #243746;
}
.store-landing .store-menu a {
	padding: 15px 15px 10px 15px;
}
.store-landing .store-menu a.active {
	color: #243746;
	font-weight: 700;
	border-bottom: 3px solid #ffb81c;
}

.store-logo-mobile img{
	max-width: 50px;
	max-height: 50px;
	border-radius: 50%;
	overflow: hidden;
}

.float-price.store div[class*=col-] .icon{
	background-color: rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	width: 40px;
	height: 40px;
}

.float-price .add-margin {
	margin: 15px auto !important
}
.store .add-margin {
	margin: 10px auto !important
}
.add-margin10 {
	margin-top: 10px;
	margin-bottom: 10px;
}
.banner-ad {
	max-width: 100%;
}

.shop-cata {
	min-width: 250px;
	font-size: 0.8rem;
	border-radius: 0;
	border:0px;
	margin-top: 15px;
	box-shadow: 0px 0px 3px 2px rgb(0 0 0 / 10%);
}

.shop-cata ul {
	list-style-type: none;
	margin: 0;
	padding: 0
}
.shop-cata ul li {
	padding: 6px 10px;
	list-style-type: none;
	margin: 0;
}

.shop-cata ul, .shop-cata ul a {
	padding: 0
}
.shop-cata ul, .shop-cata ul a li {
	line-height: 1.3rem;
	color: #999;
}

.shop-cata ul a:hover li {
	background-color:#243746;
	font-weight: 700;
	color: #ffb81c;
}
.store {
	z-index: 10 !important
}

.float-price .active .icon-list {
    background-image: url(../img/icon/red/block-list.png);
}

.float-price .active .icon-plan {
    background-image: url(../img/icon/red/bag.png);
}

.float-price .active .icon-plan {
    background-image: url(../img/icon/red/bag.png);
}

.info.order {
	padding-left: 15px !important;
	padding-right: 15px !important
}

.pro-pg .info.order h2.ttl:after {
	left: 15px;
}
.order-detail:after, .order-detail:before {
	content: " "; 
	clear: both !important;
}
.order-detail {
	width: 100%;
    margin: 8px auto 8px auto;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
}

.order-detail .title {
	width: 30%;
	margin-top: 10px;
}

.order-detail .title h4 {
	font-size: 0.75rem !important
}

.order-detail .detail {
	width: 70%;
	margin-top: 10px;
	text-align: right !important;
}

.order-detail p {
	text-align: right;
	font-weight: bold !important;
	color: #243746;
	font-size: 0.9rem !important
}

.order-detail .detail .loc {
	text-align: right !important;
	float: right
}
.order-detail .detail .cc {
	font-size: 0.8rem !important;
	color: #666 !important;
	font-weight: normal !important
}


.order-detail .detail img {
	width: 50px;
	
}

.order-detail p .location {
	font-weight: bold !important;
	color: #243746
}

.add-contact {
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
}
.delete,
.delete:focus {
	display: inline-block;
    text-align: center;
    vertical-align: middle;
    user-select: none;
	width: 100%;
	background: #ccc;
	margin-top: -15px;
	margin-bottom: -15px;
	text-align: center;
	line-height: 60px;
	margin-left: 15px;
	border: 0px solid transparent;
	margin-right: -15px;
	transition: all 0.3s;
	
}
.delete img {
	width: 30px;
}
.delete p {
	line-height: 30px;
	margin-top:-10px;
	color: #fff
}

.edit {
	display: inline-block;
    text-align: center;
    vertical-align: middle;
    user-select: none;
	width: 100%;
	
	border: 0px solid transparent;
	background: #ffb81c;
	margin-top: -15px;
	margin-bottom: -15px;
	text-align: center;
	line-height: 60px;
	margin-left: 15px;
	margin-right: -15px;
	transition: all 0.3s;

	
}
.delete:after,
.edit:after {
	 content: '';
  opacity: 0;
  position: absolute;
  top: -15px;
  left: 15px;
  right: -15px;
  bottom: -15px;
  background: #fff;
  
}

.delete:hover::after, 
.edit:hover::after {
	opacity: 0.8;
	animation: progress-active 1s ease infinite;
}
.edit img {
	width: 30px;
}
.edit p {
	line-height: 30px;
	margin-top:-10px;
	color: #243746
}

.list > div:nth-child(odd) {
	margin-top: 20px;
	margin-bottom: 20px
}
h2.address {
	font-size: 0.8rem !important
}
.tracking {
	line-height: 1.6rem;
	padding-top: 20px;
}
.tracking span {
	font-size: 0.8rem;
	font-weight: 700;
	color: #243746;
}

.tracking a {
	float: right
}

h3.price {
	color: #243746;
	font-size: 2.2rem;
	line-height: 5rem
}

h3.price span {
	font-size: 1.5rem
}

h3.price:before {
	content: "RM";
	font-size: 1.5rem
}

p.non-price {
	color: #243746;
	font-size: 1rem !important;
    line-height: 1.2rem !important;
	font-weight: 700
}
.bill {
	font-size: 0.8rem !important;
    color: #999 !important;
    line-height: 1.2rem !important;
    font-weight: normal !important
}
.order-detail .title h4{
	font-family: 'Roboto', sans-serif;
}

.billing .price-display .plan .tag-txt, 
.billing .price-display .month .tag-txt, 
.billing .price-display .upfront .tag-txt{
	font-size: 0.75rem !important;
    color: #999;
    line-height: 1.2rem !important;
    font-weight: normal !important
}
.billing .price-display .plan {
	border-right: 2px solid #ffb81c;
}
.billing .price-display .plan .price, 
.billing .price-display .upfront .price,
.billing .price-display .month .price {
	font-size: 1.2rem !important;
	line-height: 1.5rem !important
}

.highlight-msg {
	border: 1px solid #ccc;
	background: #fff;
	
	margin: 20px 0;
}

.highlight-msg p {
	color: #999;
	font-size: 0.7rem;
	padding-top: 10px;
	padding-bottom: 10px;
}

.highlight-msg p a {
	color: #fc0000;
	font-weight: bold
}

.history{
	margin-right: 0px;
	margin-left: 0px;
	border:1px solid #eee;
	margin-top: 10px;
	border-right: 0px solid #eee;
	border-bottom: 0px solid #eee;
}
.history.collapse {
	margin-top: -1px
}
.history div[class*="col-lg-"]{
	padding: 10px;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
}

.history h1{
	font-size: 0.8rem !important;
	line-height: 0.9rem !important;
	font-weight: normal !important;
}
.history .loc {
    text-align: right !important;
    float: right;
    margin-top: 5px
}
.history p .location {
    font-weight: bold !important;
    color: #243746;
    font-size: 0.7rem;
    border: 1px solid #243746;
    padding: 4px 10px;
    border-radius: 4px;
}

.modal .select2-container {
	z-index: 100
}

.select-head {
	font-size: 0.8rem !important
}

.pop-left {
	margin-right: 10px;
	margin-left: 0
}
.pop-right {
	margin-right: 0;
	margin-left: 10px;
}
.login-box .input-group .form-control {
	background: transparent;
}

.pop-center .subicon {
	margin-top: 10px;
	margin-left: 13px
}

.pop-center .subicon-date:after {
    display: inline-block;
    height: 100%;
    width: 100%;
    content: "";
    background: url(../img/icon/black/celandar.png) no-repeat 0 0;
    background-size: 100% 100%;

}
.modal-body .plan-box {
	margin-bottom: 5px !important;
}
.modal-body .pro-pg div[class*="col-md"]:nth-child(odd){
	padding-right: 0px !important;
	padding-left: 10px !important;
}

.modal-body .pro-pg div[class*="col-md"]:nth-child(even){
	padding-right: 10px !important;
	padding-left: 0px !important;
}
.pop-center {
	margin-right: 0;
	margin-left: 0;
	padding-right: 0px !important;
	padding-left: 0px !important;
}

.pro-pg .input-group .form-control {
	background: #eee;

}
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: hidden;
}
.welcome .modal-body, 
.select-promo .modal-body {
	min-height: calc(100vh - 400px);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}


.select-promo .pro-pg .info .plan-box .custom-checkbox .custom-control-label {
	padding: 8px 5px;
}

.select-promo .pro-pg .info .short .plan-info:first-child {
	width: calc(105px - 15px) !important
}


.select-promo .pro-pg .info .plan-box.short .item {
	border-radius: 10px;
	overflow: hidden;
	background: #fff
}

.select-promo .pro-pg .info .short .plan-info {
    width: calc(((100% - 115px)) - 5px) !important;
}
.modal-body .pro-pg div.col-6:nth-child(even) {
	    padding-right: 10px !important;
	    padding-left: 10px !important;
}

.modal-body .pro-pg div.col-6:nth-child(odd) {
	    padding-right: 10px !important;
	    padding-left: 10px !important;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){

  .modal-content{
    width: 100%;
   
  }
  .select-promo {
  	margin: 0 !important;
  	bottom: 0
  }
  .modal-content.promo {
  	margin: 0 auto
  }
  .middle {
  	margin: 0 auto
  }
  .modal-body .pro-pg div[class*="col-md"]:nth-child(odd){
		padding-right: 0px !important;
		padding-left: 0px !important;
	}

	.modal-body .pro-pg div[class*="col-md"]:nth-child(even){
		padding-right: 0px !important;
		padding-left: 0px !important;
	}
  .pop-left {
			margin-right: 0px !important;
			margin-left: 0
		}
	.pop-right {
			margin-right: 0;
			margin-left: 0px !important;
	}
	.modal-body .pro-pg div[class*="col-6"]:nth-child(even) {
	    padding-right: 10px !important;
	    padding-left: 0px !important;
	}

	.modal-body .pro-pg div[class*="col-6"]:nth-child(odd) {
	    padding-right: 0px !important;
	    padding-left: 10px !important;
	}
}
/* ====================================================================================================================
 * RESPONSIVE
 * ====================================================================================================================*/
@media screen and (max-width: 860px) {
	.plan-review .plan-details p.details {
		margin-top: 5px
	}

	
	
	.order-detail .title {
		width: 30%;
		margin-top: 10px;
	}
	.order-detail .detail {
	width: 70%;
	margin-top: 10px;
	text-align: right !important;
}
  .flex-direction-nav .flex-prev {
    opacity: 1;
    left: 10px;
  }
  .flex-direction-nav .flex-next {
    opacity: 1;
    right: 10px;
  }
  
	#slider {
		margin: -15px -15px 15px -15px;
	  border-bottom-left-radius: 0;
	  border-bottom-right-radius: 0;
		border: 0px solid #eee;
		background-color: #f5f5f5
	}
	.pro-pg .info {
		padding-right: 0 !important
	}

	.select-promo .pro-pg .info {
		padding-right: 15px !important
	}
	.controls-top .btn-floating {
		width: 40px;
		height: 40px;
		line-height: 40px;
	}
	.controls-top .btn-floating.left {
		left: 0px
	}

	.controls-top .btn-floating.right {
		right: 0px;
	}
	.extra-info h1 {
		padding-top: 15px;
	}
	.other-plan {
		margin-right: 0px !important;
	}
	.history {
  	border: 0px;
  	margin: 0;
  	padding: 0
  }
  .history div[class*="col-lg-"]{
  	border: 0px solid #ccc;
  	padding-bottom: 5px;
  	padding-top: 5px;
  	padding-right: 0;
  	padding-left: 0 
  }
  .history div.col-12.line {
  	margin: 0;

  }
  .devices-view {
		display: block
	}
	.desktop-view {
		display: none !important
	}
}
@media (max-width: 768px) { 
	.upfront.info {
		padding: 0
	}
	.float-price .devices-view {
		display: flex; align-items: center;
	}
	.rating-pro > ul > li{
		width: 100%;
		float: left;
		padding-left: 0px !important;
	}

	.order-list .order .order-info h2 {
		width: 100%;
		font-size: 0.7rem;
		padding-bottom: 5px;
		height: 30px;
		font-weight: normal;
		vertical-align: middle;
		overflow: hidden;
	}
	.order-list .order .order-info p.price {
		width: 100%;
		text-align: left;
		top: 0;
		left: 0px;
		position: relative;
		font-size: 1.1rem;
		color: #ffb81c;
		font-weight: 700
	}

	.partner img{
		
		padding: 0px 15px 0px;
	}
	.order-list .order .order-info p.price:before {
		content:"RM";
		font-size: 0.7rem
	}

	.order-list .order .order-info p.price span{
		
		font-size: 0.7rem
	}

	.order-list .order .order-img {
		width: 130px;
		background-color: #ccc;
		height: 120px
	}

	.bg-white .custom-control-label p {
		width: calc(100% - 80px)
	}

	.top-nav li {
		min-width: 40px
	}
	.order-list .order .order-info {
		width: calc(100% - 130px);
		padding: 10px;
		float: right;
		position: absolute;
		top: 0;
		right: 0;
	}

	.my-profile > div > p {
		width: calc(100% - 150px)
	}
	.bg-white embed {
		width: 100%;
		height: 800px;
		margin: 0 auto;
		border: 0;
		background-color: #fff
	}
	.order-list .order .order-info .input-group {
		width: 100%;
		position: relative;
		right: auto;
	   	margin-top:5px;
	    border: 1px solid #eeeeee;
	    border-radius: 1rem;
	    background: #eeeeee;
	    float: none
	}


	.order-info .read-more {
	
		font-size: 0.6rem;
	    float: right;
	    margin-top: -20px;
	}
	.bg-white div[class*="col-"] .btn {
		font-size: 0.8rem;
		padding: 0.375rem 0.75rem
	}
	.invoice-details p {
		font-size: 0.8rem !important;
		
	}
	.invoice-details p span {
		font-size: 0.7rem;
	}
	.invoice-qty p {
		padding-bottom: 6px;
	}

	.invoice-price p {
		font-size: 1rem !important;
		padding-bottom: 6px;
	}

	.invoice-price p:before {
		content: "RM";
		font-size: 0.7rem
	}

	.invoice-price p span {
		font-size: 0.7rem
	}
	.float-price .buy {
		padding: 0;
		margin-left: 15px;
	}
	.float-price .buy .btn {
		float: right;
		right: 0
	}
	.profile div[class*="col-"]:nth-child(2) {
		margin-top: 20px;
	}
	.body-container {
		padding-bottom: 600px
	}
	footer {
		height: 600px
	}
	
}


.tutorial-title[_ngcontent-subplaceStore-c18] h3[_ngcontent-subplaceStore-c18] {
        margin-bottom: 1rem;
        color: #253746;
        font-size: 1.125rem;
        font-weight: 600;
    }
    .tutorial-title[_ngcontent-subplaceStore-c18] h3[_ngcontent-subplaceStore-c18] span {
        color: #ffb81c;
    }
    .tutorial[_ngcontent-subplaceStore-c18] {
        background: #ffb81c;
        padding: 1.75rem 0;
    }
    @media (min-width: 768px) {
        .tutorial[_ngcontent-subplaceStore-c18] {
            padding: 1.75rem 0 1.5rem;
        }
    }
    .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] {
        margin-bottom: 1.25rem;
        justify-content: center;
        pointer-events: none;
    }
    .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step[_ngcontent-subplaceStore-c18] {
        position: relative;
        width: 8rem;
        height: 8rem;
        text-align: center;
    }
    .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step[_ngcontent-subplaceStore-c18]::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 4.25rem;
        left: 50%;
        border-top: 1px solid #253746;
        z-index: 0;
    }
    .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step.step-4[_ngcontent-subplaceStore-c18],
    .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step.step-5[_ngcontent-subplaceStore-c18] {
        height: 7.25rem;
    }
    .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step.step-4[_ngcontent-subplaceStore-c18]::before,
    .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step.step-5[_ngcontent-subplaceStore-c18]::before {
        content: none;
    }
    @media (min-width: 992px) {
        .promo-card[_ngcontent-subplaceStore-c18] .promo-card-item[_ngcontent-subplaceStore-c18] .banner[_ngcontent-subplaceStore-c18] .banner-icon[_ngcontent-subplaceStore-c18] p[_ngcontent-subplaceStore-c18] {
            font-size: 0.75rem;
        }
        h2[_ngcontent-subplaceStore-c18] {
            font-size: 1.25rem;
            font-weight: 600;
        }
        .tutorial[_ngcontent-subplaceStore-c18] {
            padding: 3rem 0 2rem;
        }
        .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] {
            margin-bottom: 2rem;
        }
        .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step[_ngcontent-subplaceStore-c18]::before {
            top: 6rem;
            border-width: 2px;
        }
        .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step.step-4[_ngcontent-subplaceStore-c18],
        .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step.step-5[_ngcontent-subplaceStore-c18] {
            height: 7.75rem;
        }
        .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step[_ngcontent-subplaceStore-c18] {
            width: 11rem;
            height: 10rem;
        }
        
    }
    @media (max-width: 767.98px) {
        .sub-banner[_ngcontent-subplaceStore-c18] .sub-banner2[_ngcontent-subplaceStore-c18] {
            margin-right: 0;
            width: calc(20% - 1px);
        }
        .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] {
            width: 16rem;
        }
        .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step.step-2[_ngcontent-subplaceStore-c18]::before {
            width: 6rem;
            border-right: 1px solid #253746;
            border-bottom: 1px solid #253746;
            border-top-right-radius: 5rem;
            border-bottom-right-radius: 5rem;
        }
        .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step.step-3[_ngcontent-subplaceStore-c18]::before {
            left: -50%;
        }
        .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step.step-3-1[_ngcontent-subplaceStore-c18]::before {
            width: 6rem;
            left: auto;
            right: 50%;
            border-left: 1px solid #253746;
            border-bottom: 1px solid #253746;
            border-top-left-radius: 5rem;
            border-bottom-left-radius: 5rem;
        }
    }
    .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step[_ngcontent-subplaceStore-c18] .tutorial-icon[_ngcontent-subplaceStore-c18] {
        width: 3.5rem;
        height: 3.5rem;
        -o-object-fit: contain;
        object-fit: contain;
    }
    @media (min-width: 992px) {
        .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step[_ngcontent-subplaceStore-c18] .tutorial-icon[_ngcontent-subplaceStore-c18] {
            width: 5rem;
            height: 5rem;
        }
    }
    .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step[_ngcontent-subplaceStore-c18] .tutorial-step-count[_ngcontent-subplaceStore-c18] {
        background: #253746;
        position: relative;
        width: 1rem;
        height: 1rem;
        margin: 0.25rem auto;
        border-radius: 50%;
        color: #fff;
        font-size: 0.625rem;
        font-weight: 500;
        line-height: 1rem;
        z-index: 1;
    }
    @media (min-width: 992px) {
        .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step[_ngcontent-subplaceStore-c18] .tutorial-step-count[_ngcontent-subplaceStore-c18] {
            width: 1.25rem;
            height: 1.25rem;
            margin: 0.375rem auto;
            font-size: 0.75rem;
            line-height: 1.4375rem;
        }
    }
    .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step[_ngcontent-subplaceStore-c18] .tutorial-title[_ngcontent-subplaceStore-c18] {
        width: 6rem;
        margin: 0 auto;
        font-size: 0.625rem;
        font-weight: 500;
        color: #253746;
        line-height: 1.2;
    }
    @media (min-width: 992px) {
        .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step[_ngcontent-subplaceStore-c18] .tutorial-title[_ngcontent-subplaceStore-c18] {
            width: 8rem;
            font-size: 0.75rem;
        }
    }
    .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step[_ngcontent-subplaceStore-c18] .tutorial-arrow-forward[_ngcontent-subplaceStore-c18] {
        position: absolute;
        width: 100%;
        height: 0.375rem;
        top: -0.375rem;
        right: -50%;
        border-top: 1px solid #253746;
        border-left: 1px solid #253746;
        border-right: 1px solid #253746;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step[_ngcontent-subplaceStore-c18] .tutorial-arrow-forward[_ngcontent-subplaceStore-c18]::before {
        content: "";
        display: block;
        width: 5px;
        height: 5px;
        margin-top: 1px;
        margin-left: -2.5px;
        border-bottom: 1px solid #253746;
        border-right: 1px solid #253746;
        transform: rotate(45deg);
    }
    @media (min-width: 992px) {
        .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step[_ngcontent-subplaceStore-c18] .tutorial-arrow-forward[_ngcontent-subplaceStore-c18] {
            height: 0.875rem;
            top: -1rem;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            border-width: 2px;
        }
        .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step[_ngcontent-subplaceStore-c18] .tutorial-arrow-forward[_ngcontent-subplaceStore-c18]::before {
            width: 7px;
            height: 7px;
            margin-top: 6px;
            margin-left: -4.5px;
            border-width: 2px;
        }
    }
    .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step[_ngcontent-subplaceStore-c18] .tutorial-arrow-back[_ngcontent-subplaceStore-c18] {
        position: absolute;
        width: 100%;
        height: 0.375rem;
        bottom: 0;
        right: -50%;
        border-bottom: 1px solid #253746;
        border-left: 1px solid #253746;
        border-right: 1px solid #253746;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step[_ngcontent-subplaceStore-c18] .tutorial-arrow-back[_ngcontent-subplaceStore-c18]::before {
        content: "";
        display: block;
        width: 5px;
        height: 5px;
        margin-top: -1px;
        margin-left: auto;
        margin-right: -3.5px;
        border-top: 1px solid #253746;
        border-left: 1px solid #253746;
        transform: rotate(45deg);
    }
    @media (min-width: 992px) {
        .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step[_ngcontent-subplaceStore-c18] .tutorial-arrow-back[_ngcontent-subplaceStore-c18] {
            height: 0.875rem;
            bottom: -2.25rem;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            border-width: 2px;
        }
        .tutorial[_ngcontent-subplaceStore-c18] .tutorial-container[_ngcontent-subplaceStore-c18] .tutorial-step[_ngcontent-subplaceStore-c18] .tutorial-arrow-back[_ngcontent-subplaceStore-c18]::before {
            width: 7px;
            height: 7px;
            margin-top: -0.5px;
            margin-right: -4px;
            border-width: 2px;
        }
        
    }
    .tutorial[_ngcontent-subplaceStore-c18] .btn[_ngcontent-subplaceStore-c18] {
        width: 12.5rem;
        font-weight: 600;
    }
    @media (max-width: 768px) {
        .tutorial-title[_ngcontent-subplaceStore-c18] h3[_ngcontent-subplaceStore-c18] {
            font-size: 0.95rem;
        }
        .tutorial[_ngcontent-subplaceStore-c18] .btn[_ngcontent-subplaceStore-c18] {
            font-size: 0.875rem;
        }
        .rewards {
			text-align: right;
		}
    }

.date .form-group.left{
	border-radius: 20px 0 0 20px;

}
.date .form-group.left .form-control {
	border-right: 1px solid #999;
}
.date .form-group.right{
	border-radius: 0 20px 20px 0
}
.datepicker-container {
  background-color: #fff;
  direction: ltr;
  left: 0;
  position: fixed;
  -webkit-tap-highlight-color: transparent;
  top: 0;
  line-height: 25px;
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
  width: 200px;
  z-index: -1;
}

.datepicker-container::before, .datepicker-container::after {
  border: 10px solid transparent;
  content: " ";
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.datepicker-dropdown {
  position: absolute;
  top: -80%;
  left: 0;
  z-index: 9999 !important;
  padding: 4px;
  margin: 0.125rem 0 0;
  font-size: 0.8rem;
  color: #495057;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
  box-shadow: 0 0.36875rem 1.1875rem rgba(31, 10, 6, 0.01), 0 0.6375rem 1.00625rem rgba(31, 10, 6, 0.01), 0 0.15rem 0.33125rem rgba(31, 10, 6, 0.03), 0 0.085rem 0.0875rem rgba(31, 10, 6, 0.02);
}

.datepicker-inline {
  position: static;
  margin: 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
  padding: 4px;
}

.datepicker-top-left, .datepicker-top-right {
  border-top-color: rgba(0, 0, 0, 0.15);
}

.datepicker-top-left::before, .datepicker-top-left::after, .datepicker-top-right::before, .datepicker-top-right::after {
  border-top: 0;
  left: 10px;
  top: -11px;
}

.datepicker-top-left::before, .datepicker-top-right::before {
  border-bottom-color: rgba(0, 0, 0, 0.15);
}

.datepicker-top-left::after, .datepicker-top-right::after {
  border-bottom-color: #fff;
  top: -10px;
}

.datepicker-bottom-left, .datepicker-bottom-right {
  border-bottom-color: #203546;
}

.datepicker-bottom-left::before, .datepicker-bottom-left::after, .datepicker-bottom-right::before, .datepicker-bottom-right::after {
  border-bottom: 0;
  bottom: -11px;
  left: 10px;
}

.datepicker-bottom-left::before, .datepicker-bottom-right::before {
  border-top-color: #203546;
}

.datepicker-bottom-left::after, .datepicker-bottom-right::after {
  border-top-color: #fff;
  bottom: -10px;
}

.datepicker-top-right::before, .datepicker-top-right::after, .datepicker-bottom-right::before, .datepicker-bottom-right::after {
  left: auto;
  right: 10px;
}

.datepicker-panel > ul {
  margin: 0;
  padding: 0;
}

.datepicker-panel > ul::before, .datepicker-panel > ul::after {
  content: " ";
  display: table;
}

.datepicker-panel > ul::after {
  clear: both;
}

.datepicker-panel > ul > li {
  background-color: #fff;
  cursor: pointer;
  float: left;
  height: 25px;
  list-style: none;
  margin: 0px;
  padding: 0;
  text-align: center;
  width: 27px;
  border-radius: 0.35rem;
  transition: all .2s;
}

.datepicker-panel > ul > li:hover {
  background-color: #203546;
  color: #fff;
}

.datepicker-panel > ul > li.muted {
  color: #ced4da;
}

.datepicker-panel > ul > li.muted:hover {
  background: #f8f9fa;
  color: #adb5bd;
}

.datepicker-panel > ul > li.highlighted {
  background-color: #f7b924;
  color: #212529;
}

.datepicker-panel > ul > li.highlighted:hover {
  background-color: #f7b924;
  color: #212529;
}

.datepicker-panel > ul > li.picked, .datepicker-panel > ul > li.picked:hover {
  background: #3ac47d;
  color: #fff;
}

.datepicker-panel > ul > li.disabled, .datepicker-panel > ul > li.disabled:hover {
  background-color: #f8f9fa;
  color: #ced4da;
  cursor: default;
}

.datepicker-panel > ul > li.disabled.highlighted, .datepicker-panel > ul > li.disabled:hover.highlighted {
  background-color: #e9ecef;
  color: #adb5bd;
}

.datepicker-panel > ul > li[data-view="years prev"], .datepicker-panel > ul > li[data-view="year prev"], .datepicker-panel > ul > li[data-view="month prev"], .datepicker-panel > ul > li[data-view="years next"], .datepicker-panel > ul > li[data-view="year next"], .datepicker-panel > ul > li[data-view="month next"], .datepicker-panel > ul > li[data-view="next"] {
  font-size: 15px;
}

.datepicker-panel > ul > li[data-view="years current"], .datepicker-panel > ul > li[data-view="year current"], .datepicker-panel > ul > li[data-view="month current"] {
  width: 130px;
}

.datepicker-panel > ul[data-view="years"] > li, .datepicker-panel > ul[data-view="months"] > li {
  height: 52.5px;
  line-height: 52.5px;
  width: 62.5px;
}

.datepicker-panel > ul[data-view="week"] > li,
.datepicker-panel > ul[data-view="week"] > li:hover {
  background-color: #fff;
  cursor: default;
  color: #6c757d;
}

.datepicker-hide {
  display: none;
}

.daterangepicker {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10000;
  padding: 0;
  margin: 0.125rem 0 0;
  font-size: 0.78rem;
  color: #495057;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
  box-shadow: 0 0.36875rem 1.1875rem rgba(31, 10, 6, 0.01), 0 0.6375rem 1.00625rem rgba(31, 10, 6, 0.01), 0 0.15rem 0.33125rem rgba(31, 10, 6, 0.03), 0 0.085rem 0.0875rem rgba(31, 10, 6, 0.02);
  display: none;
}

.daterangepicker:before, .daterangepicker:after {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.15);
  content: '';
}

.daterangepicker:before {
  top: -10px;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid rgba(0, 0, 0, 0.15);
}

.daterangepicker:after {
  top: -9px;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff;
  border-left: 10px solid transparent;
}

.daterangepicker.opensleft:before {
  right: 9px;
}

.daterangepicker.opensleft:after {
  right: 10px;
}

.daterangepicker.openscenter:before {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.openscenter:after {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.opensright:before {
  left: 9px;
}

.daterangepicker.opensright:after {
  left: 9px;
}

.daterangepicker.drop-up {
  margin-top: -11px !important;
}

.daterangepicker.drop-up:before {
  top: initial;
  bottom: -11px;
  border-bottom: initial;
  border-top: 10px solid rgba(0, 0, 0, 0.15);
}

.daterangepicker.drop-up:after {
  top: initial;
  bottom: -10px;
  border-bottom: initial;
  border-top: 10px solid #fff;
}

.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
  float: none;
}

.daterangepicker.single .drp-selected {
  display: none;
}

.daterangepicker.show-calendar .drp-calendar {
  display: block;
}

.daterangepicker.show-calendar .drp-buttons {
  display: block;
}

.daterangepicker.auto-apply .drp-buttons {
  display: none;
}

.daterangepicker .drp-calendar {
  display: none;
  
}

.daterangepicker .drp-calendar.left {
  padding: 8px 0 8px 0;
}

.daterangepicker .drp-calendar.right {
  padding: 8px 8px 8px 8px;
}

.daterangepicker .drp-calendar.single .calendar-table {
  border: none;
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
  color: #fff;
  border: solid #343a40;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 4px;
}

.daterangepicker .calendar-table .next:hover span,
.daterangepicker .calendar-table .prev:hover span {
  border: solid #fff;
  border-width: 0 2px 2px 0;
}

.daterangepicker .calendar-table .next span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.daterangepicker .calendar-table .prev span {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  min-width: 25px;
  width: 27px;
  height: 25px;
  line-height: 25px;
  border-radius: 0.35rem;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

.daterangepicker .calendar-table {
  border: 1px solid #fff;
  border-radius: 0.35rem;
  background-color: #fff;
}

.daterangepicker .calendar-table table {
  width: 100%;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background-color: #203546;
  border-color: transparent;
  color: #fff;
}

.daterangepicker td.week, .daterangepicker th.week {
  color: #ccc;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background-color: #fff;
  border-color: transparent;
  color: #999;
}

.daterangepicker td.in-range {
  background-color: #e9ecef;
  border-color: transparent;
  color: #6c757d;
  border-radius: 0;
}

.daterangepicker td.start-date {
  border-radius: 0.35rem 0 0 0.35rem;
}

.daterangepicker td.end-date {
  border-radius: 0 0.35rem 0.35rem 0;
}

.daterangepicker td.start-date.end-date {
  border-radius: 0.35rem;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: #203546;
  border-color: transparent;
  color: #fff;
  border-radius: 0.35rem;
}

.daterangepicker th.month {
  width: auto;
}

.daterangepicker td.disabled, .daterangepicker option.disabled {
  color: #6c757d;
  cursor: not-allowed;
  text-decoration: line-through;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
}

.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%;
}

.daterangepicker select.yearselect {
  width: 40%;
}

.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
  width: 50px;
  margin: 0 auto;
  background: #eee;
  border: 1px solid #eee;
  padding: 2px;
  outline: 0;
  font-size: 12px;
}

.daterangepicker .calendar-time {
  text-align: center;
  margin: 4px auto 0 auto;
  line-height: 30px;
  position: relative;
}

.daterangepicker .calendar-time select.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.daterangepicker .drp-buttons {
  clear: both;
  text-align: right;
  padding: 8px;
  border-top: 1px solid #dee2e6;
  display: none;
  line-height: 12px;
  vertical-align: middle;
}

.daterangepicker .drp-selected {
  display: inline-block;
  font-size: 12px;
  padding-right: 8px;
}

.daterangepicker .drp-buttons .btn {
  margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
  text-decoration: none
}

.daterangepicker.show-ranges .drp-calendar.left {
  border-left: 1px solid #dee2e6;
}

.daterangepicker .ranges {
  float: none;
  text-align: left;
  margin: 0;
  padding: 2px 4px;
}

.daterangepicker.show-calendar .ranges {
  margin-top: 8px;
}

.daterangepicker .ranges ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.daterangepicker .ranges li {
  padding: 6px 12px;
  cursor: pointer;
  margin: 2px 0;
  border-radius: 0.35rem;
  color: #212529;
  background-color: transparent;
  cursor: pointer;
}

.daterangepicker .ranges li:hover {
  background-color: #ffefc9;
  color: #16181b;
}

.daterangepicker .ranges li.active {
  background-color: #203546;
  color: #fff;
}

.tnc-cont .info {
	padding-right: 0 !important
}
.tnc-cont button {
	min-width: 200px
}
@media(max-width: 480px) {
.shop-links, .product-filter, .side-sp { 
  	top: 1.5rem
  }
}
/*  Larger Screen Styling */
@media (min-width: 564px) {
  .daterangepicker {
    width: auto;
  }
  .daterangepicker .ranges ul {
    width: 140px;
  }
  .daterangepicker.single .ranges ul {
    width: 100%;
  }
  .daterangepicker.single .drp-calendar.left {
    clear: none;
  }
  .daterangepicker.single.ltr .ranges, .daterangepicker.single.ltr .drp-calendar {
    float: left;
  }
  .daterangepicker.single.rtl .ranges, .daterangepicker.single.rtl .drp-calendar {
    float: right;
  }
  .daterangepicker.ltr {
    direction: ltr;
    text-align: left;
  }
  .daterangepicker.ltr .drp-calendar.left {
    clear: left;
    margin-right: 0;
  }
  .daterangepicker.ltr .drp-calendar.left .calendar-table {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .daterangepicker.ltr .drp-calendar.right {
    margin-left: 0;
  }
  .daterangepicker.ltr .drp-calendar.right .calendar-table {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .daterangepicker.ltr .drp-calendar.left .calendar-table {
    padding-right: 8px;
  }
  .daterangepicker.ltr .ranges, .daterangepicker.ltr .drp-calendar {
    float: left;
  }
  .daterangepicker.rtl {
    direction: rtl;
    text-align: right;
  }
  .daterangepicker.rtl .drp-calendar.left {
    clear: right;
    margin-left: 0;
  }
  .daterangepicker.rtl .drp-calendar.left .calendar-table {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .daterangepicker.rtl .drp-calendar.right {
    margin-right: 0;
  }
  .daterangepicker.rtl .drp-calendar.right .calendar-table {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .daterangepicker.rtl .drp-calendar.left .calendar-table {
    padding-left: 12px;
  }
  .daterangepicker.rtl .ranges, .daterangepicker.rtl .drp-calendar {
    text-align: right;
    float: right;
  }

}

.jcarousel-wrapper {
    margin: 0 auto;
    position: relative;
}


/** Carousel **/

.jcarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 15px;
}

.jcarousel ul {
    width: 100000em;
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
   
}
.jcarousel li:before {
	display: none;
}
.jcarousel li {
    float: left;
    margin: 0;
    padding: 0;
    border: 1px solid #fff;
    
}

.jcarousel li.info{
	padding-right: 0 !important
}

.jcarousel li .plan-box {
	width: auto !important;
	margin: 10px 5px 15px !important
}

/** Carousel Controls **/

.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    
    line-height: 40px !important;
    width: 40px !important;
    height: 40px !important;
    text-align: center;
    background: #fff;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 0 0 4px #F0EFE7;
    -moz-box-shadow: 0 0 4px #F0EFE7;
    box-shadow: 0 0 4px #F0EFE7;
}
.jcarousel-control-prev i,
.jcarousel-control-next i {
	padding-top: 12px;
}
.jcarousel-control-prev {
    left: -25px;
}

.jcarousel-control-next {
    right: -25px;
}

/** Carousel Pagination **/

.jcarousel-pagination {
    position: absolute;
    bottom: -40px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    margin: 0;
}

.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;

    font-size: 11px;
    height: 10px;
    width: 10px;
    line-height: 10px;

    background: #fff;
    color: #4E443C;
    border-radius: 10px;
    text-indent: -9999px;

    margin-right: 7px;


    -webkit-box-shadow: 0 0 2px #4E443C;
    -moz-box-shadow: 0 0 2px #4E443C;
    box-shadow: 0 0 2px #4E443C;
}

.jcarousel-pagination a.active {
    background: #4E443C;
    color: #fff;
    opacity: 1;

    -webkit-box-shadow: 0 0 2px #F0EFE7;
    -moz-box-shadow: 0 0 2px #F0EFE7;
    box-shadow: 0 0 2px #F0EFE7;
}


.about-us {
	height: 500px !important;
	background: linear-gradient(#ffb81c 0%,#ffda1c 40%,#ffb81c 80%);
}

.about-us h1 {
	color: #fff;
	font-weight: 400;
	font-size: 4rem
}

.about-us h1 > span {
	color: #253746;
	font-weight: 700;
}
.about-us h1 > span > span {
	font-weight: 700;
	color: #fff
}
.about-us h2 {
	font-size: 1.5rem !important;
	font-weight: lighter;
}

.about-us p {
	font-size: 0.9rem;
	margin-bottom: 0
}

.about-us img {
	max-width: 90%;
	margin-top: -50px !important;
}

.more-info {
	background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    padding: 15px;
    margin: 0 -15px;
    border: 1px solid #eee;
}

.more-info .container {
	
	width: 100% !important
}

.more-info > div > p span{
	font-size: 0.8rem !important
}
.text-center {
	text-align: center !important
}

.opt-img .last.text-center p {
	text-align: center !important
}

.ttl.plan-review:after {
	top: 20px !important;
}
.about-icon {
	background: #ffb81c;
	border-radius: 50%;
	width: 80px;
	height: 80px;
	margin: 10px auto;
	text-align: center
}

.about-icon img {
	padding: 10px;
	max-height: 100%
}
.howto h2 span {
	color: #fff
}
.core-values {
	text-align: left
}
.core-values h3 {
	padding-top: 10px
}
.core-values p {
	color: #fff
}
.story {
	margin-top: 20px
}
.story h2 {
	font-size: 1.5rem !important;
	font-weight: lighter;
}
.story h3 {
	font-size: 1.2rem;
	color: #253746 !important;
	padding-top: 20px
}
.story p {
	font-size: 0.8rem !important;
	line-height: 1rem 
}

.story ul {
	list-style-type: none;
	margin: 0;
	padding: 20px 0 20px 0;
	font-size: 0.8rem !important;
	line-height: 1rem;
	width: 100%;
}

.story ul li {
	width: 50%;
	float: left;
	padding-top: 10px;
}
.story ul li:before {
	content: "\f14a";
	font-size: 1rem;
	margin-right: 15px;
	font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    color: #ffb81c;
}
img.ceo-img {
	width: 70%;
	margin-top: 10px
}
img.cart {
	width: 100%
}

h2.ceo {
	font-size: 1.5rem !important;
	font-weight: lighter;
	padding-top: 10px
}

h2.ceo span {
	font-size: 1.5rem !important;
	font-weight: 700;
	color: #ffb81c;
}
h2.ceo span > span {
	color: #253746 !important;
}
p.quote {
	font-size: 0.9rem !important;
	line-height: 1.2rem;
	font-style: oblique;
	color: #253746 !important;
}

p.quote span {
	font-size: 1.2rem;
	font-style: normal;
	font-weight: 700;
	color: #ffb81c !important;
}
p.quote:before {
	font-size: 1.2rem !important;
	font-weight: 700;
	content: "\f10d";
	color: #253746 !important;
	margin-right: 10px;
	font-family: 'Font Awesome 5 Free';
}
p.quote:after {
	font-size: 1.2rem !important;
	font-weight: 700;
	content: "\f10e";
	margin-left: 10px;
	font-family: 'Font Awesome 5 Free';
	color: #253746 !important;
}
p.sign {
	font-size: 1.1rem !important;
	font-weight: 700;
	color: #253746 !important;
	padding-top: 30px;
	font-style: oblique;
	font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
}
p.sign span {
	font-size: 0.9rem !important;
	font-weight: normal;
	font-style: normal;
	font-family: 'Roboto', sans-serif;
}

p.sign span b span {
	color: #ffb81c !important;
	font-weight: 700
}
.abtus {
	
	display: inline-flex;
	align-content: center;
	align-items: center;
	justify-content: center;
}
.abtus .icon {
	width: 35px;
	height: 35px;
	margin: 0 1rem;
}

.abtus .icon-fb {
	background-image: url(../img/about-us/fb.png);
}

.abtus a:hover .icon-fb{
	background-image: url(../img/about-us/fb-hover.png);
}

.abtus .icon-ig {
	background-image: url(../img/about-us/ig.png);
}

.abtus a:hover .icon-ig{
	background-image: url(../img/about-us/ig-hover.png);
}
.abtus .icon-in {
	background-image: url(../img/about-us/in.png);
}

.abtus a:hover .icon-in{
	background-image: url(../img/about-us/in-hover.png);
}
.abtus .icon-tw {
	background-image: url(../img/about-us/tw.png);
}

.abtus a:hover .icon-tw{
	background-image: url(../img/about-us/tw-hover.png);
}
.abtus .icon-yt {
	background-image: url(../img/about-us/yt.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.abtus a:hover .icon-yt{
	background-image: url(../img/about-us/yt-hover.png);
}

.contain div > p.right-link > a.back img {
	width: 15px; margin-left: -5px !important; margin-right: 0px;
	margin-top: -2px;
}

.contain div > p.right-link > a.back {
	color: #243746 !important;
	margin-top: -25px !important
}
.del-his {
	margin-left: -1px; border-right: 1px solid #eee; border-bottom: 1px solid #eee
}
#chat-head .close_container img {
	top: 50px !important;
	bottom: -50px !important;
}

#chat-head .close_container img {
	top: 50px !important;
	bottom: -50px !important;
	opacity: 0 !important
}

#chat-head.active .close_container img {
	top: 0px !important;
	bottom: 0px !important;
	opacity: 1 !important
}
.chat_bubble_row.promo .chat_bubble {
	display: none
}
.contain .shop div > p.right-link a {
	margin-top: -40px;
}
@media only screen and (max-width: 980px) {
	.float-price .upfront {
		text-align: left !important
	}
	.float-price .upfront .tag-txt{
		font-size: 0.8rem
	}
	.float-price .upfront .price{
		font-size: 1.6rem
	}
	.float-price .upfront .input-group {
		width: 110px; float: left; margin-top: 10px;
	}
	.float-price .month {
		border-right: 0px;
		padding-right: 0 !important;
		padding-bottom: 10px !important;
		border-bottom: 1px solid #eee;
		margin-bottom: 10px
	}

	.body-container.add-bottom {
		padding-bottom: 250px;
	}

	.footer-fixed-bottom {
		display: none;
	}
	.about-us {
		height: 660px !important
	}
	.about-us img {
		margin-top: -10px !important;
	}
	.core {
		
		display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
	}
	.core-values p{
		font-size: 0.8rem !important;
		line-height: 1rem !important
	}
	.core-values {

		margin-top: 20px;
		text-align: left !important
	}
	img.ceo-img {
		width: 30%;
	}
	.del-his {
		margin-left: 0px; border-right: 0px solid #eee; border-bottom: 0px solid #eee
	}
	.store-landing {
		padding-top: 0
	}
	.head {
		margin-top: 20px !important;
		width: 92% !important;
		background: none !important;
		height: 100px !important;
	}
	.store-landing .head .store-info {
		width: 100% !important;
		margin: 0 auto !important;
		position: relative;
		left: auto;
		top: 0;
		height: 100%;
		background: none
	}
	.contain .shop div > p.right-link a {
	    float: none;
	    margin-top: 10px;
	}


	.logo {
	  	width: calc(100% - 15px);
	  	padding-left: 0
	}
	 .icon-logo {
	  	background-size: 75px;
	  	background-position: 0 1rem
	 }

}

@media only screen and (max-width: 768px) {
	.abt {
		margin-bottom: 20px
	}
	.catergeries-d .col-3 {
		margin-bottom: -20px
	}
	.whole-box {
    	background: transparent;
	}
	.modal-open .modal {
		overflow-y: auto !important;
		overflow-x: auto !important
	}
}

img.load {
	background-image: url("../img/no-img.png");
	background-size: contain;
}

.pro-pg h2.number {
	font-size: 1.2rem
}

.pro-pg h2.number span {
	font-size: 0.7rem;
	font-weight: normal
}

#promo_message_container {
	display: none !important
}

.loader-overlay {
	height: 100%;
	width: 100%;
	position: fixed;
	overflow-x: hidden;
    overflow-y: hidden;
	top:0;
	left: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.6);

}

.loader {
  margin: 0 auto 10px;
  border: 10px solid #eee;
  border-radius: 50%;
  border-top: 10px solid #FFB81C;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

.loader-overlay  .loader {
	margin-top: calc((100vh - 80px) / 2);
}

.animate {
  transition: all .5s ease-out;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.carousel-multi-item {
	overflow: visible;
}

.was-validated .form-control:valid, .form-control.is-valid, 
.was-validated .form-control:invalid, .form-control.is-invalid {
	border: 0px solid transparent;
	outline-offset:0px;
}
span.highlight {
	color: red !important
}
.was-validated .form-control:invalid, .form-control.is-invalid {
	border-radius: 0
}
.veri-num .form-control::-webkit-input-placeholder, 
.form-control::-webkit-input-placeholder { /* Edge */
  color: #ccc !important;
}
.veri-num .form-control:-ms-input-placeholder, 
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #ccc !important;
}
.veri-num .form-control::placeholder, 
.form-control::placeholder {
  color: #ccc !important;
}

.dropdown-app-content {
	position: fixed;
	right: 10%;
	z-index: 100;
	width: 250px;
	display: none;
	opacity: 0;
	transition: all .5s ease-out;
}

.app-dl {
	width: 100%;
	margin-top: 5px
}

.dropdown-show {
	opacity: 1;
	display: block
}

.more-info table {
	width: 90% !important;
	margin: 10px auto !important;
	border-color: #999 !important;
	border: 1px !important;
	color: #555 !important;
}

.more-info table td {
	padding: 5px !important;
	line-height: 1rem !important
}

.more-info table tr {
	height: auto !important;
}

@media (max-width: 480px) { 
	.more-info table td {
		width: 100% !important;
		height: auto !important;
	}
	.more-info table tr {
		height: auto !important;
	}


}

@media (min-width: 1600px) {
	.login-pg {
		height: calc(100vh - 760px);
	}
  	.login-xs .login-box {
  		margin-left: calc(100vw - 46%);
  	}
  	.login-pg .carousel-item {
  		height: 100%;
  	}
  	.login-pg .carousel-item img.d-block {
  		width: 100%;
  	}
  	
}

.home-campaign {
	
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: 0px;
    margin-left: 0px;
}

.pro-col-banner {
	-ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    padding:0 ;
    border-radius: 10px;
}

.pro-col-pro {
	-ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
    padding:0 0 0 10px;
    border-radius: 10px;
}

.pro-col-pro .row {
	margin-right: -10px
}
.plan-scroll.leftLst, .plan-scroll.rightLst{
	margin: 0;
	height:45px;
	bottom: calc((100% - 45px) / 2);
	border-radius: 0;
	border: 0px;
	color: #fff;
	background: #FFB81C;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
}

.plan-scroll.leftLst {
	left: -10px;
	border-top-right-radius: 50%;
	border-bottom-right-radius: 50%
}

.plan-scroll.rightLst {
	right: -10px;
	border-top-left-radius: 50%;
	border-bottom-left-radius: 50%;

}

.plan-scroll.leftLst:hover {
	left: 0px;
	background: rgba(0, 0, 0, 0.5);
	color:#FFB81C;
}

.plan-scroll.rightLst:hover {
	right: 0px;
	background: rgba(0, 0, 0, 0.5);
	color:#FFB81C;
}

.plan-scroll.leftLst.over, .plan-scroll.rightLst.over {
	background: rgba(255, 255, 255, 0.4) !important;
	opacity: 0
}
.banner-style {
	width: 100%; margin-top: 20px; background: #eee;; height: calc(100% - 35px);
	border-radius: 10px;
	overflow: hidden;
}

.pro-col-banner .banner-style img.devices-view {
	width: 100%
}
.home-campaign .MultiCarousel-inner {
	margin-top: 10px;
}
.home-campaign .item.product {
	padding-left: 8px;
	padding-right: 8px;
}

/*.campaign .MultiCarousel-inner .item:first-child{ 
	margin-left: -5px !important;
}
*/
.campaign .for-brand .MultiCarousel {
	margin-right: 0px;
	margin-left: 0px;
}
.campaign .MultiCarousel {
	height: auto;
	padding-top: 10px;
	padding-bottom: 0px;
	margin-right: 10px;
	margin-left: 10px;
}

.pro-col-pro .MultiCarousel {
	height: auto;
	padding-top: 10px;
	padding-bottom: 0px
}
@media only screen and (max-width: 960px) {
	.pro-col-banner .banner-style img.desktop-view {
		display: block
	}
	.pro-col-banner .banner-style img.devices-view {
		display: none
	}
}
@media only screen and (max-width: 728px) {
	.home-campaign {
		background: transparent; border-radius: 10px; padding: 0px
	}
	.pro-col-banner {
		-ms-flex: 0 0 50%;
	    flex: 0 0 50%;
	    max-width: 50%;
	    padding:0px;
	    border-radius: 10px;
	    padding-left: 0px
	}

	.pro-col-pro {
		-ms-flex: 0 0 50%;
	    flex: 0 0 50%;
	    max-width: 50%;
	    padding:0;
	    border-radius: 10px;
	}
	.pro-col-pro .on-mobile {
		display: block
	}
	.home-campaign .pro-col-pro .MultiCarousel {
		height: auto !important;
		padding-top: 20px
	}
	.home-campaign .MultiCarousel-inner {
		margin-top: 10px;
		
	}
	.MultiCarousel .MultiCarousel-inner .item > div.banner-style {
		width: 100%; background: #eee; height:100%;
		border-radius: 10px;
		margin-top: 0 !important;

	}
	
	.pro-col-pro .plan-scroll.leftLst, .pro-col-pro .plan-scroll.rightLst{
		height:45px;
		bottom: calc((100% - 45px) / 2)
	}
	.pro-col-banner .banner-style {
		margin-top: 20px;
		
		overflow: hidden;
	}
	.pro-col-banner .banner-style img.devices-view {
		display: block
	}
	.pro-col-banner .banner-style img.desktop-view {
		display: none
	}
}
.countdown {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 5px 0;
	border-radius: 10px;
	
}
.countdown.product {
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);

}
.countdown .counttitle {
	margin-left: 15px;
	-ms-flex: 0 0 calc(100% - 410px);
    flex: 0 0 calc(100% - 410px);
    max-width: calc(100% - 410px);
}
.countdown .col{
	border-radius: 5px;
	background: #222;
	margin-right: 5px;
	-ms-flex: 0 0 80px;
    flex: 0 0 80px;
    max-width: 80px;
}

.countdown .counttitle h2 {
	line-height: 45px;
	padding-bottom: 0px;
	text-shadow:
       1px 1px 0 rgba(255,255,255,0.2),
     -1px -1px 0 rgba(255,255,255,0.2),  
      1px -1px 0 rgba(255,255,255,0.2),
      -1px 1px 0 rgba(255,255,255,0.2),
       1px 1px 0 rgba(255,255,255,0.2);
}
.countdown .col h2 {
	line-height: 1rem;
	color: #fff;
	padding: 8px;
	font-size: 1.2rem;
	padding-bottom: 0px
}
.countdown .col h2 span {
	line-height: 0rem;
	font-size: 0.7rem;
	font-weight: normal;
}
.countdown .more {
	-ms-flex: 0 0 30px;
    flex: 0 0 30px;
    max-width: 30px;
    margin-right: 20px;
}

.countdown .more .btn-red-line {
	background: transparent;
	color: #ffb81c !important
}
.countdown .more .btn-red-line:hover {
	color: #243746 !important;
	border-color: #243746 !important
}
.campaign .product .brand-banner {
	border-radius: 10px; overflow: hidden; margin-bottom: 10px; width: 100%; background: #eee
}

.campaign .product .brand-banner img {
	max-width: 100%
}

@media only screen and (max-width: 728px) {
	.countdown .counttitle {
		margin-left: 5px;
		-ms-flex: 0 0 50%;
	    flex: 0 0 50%;
	    max-width: 50%;
	}
	
	.countdown .col{
		border-radius: 5px;
		background: #222;
		margin-right: 5px;
		-ms-flex: 0 0 8%;
	    flex: 0 0 8%;
	    max-width: 8%;
	}
	.countdown .col h2 {
		margin: 0 0 0 -5px;
		padding: 10px 0 0 0;
		font-size: 0.8rem
	}
	.countdown .col h2 span {
		font-size: 0.5rem
	}
	.countdown .more {
		-ms-flex: 0 0 15px;
	    flex: 0 0 15px;
	    max-width: 15px;
	    margin-right: 5px;
	}
	.zoomimg {
		max-width: 100% !important;
		margin-top: 20%;
		padding: 0
	}

}