/*------------------------------------ Desktop CSS ---------------------------------------------*/
.wrapper{max-width:1200px;margin:0 auto;min-width:320px;border:0px dashed red}
.wsmenuexpandermain{position:relative;}
.overlapblackbg{display:none;}
.bigmegamenu{position:relative;}
.header{width:100%;display:block;box-shadow:0 0 20px rgba(0,0,0,.3);z-index:1;border:0px dashed green}
.logo{height:74px;margin:0px 0 15px;}.logo-kanan{width:28%;margin:25px 0 10px;height:74px;float:right}.logo-kiri{width:28%;margin:25px 0 10px;height:74px;float:left}
.logo img,.logo-kanan img,.logo-kiri img{margin:5px 0 10px;height:74px;}
.images{margin:5px 0 10px;height:74px;}
@media only screen and (min-width:768px) and (max-width:1023px){.logo,.logo-kanan,.logo-kiri{width:100%;margin-top:0;}}
@media only screen and (min-width:230px) and (max-width:767px){.logo,.logo-kanan,.logo-kiri,.images{display:none !important; }.header{height:70px;}}
.wsatas{width:100%;float:right;}.wskanan{width:70%;float:right;margin-top:60px;}.wskiri{width:70%;float:left;margin-top:60px;}
@media only screen and (min-width: 768px) and (max-width:1023px){.wsatas,.wskanan,.wskiri{margin-top:10px;}}
.wsmenu{
font-family:Helvetica, sans-serif;
font-size:14px;
-webkit-border-radius:2px 2px 2px 2px;
-moz-border-radius:2px 2px 2px 2px;
border-radius:2px 2px 2px 2px;}
/**/
.wsmenu > .wsmenu-list > li > a{color:#424242;border-right:1px solid rgba(0,0,0,0.10);}
.wsmenu-list{text-align:left;margin:0 auto 0 auto;width:100%;display:table;padding:0px;}	
.wsmenu-list > li{text-align:center;display:table-cell;}	
.wsmenu-list li:first-child a{	-webkit-border-radius:2px 2px 2px 2px;-moz-border-radius:2px 2px 2px 2px;border-radius:2px 2px 2px 2px;}	
.wsmenu-list li:last-child a{-webkit-border-radius:2px 2px 2px 2px;-moz-border-radius:2px 2px 2px 2px;	border-radius:2px 2px 2px 2px;border-right:0px solid;}	
.wsmenu-list > li > a .fa{display:inline-block;font-size:14px;line-height:inherit;margin-right:10px;}	
.wsmenu-list li ul li a .fa.fa-angle-double-right{font-size:12px;margin:0 3px 0 -4px;}
.wsmenu-list li a .arrow:after {
border-left:5px solid rgba(0, 0, 0, 0);
border-right:5px solid rgba(0, 0, 0, 0);
border-top:5px solid #000;
content:"";
float:right;
height:0;
margin:0 0 0 9px;
position:absolute;
text-align:right;
top:22px;
width:0;}
.wsmenu-list > li > a{display:block;padding:0px 14px;line-height:48px;text-decoration:none;position:relative;}
.menu_form{font-size:16px;
float:left;
width:100%;
margin-bottom:10px;
padding:15px; 
display:block;
border: 1px solid #dedede;
border-radius: 5px 5px;
-moz-border-radius: 5px 5px;
-webkit-border-radius: 5px 5px;}
.menu_form h3{font-size:17px;line-height:20px;border-bottom:1px solid #dbdbdb;font-weight:bold;margin:10px 0;color:#242424}
/*Animation*/
.wsmenu-list li > .wsmenu-submenu{
transform-style:preserve-3d;
-o-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
transform:rotateX(-75deg);
-o-transform:rotateX(-75deg);
-moz-transform:rotateX(-75deg);
-webkit-transform:rotateX(-75deg);
visibility:hidden;}	
.wsmenu-list li:hover > .wsmenu-submenu{
transform:rotateX(0deg);
-o-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
opacity:1;
visibility:visible;}
/*A==========================================================================dari sini*/
.wsmenu-submenu li > .wsmenu-submenu-sub{
	transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform: rotateX(-75deg);
	-o-transform: rotateX(-75deg);
	-moz-transform: rotateX(-75deg);
	-webkit-transform: rotateX(-75deg);
	visibility:hidden;
	}
	
.wsmenu-submenu li:hover > .wsmenu-submenu-sub{
	transform: rotateX(0deg);
	-o-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	-webkit-transform: rotateX(0deg);
    opacity: 1;
	visibility:visible;
	}

.wsmenu-submenu-sub li > .wsmenu-submenu-sub-sub{
	transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform: rotateX(-75deg);
	-o-transform: rotateX(-75deg);
	-moz-transform: rotateX(-75deg);
	-webkit-transform: rotateX(-75deg);
	visibility:hidden;
	}
	
.wsmenu-submenu-sub li:hover > .wsmenu-submenu-sub-sub{
	transform: rotateX(0deg);
	-o-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	-webkit-transform: rotateX(0deg);
    opacity: 1;
	visibility:visible;
	}
/*B==========================================================================*/
/* Submenu CSS */
.wsmenu-submenu{
position:absolute;
z-index:1000;
margin:0;
padding-bottom:10px;
_border:solid 1px #eeeeee;
opacity: 0;
-o-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-o-transition: -o-transform 0.3s, opacity 0.3s;
-ms-transition: -ms-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;}
.wsmenu_produk{width:100%;left:0;}
.wsmenu_kemitraan{_background-color:#fff;}
.wsmenu_kemitraan .fa{font-size:14px;}
.title123 a{margin-bottom:5px;text-align:left;display:block;line-height:30px;padding:5px 0;font-size:14px;}
.wsmenu-submenu li a{text-align:left;display:block;line-height:30px;padding:5px 0;font-size:14px;}
.wsmenu-submenu li{position:relative;margin:0px;padding:0px;}
.wsmenu-submenu .fa{margin-right:5px;}
.wsmenuexpandermain{display:none;}
.wsmenu-list li:hover .wsmenu-submenu{display:block;}
/*A==========================================================================*/
.wsmenu-list .wsmenu-submenu .wsmenu-submenu-sub{min-width:220px; position:absolute; left:100%; top:0; margin:0px; padding:0px;
	opacity: 0;
	-o-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-webkit-transform-origin: 0% 0%;
	-o-transition: -o-transform 0.4s, opacity 0.4s;
	-ms-transition: -ms-transform 0.4s, opacity 0.4s;
	-moz-transition: -moz-transform 0.4s, opacity 0.4s;
	-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;}
	
.wsmenu-list .wsmenu-submenu li:hover .wsmenu-submenu-sub{opacity:1; list-style:none; padding:0 10px 10px;}
.wsmenu-list .wsmenu-submenu li:hover .wsmenu-submenu-sub{display:block;}
.wsmenu-list .wsmenu-submenu .wsmenu-submenu-sub .wsmenu-submenu-sub-sub{
	min-width:220px; position:absolute; left:100%; top:0; margin:0px; padding:0px;
	opacity: 0;
	-o-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-webkit-transform-origin: 0% 0%;
	-o-transition: -o-transform 0.4s, opacity 0.4s;
	-ms-transition: -ms-transform 0.4s, opacity 0.4s;
	-moz-transition: -moz-transform 0.4s, opacity 0.4s;
	-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;}
	
.wsmenu-list .wsmenu-submenu .wsmenu-submenu-sub li:hover .wsmenu-submenu-sub-sub{opacity:1; list-style:none; padding:0 10px 10px;}
/*B==========================================================================*/
.wsmenu-submenu li{position:relative;padding:0px;margin:0px;display:block;}
.wsmenu-click{display:none;}
.hometext{display:none;}
@media only screen and (min-width:767px) and (max-width:1023px) {
.wsmenu-list > li > a > .fa {display:none !important;}
.hometext{display:block !important;}
.wsmenu{width:100%;font-size:13px !important;position:relative;}
.wsmenu-submenu{top:48px;}
}
@media only screen and (min-width: 768px) {
.wsmenu-list li:hover > .wsmenu-submenu{display:block !important;}
/*A==========================================================================*/
.wsmenu-submenu li:hover > .wsmenu-submenu-sub{display:block !important;}
.wsmenu-submenu-sub li:hover > .wsmenu-submenu-sub-sub{display:block !important;}
/*B==========================================================================*/
.wsmenu-list li:hover > .megamenu{display:block !important;}
}
.pesananhp{display:none}
/*------------------------------------ Mobile CSS ---------------------------------------------*/
@media only screen and (max-width: 767px) {
.notifMobile{position:absolute;padding-left:5px}
.pesananhp{display:block}.pesananpc{display:none}
.wsmenucontainer{
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
_min-height:800px;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;}
.wsmenu-list > li:hover>a{background-color:rgba(0,0,0,0.08) !important; text-decoration:none;}
.hometext{ display:inline-block !important; }
.overlapblackbg{
left:0;
z-index:99999;
width:100%;
height:100%;
position:fixed;
top:0;
display:none;
background-color:rgba(0, 0, 0, 0.45);
cursor:pointer;}	
.overlapblackbg.menuopen{display:block;}
/* Default Theme  
.wsmenu-submenu > li:hover>a{ background-color:#7b7b7b; color:#000;}
.wsmenu > .wsmenu-list > li > a.active{color: #666666; background-color:rgba(0,0,0,0.08);}
.wsmenu > .wsmenu-list > li > a:hover{ color: #666666; background-color:rgba(0,0,0,0.08);}	
*/
.wsmenu-list li:hover .wsmenu-submenu{display:none ;}

/*A==========================================================================*/
.wsmenu-list li:hover .wsmenu-submenu .wsmenu-submenu-sub{display:none;}

.wsmenu-list .wsmenu-submenu .wsmenu-submenu-sub li:hover .wsmenu-submenu-sub-sub{display:none; list-style:none; padding:2px; border:solid 1px #eeeeee; _background-color:#fff;}
/*.wsmenu-list li:first-child a{-webkit-border-radius:0px 0px 0px 0px; -moz-border-radius:0px 0px 0px 0px; border-radius:0px 0px 0px 0px;}
.wsmenu-list li:last-child a{-webkit-border-radius:0px 4px 0px 0px; -moz-border-radius:0px 0px 0px 0px; border-radius:0px 0px 0px 0px; border-right:0px solid;}
.innerpnd{ padding:0px !important; }
.typography-text { padding:10px 0px; }
*/
/*B==========================================================================*/

.wsmenuexpandermain{display:block !important;position:relative;top:0;right:0;left:0;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
-ms-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;}
/* Mobile click to drop arrow */
.wsmenu-click{height:100%;position:absolute;top:0;right:0;display:block;cursor:pointer;width:100%;}
.wsmenu-click i{display:block;margin:10px 10px 0 0;font-size:25px;float:right;}
.wsmenu-rotate{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);}
/*A==========================================================================*/
/*2nd UL Style*/
.wsmenu-submenu-sub{
	width:100% !important;
	position:static !important;
	left:100% !important;
	top:0 !important;
	display:none;
	margin:0px !important;
	padding:0px !important;
	border:solid 0px !important;
	transform:none !important;
	opacity:1 !important;
	visibility:visible !important;
	}
	
.wsmenu-submenu-sub li{
	margin:0px 10px 0px 10px !important;
	padding:0px;
	position:relative;}
	
.wsmenu-submenu-sub a{
	display:block;
	padding:10px 25px 10px 25px;
	border-bottom:solid 1px #ccc;
	font-weight:normal;}
	
/*
.wsmenu-submenu-sub li a.active{color:#000 !important;}
.wsmenu-submenu-sub li:hover>a{ background-color:#333333 !important; color:#fff;}
*/
.wsmenu-submenu-sub-sub{
	width:100% !important;
	position:static !important;
	left:100% !important;
	top:0 !important;
	display:none;
	margin:0px !important;
	padding:0px !important;
	border:solid 0px !important;
	transform:none !important;
	opacity:1 !important;
	visibility:visible !important;
	background:transparent !important;
	}
	
.wsmenu-submenu-sub-sub li{
	padding:0px 20px 0px 0px !important;
	}
	
.wsmenu-submenu-sub-sub a{
	display:block;
	padding:10px 25px;
	border-bottom:solid 1px #ccc;
	font-weight:normal;}
/*B==========================================================================*/
.wsmenu-list > li > a .fa{margin-right:10px;}
.wsmenu{position: relative;}
.wsmenu .wsmenu-list{height:100%;overflow-y:auto;display:block !important;}	
.wsmenu .wsmenu-list > li{
width:240px;
display:block;
float:none;
border-right:none;
_background-color:transparent;
position:relative;
white-space:inherit;}	
.wsmenu > .wsmenu-list > li > a{
padding:9px 32px 9px 17px;
font-size:15px;
text-align:left;
border-right:solid 0px;
line-height:25px;
border-bottom:1px solid #ccc;
_border-bottom-color:rgba(0,0,0,0.13);
position:static;}	
.wsmenu > .wsmenu-list > li > a > .fa{font-size:14px;}
.wsmenu .wsmenu-list li a .arrow:after{display:none !important; }
.wsmenu .wsmenu-list li ul li a .fa.fa-caret-right{font-size:12px !important;}
.mobile-sub .wsmenu-submenu{
transform:none !important;
opacity:1 !important;
display:none;
position:relative !important;
top:0px;
visibility:visible !important;}
.wsmenu {width:0px;height:100%;position:fixed;left:0;top:0;margin:0;	border-radius:0px;z-index:100;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
-ms-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;
border:none !important;}
/*Nav Expanding Open Effect*/
.wsmenu.menuopen {
width:240px;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
-ms-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;} 
.wsmenu.menuclose{
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
-ms-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;} 
.wsmenucontent{z-index:3;}
/* Navigation arrow Animation */
.animated-arrow{position:fixed;left:0;top:0;z-index:200;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
-ms-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;}
.callusicon{
color:#fff;
font-size:30px;
height:30px;
position:fixed;
right:15px;
top:22px;
transition:all 0.4s ease-in-out 0s;
_width:60px;
z-index:2;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
-ms-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;}
.callusicon:focus, callusicon:hover {color:#fff !important;}
.mrginleft .callusicon{display:none !important;}
.wsmenuexpandermain .menuopen{left:240px !important;margin-top:4px !important;} 
.smallogo{background:red;
display:block; 
text-align:center; 
padding-top:10px; 
position:fixed; 
z-index:2;
width:100%;
height:70px;
box-shadow: 0 1px 4px rgba(0,0,0,.5);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.5);}
.smallogo img{height:50px;_width:220px}
@media only screen and (max-width:320px) {.smallogo img{width:180px;padding-top:5px;}}
.animated-arrow{cursor:pointer;padding:25px 35px 16px 0px;margin:10px 0 0 15px;}	
.animated-arrow span, .animated-arrow span:before, .animated-arrow span:after{cursor:pointer;height:3px;width:23px;background:#fff;position:absolute;display:block;content:'';}	
.animated-arrow span:before{top:-7px;}	
.animated-arrow span:after {bottom:-7px;}	
.animated-arrow span, .animated-arrow span:before, .animated-arrow span:after{transition:all 500ms ease-in-out;}	
.animated-arrow.menuopen span{background-color:transparent;}	
.animated-arrow.menuopen span:before, .animated-arrow.active span:after{top:7px;}	
.animated-arrow.menuopen span:before {transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);-webkit-transform:rotate(45deg);bottom:0px;}	
.animated-arrow.menuopen span:after {transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);}
}