/*

	@package hjone

*/



/*

	Generic

	---------------------------------------------------------

*/

@charset "utf-8";

@font-face {
  font-family: 'Huawei Sans';
  src: url(/wp-content/themes/hjmedia/fonts/HuaweiSans.eot);
  src: url(/wp-content/themes/hjmedia/fonts/HuaweiSans.eot#iefix) format("embedded-opentype"),
  url(/wp-content/themes/hjmedia/fonts/HuaweiSans.woff2) format("woff2"),
  url(/wp-content/themes/hjmedia/fonts/HuaweiSans.woff) format("woff"),
  url(/wp-content/themes/hjmedia/fonts/HuaweiSans.ttf) format("truetype"),
  url(/wp-content/themes/hjmedia/fonts/HuaweiSans.svg#eicon) format("svg");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'Huawei Sans';
  src: url(/wp-content/themes/hjmedia/fonts/HuaweiSansBold.eot);
  src: url(/wp-content/themes/hjmedia/fonts/HuaweiSansBold.eot#iefix) format("embedded-opentype"),
  url(/wp-content/themes/hjmedia/fonts/HuaweiSansBold.woff2) format("woff2"),
  url(/wp-content/themes/hjmedia/fonts/HuaweiSansBold.woff) format("woff"),
  url(/wp-content/themes/hjmedia/fonts/HuaweiSansBold.ttf) format("truetype"),
  url(/wp-content/themes/hjmedia/fonts/HuaweiSansBold.svg#eicon) format("svg");
  font-style: normal;
  font-weight: bold;
}
body{
	font-family: 'Huawei Sans', sans-serif;
	font-size: 16px;
	padding-top: 104px;
}
a:hover{text-decoration: none;}
.subscribe-box{position: relative;}
.submit-btn,.senticon{position: absolute; right: 0; top: 10px; opacity: 0; z-index: 9;}
.senticon{z-index: 8; opacity: 1; top: 15px; right: 5px; }
input.subinput{border: none; max-width: 100%;
    border-bottom: 1px solid #605843;
    padding: 10px 30px 10px 0;}
footer a{color: #9e9e9e;}
footer a:hover{color: #fff;}
footer{padding-top: 60px; padding-bottom: 30px; color: #fff; margin-top: 30px; background-color: #272727; }
.footermenu{list-style: none; margin: 0; padding: 0; font-weight: bold;}
.footermenu ul{display: none;}
.footermenu li{padding: 0 0 10px 0;}
.footermenu a{color: #9e9e9e; font-weight: normal;}

.footermenu.solution-menu ul{display: block; list-style: none; margin: 0;padding: 0; font-weight: normal;}
.footermenu.solution-menu ul li{padding: 3px 0;}
.footermenu.solution-menu ul li:first-child{padding-top: 10px;}
.footer-col{padding: 0 15px;}
.footer-col.about{width: 45%; padding-left: 0;}

.ssicon{list-style: none; margin: 0 0 20px 0; padding: 0; float: left; width: 100%; font-size: 200%;}
.ssicon li{float: left; margin-right: 15px;}
.ssicon li a{color: #9e9e9e; transition: color 0.3s}
.ssicon li a:hover{color: #fff;}
.copyright{margin: 35px 0; color: #9e9e9e;}
/*Mobile (Small screen)*/
.admin-bar header{ top: 32px;}
header{position: fixed; top: 0; width: 100%; left: 0; right: 0; z-index: 100000; background-color: #fff;}
.fixed header{box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);-webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);-moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75); padding-bottom: 10px;}
.copyright{font-size: 80%;}
#cart{display: block; position: absolute; top: 10px; right: 80px;  background-color: #414042; color: #fff; padding: 3px 12px; border-radius: 12px;}
.mar-b15{margin-bottom: 15px;}
.quo-btn,.quo-btn:focus{
	text-decoration:none;
	padding:8px 16px;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(75,148,198,1);
-moz-box-shadow: 0px 0px 5px 0px rgba(75,148,198,1);
box-shadow: 0px 0px 5px 0px rgba(75,148,198,1);
	display:inline-block;
	border-radius:20px;
	color:#fff;
	background-color:#4B94C6;
	transition:all 0.3s;
}
.quo-btn:hover{
	background-color:#fff;
	color:#4B94C6;
}
@media (max-width: 767px) {
	.footer-col{width: 100% !important;}
	/* add arrow to has children li 
	.menu-item-has-children::after{display: block; width: 15px; height: 20px; content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #fff; float: right; margin-right: 10px;}*/
	#showmenu,#close{color: #333; float: right; font-size: 200%; }
	#close{color: #fff; margin-right: 25px; margin-top: 15px;}
	.mobilemenu{
		position: fixed;
    left: -120vw;
	
    width: 100%;
    z-index: 9999;
    top: 0;
    bottom: 0;
    height: 100vh;
		background-color: #000;
		overflow-y:auto;
		transition:left 0.3s linear;
	}
	.mobilemenu.show{
		left: 0;
		
	}
	.mnav,
.nav__sub {
	margin-top: 0;
	margin-bottom: 0;
	padding: 15px;
	list-style-type: none;
}

.mnav {
	position: relative;
	width: 400px;
	background-color: black;
	overflow:auto;
	height: 100%;
}

.nav__item + .nav__item {
	margin-top: 25px;
}

.nav__link {
	font-weight: 500;
	color: white;
	text-decoration: none;
}

.nav__sub {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	opacity: 0;
	visibility: hidden;
	transition: all 0.35s ease-in-out;
	transform: translateX(100%);
	
	&.is-active {
		opacity: 1;
		visibility: visible;
		transform: translateX(0%);
	}
}
	.nav__link.sub__close{display: inline-block; margin-bottom: 15px;}
}

/*iPad V*/

@media (min-width: 768px) {
	#cart{right: 10px; top: 30px;}
	ul.mainmenu{list-style: none; margin: 0; padding: 0; display: flex; margin-top: 20px; justify-content: flex-end;}
	ul.mainmenu > li{position: relative; display: inline-flex; z-index: 99;}
	ul.mainmenu > li > ul{position: absolute; left: 0; top: 100%; list-style: none; margin: 0; padding: 0; visibility: hidden; opacity: 0; background-color: #605843; transition:visibility 0.3s linear,opacity 0.3s linear; width: max-content;}
	ul.mainmenu > li > ul > li{display: block;}
	ul.mainmenu > li:hover > ul{opacity: 1; visibility: visible; text-align: j}
	ul.mainmenu > li > a{color: #222; padding: 15px 25px;transition: all 0.3s;}
	ul.mainmenu > li > ul > li > a{color: #fff; padding: 15px 25px;transition: all 0.3s; display: block;}
	ul.mainmenu > li::after,ul.mainmenu > li::before{display: block; content: ""; width: 10px; height: 10px; position: absolute; transition: all 0.3s; opacity: 0; z-index: 9}
	/*ul.mainmenu > li::before{border-left: 3px solid #8EC63E; border-bottom: 3px solid #00C0F2; left: -10px; bottom: -10px;}
	ul.mainmenu > li::after{border-right: 3px solid #8E4F9E; border-top: 3px solid #F1632A; right: -10px; top: -10px;}
	ul.mainmenu > li:hover::before{left: 10px; bottom: 10px; opacity: 1;}
	ul.mainmenu > li:hover::after{right: 10px; top: 10px; opacity: 1;}*/
	ul.mainmenu > li:hover > a{color: #4A94C8; background-color:#fff }
	ul.mainmenu > li > ul > li > a:hover{ background-color: #000;}
/*1024 V*/
	.product-item{
		min-height: 410px;
	}
	.footer-col.footer-contact{padding-left:50px }
}
@media (min-width: 992px) {
.footer-col.footer-contact{padding-left:120px }
}

/*Large screen V*/

@media (min-width: 1200px) {
.footer-col.footer-contact{padding-left:150px }
}