/* 
CSS File Last Update : 9 February 2016
Project: pdvshop.com (PANDAVA SHOP)
Website Designed & Coded by: Aditama (pandavamedia.net)
*/

/* HEADER NAVIGATION */
#headerSection { position:fixed; z-index:1500; top:0px; width:100%; background:#FFFFFF; border-bottom:1px #CCCCCC solid; height:74px; /*background-image:linear-gradient(rgba(255,255,255, 0.8), rgba(255,255,255, 0)); */
	/*-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
		 -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
					box-shadow: 0px 0px 2px rgba(0,0,0,0.3);*/
}
/*#sectionHeader.smallHeader { position:fixed; background:rgba(0,0,0,0.7); height:12%; max-height:65px; min-height:60px; padding-top:10px; border-bottom:1px rgba(255,255,255,0.3) solid; }*/
.navWrapper { position:relative; width:95%; height:100%; /*max-width:1100px;*/ }

/* MENU */
.dvMenuLf { position:absolute; left:0; overflow:hidden; }
.dvMenuRg { position:absolute; right:0; overflow:hidden; }
#menuNavigation { cursor:pointer; float:left; background-color:#333333; background-position:9px 0 !important; padding:12px 15px 12px 40px; color:#FFFFFF; font-size:14px; font-weight:500; letter-spacing:0.8px; border-radius:8px; margin:auto; }
#menuNavigation:hover { background-color:#0099CC; }
.sLogo { position:absolute; top:5px; bottom:auto; left:0; right:0; margin:auto; max-width:60%; height:80%; }
.sLogo img { position:absolute; top:0; left:0; right:0; margin:auto; max-width:100%; max-height:100%; }
#navCover { display:none; z-index:10500; cursor:pointer; position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.6); }
#sideMenuBox { display:none; z-index:11000; position:fixed; left:0; top:0; bottom:0; width:30%; max-width:350px; background:#222222; border-right:1px #999999 solid; text-align:left; }
.navHeader { position:absolute; display:block; padding:10px; top:0; left:0; right:0; } 
.navBox { position:absolute; top:49px; left:0; right:0; bottom:0; overflow-y:auto; }
.navBox.noLogin { top:130px; }
.navBar {  }
.navBar>ul { list-style-type:none; }
.navBar>ul>li { position:relative; overflow:hidden; cursor:pointer; background:#555555; padding:8px 10px; font-size:16px; color:#FFFFFF; border-top:1px rgba(255,255,255, 0.3) dashed;
		-webkit-transition: all 0.2s ease-out;
       -moz-transition: all 0.2s ease-out;
        -ms-transition: all 0.2s ease-out;
         -o-transition: all 0.2s ease-out;
            transition: all 0.2s ease-out;
}
.navBar>ul>li:first-child { border-top:0; }
.navBar>ul>li:hover { background:#333333; }
.navBar>ul>li.navSearch { position:relative; cursor:auto; }
.navBar>ul>li.navSearch:hover { background:#888888; }
.navBar>ul>li>label { float:left; color:#DDDDDD; font-size:14px; padding-top:1px; padding-right:8px; margin-left:5px; display:inline-block; }
.navBar>ul>li>a { float:right; color:#FFFFFF; width:88%; }
.navHome { background-position:0 -182px !important; padding-left:30px; width:90% !important; }
.navAccount { background:url('../../i/icons/icn-account.png') no-repeat 2px center; padding-left:30px; width:90% !important; font-weight:normal !important; }
.navAccIcn { position:absolute; top:0; bottom:0; left:10px; margin:auto; width:15px; height:15px; }
.navAccIcn.navProfile { background:url('../../i/icons/icn-profile.png') no-repeat center center; }
.navAccIcn.navWishlist { background:url('../../i/icons/icn-wishlist.png') no-repeat center center; }
.navAccIcn.navPurchase { background:url('../../i/icons/icn-purchase.png') no-repeat center center; }
.navAccIcn.navConfirm { background:url('../../i/icons/icn-confirm.png') no-repeat center center; }

/* FOLD MENU */
.navBar>ul>li.foldNv { background-color:#a2a99a; }
.navBar>ul>li.foldNv:hover { background-color:#919a87; }
.navBar>ul>li.foldNv>a { color:#FFFFFF; }
.foldArr { position:absolute; width:11px; height:7px; top:0; bottom:0; right:12px; margin:auto; background:url('../../i/icons/icn-arrexpand.png') no-repeat center center; opacity:0.4; }
.foldArr.arrCollapse { background-image:url('../../i/icons/icn-arrcollapse.png'); }
.navBar>ul>li.foldNv:hover>.foldArr { opacity:1.0; }
.foldBox { display:none; }
.foldBox.foldShow { display:block; }
ul.navAccMember>li { padding:8px 10px; font-size:15px; }
a.foldOn { color:#EEEEEE !important; }

a.navMbrBtn { float:left; color:#FFFFFF; font-size:15px; padding:8px 0px; text-align:center; font-weight:bold; opacity:0.8; 
	-webkit-border-radius: 3px; 
	   -moz-border-radius: 3px; 
					border-radius: 3px;
}
a.navMbrBtn:hover { opacity:1.0; }
a.navMbrBtn.navRegister {  margin:15px 0px 5px 0px; width:55%;  
    background: #F6D141; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#F6D141, #c6a41e); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#F6D141, #c6a41e); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#F6D141, #c6a41e); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#F6D141, #c6a41e); /* Standard syntax */
}
a.navMbrBtn.navLogin { float:left; margin:15px 0px 5px 10px; width:40%;
    background: #000000; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#666666, #000000); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#666666, #000000); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#666666, #000000); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#666666, #000000); /* Standard syntax */
}
a.navMbrBtn.navLogout { position:relative; float:left; margin:0px 10%; width:70%;
    background: #009999; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#0099CC, #009999); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#0099CC, #009999); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#0099CC, #009999); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#0099CC, #009999); /* Standard syntax */
}
.logoutLoading { display:none; position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.6) url('../../i/out-loading.png') no-repeat 5% center; }
.navBar>ul>li.navAcc { position:relative; cursor:auto; overflow:hidden; }
.navBar>ul>li.navAcc:hover { background:#292929; }
.navBar>ul>li.navOut { background:#e7f2d6; }
.navBar>ul>li.navOut:hover { background:auto; }
.usrAcc { float:left; overflow:hidden; width:88%; color:#EEEEEE; line-height:18px; }
.usrAcc>label { display:block; font-weight:bold; margin-bottom:5px; }
.usrName { float:left; margin-top:5px; margin-left:10px; width:80%; }
.usrName>a { color:#FFFF00; font-size:14px; font-weight:bold; }
.usrPic { float:left; width:30px; height:30px;
	background:#DDDDDD url('../../i/icons/icn-user.png') no-repeat center center;
	-webkit-border-radius: 50%; 
	   -moz-border-radius: 50%; 
					border-radius: 50%;
}
.usrPic.nvUser { margin-right:15px; border:1px #CCCCCC solid; }
.navClose { float:right; cursor:pointer; width:20px; height:20px; background-position:-1px -147px !important; opacity:0.5; margin-top:5px; margin-right:-5px; }
.navClose:hover { opacity:1.0; }

/* MENU GROUP */
.navGroup { cursor:pointer; position:relative; display:block; background-color:#444444; border-bottom:1px rgba(255,255,255, 0.3) solid; background-repeat:no-repeat; background-position:10px center; padding:12px 10px 12px 45px; color:#666666; }
.navGroup:hover { background-color:#333333; }
.navGroup:hover>.foldArr { opacity:1.0; }
.navGroup>a { color:#FFFFFF; }
.navGroup.groupGadget { background-image:url('../../i/cat-icons/icng-gadget.png'); }
.navGroup.groupFashion { background-image:url('../../i/cat-icons/icng-fashion.png'); }
.navGroup.groupAppliance { background-image:url('../../i/cat-icons/icng-appliance.png'); }
.navGroup.groupTools { background-image:url('../../i/cat-icons/icng-tools.png'); }
.navGroup.groupSocket { background-image:url('../../i/cat-icons/icng-socket.png'); }
.navGroup.groupSafety { background-image:url('../../i/cat-icons/icng-safety.png'); }
.navGroup.groupDoor { background-image:url('../../i/cat-icons/icng-door.png'); }
.navGroup.groupWindow { background-image:url('../../i/cat-icons/icng-window.png'); }
.nvGrpIcn { position:absolute; width:25px; height:25px; top:0; bottom:0; left:11px; margin:auto; overflow:hidden; background-repeat:no-repeat; background-position:center center; background-size:contain; }
.nvGrpIcn img { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; max-width:100%; }
.groupFruitsVege { background-image:url('../../i/cat-icons/icng-fruits-vegetables.png'); }

/* SEARCH */
.sSearch { cursor:pointer; float:left; width:33px; height:34px; background:url('../../i/buttons/btn-search.png') no-repeat center center; margin: 8px 5px 0px 15px; opacity:0.6; }
.sSearch:hover { opacity:1.0; }
.sSearchDrpBar { z-index:900; display:none; position:absolute; top:75px; width:100%; min-height:30px; background:rgba(255,255,255,0.9); padding:10px 0px; }
.sSearchDrpClose { cursor:pointer; position:absolute; background:url('../../i/buttons/btn-search-close.png') no-repeat center center; width:20px; height:20px; top:0; bottom:0; right:3%; margin:auto; opacity:0.7; }
.sSearchDrpClose:hover { opacity:1.0; }
.sSearchArea { position:relative; overflow:hidden; background-color:#666666; width:70%;
	-webkit-border-radius: 3px; 
	   -moz-border-radius: 3px; 
					border-radius: 3px;
}
input.srchBox { background:#FFFFFF url('../../i/icons/icn-search.png') no-repeat 8px center; width:72%; height:30px; padding:5px 30px 5px 33px; font-size:16px; color:#DDDDDD;
	border:0;
	-webkit-border-radius: 3px; 
	   -moz-border-radius: 3px; 
					border-radius: 3px;
		-webkit-transition: all 0.2s ease-out;
       -moz-transition: all 0.2s ease-out;
        -ms-transition: all 0.2s ease-out;
         -o-transition: all 0.2s ease-out;
            transition: all 0.2s ease-out;
}
input.srchBox:focus { border:0; color:#FFFFFF; background-color:#666666;
	-webkit-box-shadow: none;
		 -moz-box-shadow: none;
					box-shadow: none;
}
input.srchBox.srchDrop { float:left; background-color:#666666; width:74%; background-image:none; padding:5px 20px 5px 20px; }
.srchDropBtn { cursor:pointer; float:right; font-family: 'Rubik', sans-serif; background:#FF9900; color:#FFFFFF; font-size:13px; padding:12px 40px 13px 40px; border:0; opacity:0.8;
  -webkit-border-radius: 0 3px 3px 0; 
	   -moz-border-radius: 0 3px 3px 0; 
					border-radius: 0 3px 3px 0;
}
.srchDropBtn:hover { opacity:1.0; }
.srchDropBtn.srchBtnMobile { display:none; }
.srchDel { cursor:pointer; position:absolute; background:url('../../i/icons/icn-searchdelete.png') no-repeat center center; width:15px; height:15px; top:0; bottom:0; right:13px; margin:auto; }

/* HAMBURGER MENU */
.c-hamburger {
	cursor:pointer;
  display: block;
  position: relative;
  float:left; 
  overflow: hidden;
  margin: 8px 0px 0px 0px;
  padding: 0;
  width: 118px; /* width: 40px; */
  height: 40px;
  font-size: 0;
  text-indent: -9999px;
  appearance: none;
  box-shadow: none;
  border: none;
  cursor: pointer;
  background-color:#bbc4af !important;
  transition: background 0.3s;
  /*border:1px #FFFFFF solid;*/
  -webkit-border-radius: 5px; 
	   -moz-border-radius: 5px; 
					border-radius: 5px;
}
.c-hamburger:hover {	
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
		 -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
					box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
}

.c-hamburger:focus {
  outline: none;
}

/* height control size height of middle bar */
/* top control padding of bars from top of box */
/* left, right control padding of bars from left & right side of box */
.c-hamburger span {
  display: block;
  position: absolute;
  top: 18px;
  left: 10px;
  /*right: 10px;*/
  width:25px;
  height: 4px;
  background: #FFFFFF;
}
.c-hamburger label { cursor:pointer; position: absolute; top: 7px; left: 45px; color:#000000; font-size:13px; text-indent:0; letter-spacing:0.8px; }

/* height control size height of top and bottom bar */
.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #FFFFFF;
  content: "";
}

/* control distance between top bar to middle bar */
.c-hamburger span::before {
  top: -6px;
}
/* control distance between bottom bar to middle bar */
.c-hamburger span::after {
  bottom: -6px;
}
.c-hamburger--htx {
  background-color: #DFDFDF; /* color of button */
}

.c-hamburger--htx span {
  transition: background 0s 0.3s;
}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}

.c-hamburger--htx span::before {
  transition-property: top, transform;
}

.c-hamburger--htx span::after {
  transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
  background-color: #E0E0E0;
  border:1px #DDDDDD solid;
}

.c-hamburger--htx.is-active span {
  background: none;
}

.c-hamburger--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg);
}

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  transition-delay: 0s, 0.3s;
}