﻿/*Styles for screen 650px and lower*/

@media screen and (max-width: 1024px)
{
.wrap { width:100%;}
}
@media screen and (max-width: 812px)
{
#topmenu, .DMenu { display:none;}
.flogo { text-align:center;}
.ddsmoothmenu ul li a {  padding: 10px 10px 0 10px !important;}
.breadcrumbs { clear:both; position:relative; height:auto; padding:0 5px;}
.divSupport, .divBannerSupport { width:100%; clear:both;  position:relative; float:none; left:auto; height:auto;}
.divSupport { padding-bottom:15px; margin:0;}
.divSupport table { text-align:center; width:100%;}
.col-md-3, .col-md-4 { clear:both; width:99%;}
.aDetail, .slideshow, .topContent .cartTop { width:100%; float:none; clear:both;}
.aRight { width:100%; float:none; clear:both; padding:10px 0;}
#canvas	{		margin: 0 auto;		padding: 20px;	}
#productHome .project, #productHome5 .project {  float: left;  margin-left: 2.912621359223301%;  margin-top: 10%;  width: 47.0873786407767%;  cursor: pointer;}
#productHome .project:nth-child(3n+1), #productHome5 .project:nth-child(5n+1) {  clear: none;}
/*#productHome .project:nth-child(odd), #productHome5 .project:nth-child(odd) {  clear: left !important;}*/
.col4 { width:49%; float:left; margin-right:2%;}
.col4:nth-child(even) { margin-right:0 !important;}
.menuMobile { display:block; position:absolute; right:10px; top:20px; text-align:center;color:#69AA36;}
.menuMobile a { color:#69AA36;}
.menuMobile a:hover { color:#E74C3C;}
.mobileMenu {    position: fixed;    top: 0;    left: -310px;    width: 310px;    background: #69AA36;    z-index: 101;    height: 100vh;    overflow: auto;    transition: all 0.5s ease;}
.mobileMenu ul li, .mobileMenu .home { clear:both; overflow:hidden; width:100%; padding:5px 0; position:relative;border-bottom: 1px dotted #EEE; white-space:nowrap;}
.mobileMenu ul li .m-menu-icon, .mobileMenu .home i {width:50px; height:40px; float:left; text-align:center;}
.mobileMenu ul li .m-menu-content, .mobileMenu .home .m-menu-content { padding:7px 10px; text-align:left; overflow:hidden;}
.mobileMenu ul li .m-menu-button {width:45px; height:40px; float:right; text-align:center; }
.mobileMenu ul li .m-menu-button .iButton {border-radius:5px; background-color:#EFEFEF; text-align:center; border:1px solid #EEE; width:40px; padding:5px 0;}
.mobileMenu ul li .m-menu-button .iButton i { width:30px;}
.mobileMenu ul li div img { max-height:35px; padding-top:5px;}
.mobileMenu.active { left:0; display:block;}
.mobileMenu .mSub1 { clear:both; overflow:hidden; text-align:left; width:100% !important;}
.mobileMenu .mSub1 .m-sub-item {clear:both; position:relative; padding:5px 0; border-top:1px dotted #EEE; overflow:hidden; text-align:left; padding-left:30px; }
.mobileMenu .mSub1 .m-sub-item .m-sub-content { width:200px; float:left; text-align:left; height: 30px; white-space:nowrap;}
.mobileMenu .mSub1 .m-sub-item .m-sub-button { width:40px; height:30px; float:right; text-align:center;}
.mobileMenu .mSub1 .m-subs-item {clear:both; padding:5px 0; border-top:1px dotted #EEE; overflow:hidden; text-align:left; padding-left:10px; }
.rightplus::before {    content: "\2014";    color: #000;    display: inline-block;    position: absolute;    right: 15px;    top: 12px;    width: 1px;    height: 15px;    -ms-transform: rotate(90deg);    -webkit-transform: rotate(90deg);    transform: rotate(90deg);}
.rightplus::after {    content: "\2014";    color: #000;    position: absolute;    right: 18px;    top: 10px;    width: 15px;    height: 1px;}
.right-down::before{display:none!important}
.overlay {    position: fixed;    width: 100%;    height: 100%;    top: 0;    left: 0;    background: rgba(0, 0, 0, 0.6);    z-index: 9;    display: none;}
.overlay.active {    display: block;}
	.Logo
	{
		 text-align:center; float:none; margin-bottom:20px; clear:both;
		 width:100%;
	}
	.topContent
	{
		width:96%;
		padding: 5px 2% !important;
	}
	.mnTop	{ display:none;		background-color: Transparent;		top: auto;		width:100%;	}
	.ProBoxGalleryOther	{		width: 44%;	}
	.mainContent { clear:both; width:98% !important;margin-right: 5px;margin-left: 5px;}
	.Right { clear:both; width:98% !important;}
	.Right .adver { display:none;}
	.ProBoxGalleryHome
	{
		width: 44%;
	}
	.Header
	{
		height: auto;
	}
	.FooterBox
	{
		width: 100%;
	}
	.FooterCopyright
	{
		width: 100%;
	}
	.FooterCopyright iframe { width:100% !important;}
	.FooterMenu
	{
		clear: both;
		text-align: left;
		background-color: #f5f5f5;
		overflow: hidden;
		width: 100%;
		margin: 10px 0;
		padding: 20px 0px 20px 0px;
	}
	.FooterMenu ul
	{
		margin: 0px;
		padding: 5px;
		width: 96%;
		float: left;
	}
	.FooterMenu ul li
	{
		display: block;
		padding: 5px 10px;
		color: #f1f1f1;
	}
	.FooterMenu ul li a
	{
		color: #717171;
	}
	.FooterMenu ul li a:hover
	{
		color: #fff;
	}

	.FooterAdd
	{
		clear: both;
		text-align: left;
		background-color: #0063be;
		overflow: hidden;
		width: 100%;
		margin: 10px 0;
		padding: 10px 0px 10px 0px;
		border-top: 1px solid #4e4e4e;
	}
	.FooterAdd .bot
	{
		margin: 0px;
		padding: 20px 0px 0px 20px;
		width: 96%;
		float: left;
		border-top: 1px solid #4e4e4e;
		text-align: left;
		color: #f1f1f1;
	}
	.FooterAdd ul
	{
		margin: 0px;
		padding: 5px;
		width: 96%;
		float: left;
	}
	.FooterAdd ul li
	{
		display: block;
		padding: 5px 10px;
		color: #f1f1f1;
	}
	.FooterAdd ul li a
	{
		color: #f1f1f1;
	}
	.FooterAdd ul li a:hover
	{
		color: #fff;
	}
	.newsItemR .title, .newsItemR .desc
	{
		width: 54%;
	}

	.topmenu
	{
		display: block;
	}
	#topmenu ul li
	{
		padding: 0 !important;
	}
	#topmenu ul li ul
	{
		display: none !important;
	}
	.ProInfo .short iframe, .pAll iframe, .nContent iframe{ width:100% !important; height: auto !important;}
	.content table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.content thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.content tr { border: 0px solid #ccc; }
	
	.content td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 0px solid #eee; 
		position: relative;
		padding-left: 1%; 
		
	}
	.contact td {text-align:left !important;}
	.shopcart td {border-bottom: 1px solid #ccc !important; min-height:30px; }
	.shopcart tr { border: 1px solid #ccc !important; }
	.content td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	.mnTop
	{
		height: auto;
		border-bottom: none;
		position: relative;
	}
	nav ul li
	{
		font-size: 10pt;
		background-color: #0E75B8;
		margin: 0.2%;
		border-radius: 3px;
		padding: 8px 0px;
	}
	nav ul li a
	{
		color: White;
		border: none;
		padding-left: 15px;
	}
	nav ul li a:hover
	{
		color: #EFEFEF;
	}
	nav ul li:hover, nav ul li:active
	{
		background-color: #8c99a4;
	}

	nav
	{
		height: auto;
	}
	nav a#pull
	{
		display: block;
		background-color: #0E75B8;
		width: 100%;
		position: relative;
		padding: 7px 0;
		color: #fff;
		font-size: 10pt;
	}
	nav a#pull:after
	{
		content: "";
		background: url('../../images/nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 0;
		top:10px;
	}
	nav ul
	{
		width: 100%;
		display: none;
		height: auto;
	}
	nav li
	{
		width: 49.6%;
		float: left;
		position: relative;
	}
}

/*#Footer1_PopupRight1_pnPop { display:none;}*/