/* 4. #MOBILE (PORTRAIT)
iPhone portrait 320 x 480 and
Crappy Android landscape 320 x 240
================================================== */
@media only screen and (max-width: 767px) {
	
	
	/**header**/
	.logo{ width:100%; height:auto; float:none; text-align:center;}
	nav{ width:100%; height:auto; padding:0% !important; margin:0% !important; float:none ;}
	.inner-container{ width:100%; height:auto;}
	.customer-login-btn{ width:100%; height:auto; float:none; margin:2% 0% 0% 0%!important; padding:0% !important;}
	.c-l-btn { margin:0% 0% 0% 0%!important; padding:0% !important; float:none; width:95%; margin:auto !important;}
	.banner{ margin-top:10px;}
	.c-l-btn{border-radius:0px; width:94%; padding:2% 3%!important; margin:0px !important;}
	.customer-login-btn { padding:0% 0%!important; margin:0% !important; }
	.banner { margin:0px 0px 20px 0px;}
	.container-box { width: 90%;padding: 2% 5%;height: auto;}
	.col-4 { width:100%; float:none; margin-bottom:20px;}
	.services-box { padding-top:30px; margin-bottom:30px; padding-bottom:30px;}
	.col-40{ width:100%; float:none; text-align:center; padding:10px 0px;}
	.col-60{ width:100%; float:none;text-align:center;padding:10px 0px;}
	.col-2{ width:100%; float:none;padding:10px 0px;}
	.followus, .contact { margin:0px auto; text-align:center;}
	.col-60 span { display:block; padding:10px;}
	.banner-next { width:100%; height:auto;}
	
	.left-side, .right-side { width:100%; float:none; height:auto; padding:5% 0% 0% 0%; margin:0% 0% 5% 0%;}
	.soluiotn-info-graphics img { width:100%; height:auto;}
	
	.sol-img-2 { text-align:center; display:block; margin:0px auto 30px auto;}
	.sol-img-3 {text-align:center; display:block; margin:0px auto 30px auto;}
	.sol-img-4 {text-align:center; display:block; margin:0px auto 30px auto;}
	.sol-4box { width:94%; float:none; height:auto; padding:3%; margin:3% 0%;}
	.col-3{ width:100%; float:none;padding:10px 0px;}
	.tecnology-img { width:100%; height:auto;}
	.ab-img img { width:100%; height:auto;}
	.m-heading { margin-top:22px !important;}
	.map-box{ height:auto;}
	.col-30 { width:94%; float:none; height:auto; padding:0% 3%; margin:1% 0%;}
	.col-70 { width:94%; float:none; height:auto; padding:0% 3%; margin:1% 0%;}
	.requst-demo { width:100%; height:auto;}
	.thank-you img { width:100%; height:auto;}
	#apDiv1{ display:none;}
	
	.col-4-logo { width:48%; float:left;}
	.right-box { float:none; width:92%; margin:4%; padding:0%; height:auto;}
	.left-link-box{ float:none; width:92%; margin:4%; padding:0%; height:auto;}
	.banner-next{ text-align:center !important; padding:20px 0px;}
	.banner-next h1 { text-align:center !important;}
	.left-link-box h2 { padding:20px 10px 10px 20px;}
	.left-link-box ul{ padding:0px 10px 30px 20px;}
	
	.col-4-logo{ float:none; width:100%; height:auto;}
	
	
	#main-menu {
			position:relative;
			z-index:9999;
			width:auto;
		}
		#main-menu ul {
			width:100%; /* fixed width only please - you can use the "subMenusMinWidth"/"subMenusMaxWidth" script options to override this if you like */
		}
		
		.phone-bar { text-align:center;}
		
		
		.f-col-2{ width:96%; height:auto; padding:8px 0% 8px 2%; float:none; font-size:14px; color:#000; text-align:left;font-family: 'droid_regular';}
.f-col-2-1{ width:96%; height:auto; padding:8px 0% 8px 2%; float:none; font-size:14px; color:#000; text-align:left;font-family: 'droid_regular';}

.c-col-3 { width:94%; float:none; height:auto; padding:2%; text-align:center; border: dotted 1px #666666; margin:1%;}

	
	}



/*@media only screen and (min-width: 768px) and (max-width: 959px) {
	.logo{ width:100%; height:auto; float:none;text-align:center;}
	.logo img { width:30%; height:auto; }
	
	.phone-bar { text-align:center;}
	nav {
    width:100%;
    height: auto;
    float: none;
    display: block;
    padding:0% !important;
	margin:1% 0% 0% 0% !important;
	border-top:solid #ccc 1px;
	}
	}*/



@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	.logo{ width:100%; height:auto; float:none;text-align:center;}
	.logo img { width:30%; height:auto; }
	
	.phone-bar { text-align:center;}
	nav {
    width:100%;
    height: auto;
    float: none;
    display: block;
    padding:0% !important;
	margin:1% 0% 0% 0% !important;
	border-top:solid #ccc 1px;
	}


.c-col-3 { width:94%; float:none; height:auto; padding:2%; text-align:center; border: dotted 1px #666666; margin:1%;}


.customer-login-btn {
    width:15%;
    height: auto;
    float: left;
    margin-top: 15px !important;
	padding-right:0%;
}


	.inner-container {
	width:100%;
    max-width: 1170px;
    margin: 0px auto;
	}

	.col-60 span { padding:0px 6px;}
	.map-box { height:300px;}
	
	.col-4 {
    width: 47.1%;
    height: auto;
    float: left;
	}
	
	.sol-4box { width:42%; margin:2%; float:left; height:auto; padding:2%;}
	.col-2 img { width:100% !important; height:auto !important;}
	.contact img { width:auto !important;}
	.soluiotn-info-graphics img {width:100%; height:auto;}
	.col-60 span {
    padding: 0px ;
	}
	
	.new-img img { width:100%; height:auto;}
	.contact-title img { width:auto !important;}
	.requst-demo { width:100%; height:auto;}
	
	.ab-img img { width:100%; height:auto;}
	
	.col-4-logo {
    width:48%;
    margin: 1%;
    height: auto;
    float: left;
}


	.right-box { float:none; width:92%; margin:4%; padding:0%; height:auto;}
	.left-link-box{ float:none; width:92%; margin:4%; padding:0%; height:auto;}
.left-link-box h2 {
    padding: 20px 10px 10px 20px;
}

.left-link-box ul {
    padding: 0px 10px 30px 20px;
}
.banner-next h1 { padding-left:20px;}
	
	}
	
	
	

	
	
	@media only screen and (min-width: 942px) and (max-width: 1204px) {
		.logo{ width:20%; height:auto;}
	.logo img { width:100%; height:auto;}
	
	
	nav {
    width:78%;
    height: auto;
    float: left;
    display: block;
    padding:0% !important;
	margin:1.5% 0% 0% 2% !important;
	}
	
	.customer-login-btn {
    width:14%;
    height: auto;
    float: left;
    margin-top: 18px !important;
	padding-right:1%;
}
		.inner-container {
	width:100%;
    max-width: 1170px;
    margin: 0px auto;
		
		}
		
.ab-img img,{ width:100%; height:auto;}	

.left-link-box {
    width:26%;
    height: auto;
    padding: 2%;
    background-color: #01a4ef;
    float: left;
    margin-top: 30px;
}


.right-box {
    width: 64%;
    float: left;
    padding:2%;
}
.banner-next h1 { padding-left:20px;}

	
	}
	
	
	/* 5. #MOBILE (LANDSCAPE)
iPhone landscape 480 x 320 and
Nicer Android landscape 515 by 295 (equivalent desktop resolution)
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	/**header**/
	.logo{ width:100%; height:auto; float:none; text-align:center;}
	nav{ width:100%; height:auto; padding:0% !important; margin:0% !important; float:none ;}
	.inner-container{ width:100%; height:auto;}
	.customer-login-btn{ width:100%; height:auto; float:none; margin:2% 0% 0% 0%!important; padding:0% !important;}
	.c-l-btn { margin:0% 0% 0% 0%!important; padding:0% !important; float:none; width:95%; margin:auto !important;}
	.banner{ margin-top:10px;}
	.c-l-btn{border-radius:0px; width:94%; padding:2% 3%!important; margin:0px !important;}
	.customer-login-btn { padding:0% 0%!important; margin:0% !important; }
	.banner { margin:0px 0px 20px 0px;}
	.container-box { width: 90%;padding: 2% 5%;height: auto;}
	.col-4 { width:100%; float:none; margin-bottom:20px;}
	.services-box { padding-top:30px; margin-bottom:30px; padding-bottom:30px;}
	.col-40{ width:100%; float:none; text-align:center; padding:10px 0px;}
	.col-60{ width:100%; float:none;text-align:center;padding:10px 0px;}
	.col-2{ width:100%; float:none;padding:10px 0px;}
	.followus, .contact { margin:0px auto; text-align:center;}
	.col-60 span { display:block; padding:10px;}
	.banner-next { width:100%; height:auto;}
	
	.left-side, .right-side { width:100%; float:none; height:auto; padding:5% 0% 0% 0%; margin:0% 0% 5% 0%;}
	.soluiotn-info-graphics img { width:100%; height:auto;}
	
	.sol-img-2 { text-align:center; display:block; margin:0px auto 30px auto;}
	.sol-img-3 {text-align:center; display:block; margin:0px auto 30px auto;}
	.sol-img-4 {text-align:center; display:block; margin:0px auto 30px auto;}
	.sol-4box { width:94%; float:none; height:auto; padding:3%; margin:3% 0%;}
	.col-3{ width:100%; float:none;padding:10px 0px;}
	.tecnology-img { width:100%; height:auto;}
	.ab-img img { width:100%; height:auto;}
	.m-heading { margin-top:22px !important;}
	.map-box{ height:auto;}
	.col-30 { width:94%; float:none; height:auto; padding:0% 3%; margin:1% 0%;}
	.col-70 { width:94%; float:none; height:auto; padding:0% 3%; margin:1% 0%;}
	.requst-demo { width:100%; height:auto;}
	.thank-you img { width:100%; height:auto;}
	#apDiv1{ display:none;}
	
	.col-4-logo { width:48%; float:left;}
	.right-box { float:none; width:92%; margin:4%; padding:0%; height:auto;}
	.left-link-box{ float:none; width:92%; margin:4%; padding:0%; height:auto;}
	.banner-next{ text-align:center !important; padding:20px 0px;}
	.banner-next h1 { text-align:center !important;}
	.left-link-box h2 { padding:20px 10px 10px 20px;}
	.left-link-box ul{ padding:0px 10px 30px 20px;}
	
	.col-4-logo{ float:none; width:100%; height:auto;}
	
	}