.portfolio_area ul { padding: 0; margin: 0; list-style: none; text-align: center }
.portfolio_area ul li { float: left; padding: 20px 30px 20px 25px; text-align: center !important }
.big_btn { }
.textfield { width: 700px; border: 1px solid #d3d3d3; background: #fafafa; padding: 8px 7px; font-size: 15px; color: #939393; outline: none; margin: 0 0 0 0px; }
.textarea { width: 700px; border: 1px solid #d3d3d3; background: #fafafa; padding: 8px 7px; font-size: 15px; color: #939393; outline: none; resize: none; height: 48px; margin: 0 0 0 0px; }
.submit { float: left; margin: 21px 0 5px 0; cursor: pointer; }
.submitbtn { background: url(../images/submit_btn.png) no-repeat; width: 99px; height: 41px; text-indent: 400px; cursor: pointer; margin-top: 20px; border: none; float: left; margin-left: -6px; }
.title { width: 410px; color: #939393; font-size: 12px; margin: 14px 0 0 0px; clear: left; }
.bottom_butns { /*	background:#302f2d;*/ 
width: 207px; float: right; margin-right: 0px; padding: 5px 0 5px 5px }
.rightArea { width: 20%; float: left; margin-top: 35px; margin-left: 0px }
.leftArea { width: 75%; float: left; padding: 0 30px 0 5px; }
.btn_img_back1 { background: url(../images/btn_1.png) no-repeat; width: 175px; height: 41px; font-size: 20px; color: #fff; padding: 12px 0 0 27px }
.btn_img_back { background: url(../images/btn_2.png) no-repeat; width: 117px; height: 43px; padding: 10px 45px 0 40px; }
.btn_img_back a { color: #fff; text-decoration: none; font-size: 12px; }
/**/
.method_process{ padding:0; margin:0; list-style:none}
.method_process li{ float:left; padding:20px 40px 0 0px}
.method_process li div{ width:152px;}
.method_h{ text-align:center}
.method_h h2{ font-size:1.1em; padding-top:20px}
.p_1{ font-size:.9em; text-align:center; padding:7px 10px 0 10px}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 960px) {
#header { height: 48px; }
.logo a img { width: 90% }
.logo_r { width: 70%; padding-right: 20px; }
.row { padding: 0 0 0 0px }
.about_img { padding-right: 30px; }
.center p { padding-right: 10px; }
ul#services_list1 li { float: left; width: 20%; margin: 0 35px 0 0px; padding: 0 10px 10px 0 }

.buttons p { font-size: 2em; line-height: .8em }
.buttons h1 { font-size: 1.90em }
.textfield { width: 90%; }
.textarea { width: 90%; }
/**/
#Services{ padding:0 5px 0 8px}
#mymethod{padding:0 5px 0 8px}
#abouus{padding:0 5px 0 8px}
#contactus{padding:0 5px 0 8px}
/**/
#Home{ min-height:500px; margin-top:10px;}
}
@media screen and (max-width: 940px) {
.bar { background: url(../images/bar.png) no-repeat; width: 90%; padding: 25px 20px 0 20px; height: 65px; font-size: 16px; text-align: center; }
}
@media screen and (max-width: 900px) {
ul#services_list1 li { float: left; width: 29%; margin: 0 25px 0 0px; padding: 0 10px 10px 0 }
ul#services_list1 li div { width: 100%; }
/**/
#Home{ min-height:470px; margin-top:10px;}
}
@media screen and (max-width: 807px) {
ul#services_list1 li { float: left; width: 45%; margin: 0 20px 0 0px; padding: 0 10px 10px 0 }
ul#services_list1 li div { width: 100%; }
/**/
#Home{ min-height:460px; margin-top:10px;}
}
@media screen and (max-width: 793px) {
#header { height: 48px; }
.logo a img { width: 90% }
.logo_r { width: 60%; padding-right: 10px; }
/**/
#Home{ min-height:440px; margin-top:10px;}
}
@media screen and (max-width: 793px) {
#mainNav a { color: #555555; position: relative; display: inline-block; text-decoration: none; font-size: 1.0em; line-height: 2.35em; font-weight: bold; }
}
@media screen and (max-width: 728px) {
#mainNav a { color: #555555; position: relative; display: inline-block; text-decoration: none; font-size: .9em; }
.bar { font-size: 1.0em }
.textfield { width: 80%; }
.textarea { width: 80%; }
.rightArea { width: 20%; float: left; margin-top: 35px; margin-left: 0px }
.leftArea { width: 65%; float: left; padding: 0 10px 0 5px; }
}
@media screen and (max-width: 663px) {
#mainNav a { color: #555555; position: relative; display: inline-block; text-decoration: none; font-size: .8em; }
ul#services_list1 li { float: left; width: 43%; margin: 0 30px 0 0px; padding: 0 10px 10px 0 }
ul#services_list1 li div { width: 100%; }
}
@media screen and (max-width: 628px) {
.bar { font-size: .90em }
.rightArea { width: 30%; float: none  !important; margin-top: 35px; margin-left:30px }
.leftArea { width: 100%; float: none; padding: 0 10px 0 5px; }
.submitbtn { float: none !important; width: 99px; height: 41px; float: none; cursor: pointer; }
.submit { float: none; width: 100% }
}
@media screen and (max-width: 600px) {
#header { z-index: 10; position: fixed }
.logo_r { width: 29% }
.phoneno { display: none }

#mainNav { position: relative; min-height: 40px; text-align: right; }
#mainNav ul { width: 150px; padding: 0px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(../images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
#mainNav li { display: none; /* hide all <li> items */ margin: 0; }
#mainNav .current { display: block; /* show only current <li> item */ }
#mainNav a { display: block; padding: 3px 5px 0px 32px; text-align: left; }
#mainNav .current a { background: none; color: #666; }
/* on nav hover */
#mainNav ul:hover { background-image: none; }
#mainNav ul:hover li { display: block; margin: 0 0 5px; }
#mainNav ul:hover .current { background: url(../images/icon-check.png) no-repeat 10px 7px; }
.bar { font-size: .80em }

}
@media screen and (max-width: 571px) {
.logo_r { width: 29%; padding-right: 30px; }
#mainNav ul { width: 130px; padding: 0px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(../images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
ul#services_list1 li { float: left; width: 43%; margin: 0 20px 0 0px; padding: 0 10px 10px 0 }
.rightArea { width: 33%; float: none  !important; margin-top: 35px; margin-left:30px }
.big_img img { margin:11px 0 0 0px !important; padding:0 !important;  }
}
@media screen and (max-width: 500px) {
.rightArea { width: 37%; float: none  !important; margin-top: 35px; margin-left:30px }
}
@media screen and (max-width:473px) {
.portfolio_area ul li{ width:80%; text-align:center}
}
@media screen and (max-width:435px) {
.logo_r { width: 29%; }
#mainNav ul { width: 130px; padding: 0px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(../images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
ul#services_list1 li { float: left; width: 42%; margin: 0 20px 0 0px; padding: 0 10px 10px 0 }
.big_btn a img { width: 70%}
.rightArea { width: 40%; float: none  !important; margin-top: 35px; margin-left:30px }
/**/
#Home{ min-height:400px; margin-top:10px;}
ul#services_list1 li div span h2{ font-size: 14px; }
.big_img img{height:120px}

}
@media screen and (max-width:385px) {
.logo_r { width: 29%; }
#mainNav ul { width: 120px; padding: 0px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(../images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
ul#services_list1 li { float: left; width: 40%; margin: 0 20px 0 0px; padding: 0 10px 10px 0 }
ul#services_list1 li div { font-size: 11px; }
.rightArea { width: 50%; }
#footer { width: 100%; overflow: hidden;  color: #fff; background:#ff660a; font-size:.9em ; text-align:center}
.method_process li{ float:none; text-align:center}
}
@media screen and (max-width:363px) {
.logo_r { width: 29%; }
#mainNav ul { width: 125px; padding: 0px 0; position: fixed; top: 15px; left: 205px; border: solid 1px #aaa; background: #fff url(../images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); z-index:1000; }

}
@media screen and (max-width:349px) {
.logo a img { width: 80% }
.logo_r { width: 20%; }
#mainNav ul { width: 115px; padding: 0px 0; position: fixed; top: 15px; left: 195px; border: solid 1px #aaa; background: #fff url(../images/icon-menu.png) no-repeat 5px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); z-index:1000; }
#mainNav a { display: block; padding: 3px 5px 0px 25px; text-align: left; }
.rightArea { width:55%; }
ul#services_list1 li { float: left; width: 40%; margin: 0 20px 0 0px; padding: 0 10px 10px 0; max-height:200px }
ul#services_list1 li div { font-size: 10px; }
ul#services_list1 li div span h2{ font-size: 12px; }
}
@media screen and (max-width:309px) {
.logo { width: 70% }
.logo a img { width: 100% }
.logo_r { width: 20%; }
#mainNav ul { width: 70px; padding: 0px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(../images/icon-menu.png) no-repeat 5px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
#mainNav a { display: block; padding: 3px 5px 0px 25px; text-align: left; font-size: .7em }
.rightArea { width:60%; }
.big_img img { margin:0px 0 0 0px; width:100%   }
ul#services_list1 li div span h2{ font-size: 12px; }
ul#services_list1 li div span img{ width:20px }
}
@media screen and (max-width:299px) {
.logo { width: 50% }
.logo a img { width: 100% }
.logo_r { width: 20%; }
#mainNav ul { width: 70px; padding: 0px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(../images/icon-menu.png) no-repeat 5px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
#mainNav a { display: block; padding: 3px 5px 0px 25px; text-align: left; font-size: .7em }
.rightArea { width:70%; }
/**/
#Home{ min-height:470px; margin-top:10px;}
}
/**********************************************Web Planner CSS************************************************/
	#left_form_area{ width:48%; float:left}
	#right_form_area{width:48%; float:right}
	.clear_form{ clear:both}
	.form_container{ width:100%; padding:15px}
	.form_heading{ width:90%; background:#fc6612;  color:#fff; font-size:18px;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px; padding:5px 0 5px 8px}
	.form_heading div{ width:100%; border-top:2px #FFFFFF solid; padding:5px 0 5px 5px}
	.input_class{border:solid 1px #d3d3d3;padding:5px; width:50%; background:#fafafa}
	.label{ color:#262626; font-weight:bold; font-size:13px; padding:0 0 0 5px}
	.input_class_big{border:solid 1px #d3d3d3;padding:5px; width:90%;background:#fafafa}
	.form_box{ padding:10px 0 20px 0; width:100%}
	.input_class_small{background:#fafafa;border:solid 1px #d3d3d3;padding:5px; width:100px}
	.text_area{background:#fafafa;border:solid 1px #d3d3d3;padding:5px; width:90%; height:60px; resize:none}
	.orange_italic_txt{ font-style:italic; color:#fc6612; font-size:12px; }
	.gray_bold_txt{ color:#858788; font-size:13px; font-weight:bold; padding:8px 0 8px 0}
	.form_heading_2{ padding:7px 0 0px 0}
	.form_heading_2 h4{ padding:0 ; margin:0; color:#84817e}
	.black_normal_txt{color:#000; font-size:14px; padding:8px 0 8px 0}
	.checkbox_text{ color:#858788; font-size:14px; padding:0; margin:0 }
	.checkbox_text tr td{ font-size:12px; padding-left:5px;}
	.form_box p{ padding:10px 0 10px 5px; margin:0; font-size:12px; color:#646464}
	.gray{ background:#ededed}
	.gray ul{ padding:5px 0 12px 0; margin:0; list-style:none;}
	.gray ul li{ font-size:12px; background:url(images/small_icon_webplanner.jpg)8px 8px ; background-repeat:no-repeat; padding:5px 0 0 23px }	
	@media only screen and (max-width: 1024px) {
		#left_form_area{ width:48%; float:left}
		#right_form_area{width:48%; float:right}
		.text_area{width:90%; height:60px; resize:none}
		input_class{width:95%}
		.input_class_big{width:95%}
		.input_class_small{width:20%}
		.input_class{width:90%}
	}
	@media only screen and (max-width: 560px) {
		.form_container{ width:100%; padding:10px 10px 10px 5px}
		.form_heading{ width:90%; background:#fc6612;  color:#fff; font-size:16px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; padding:5px 0 5px 15px}
	}
	@media only screen and (max-width: 496px) {
		.label{ font-size:12px;}
	}
	@media only screen and (max-width: 480px) {
			.form_container{ width:100%; padding:10px 10px 10px 15px}
			.form_heading{ width:90%; background:#fc6612;  color:#fff; font-size:16px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; padding:5px 0 5px 15px}
			.label{ font-size:13px;}
			.form_heading{ width:93%; }
			#left_form_area{ width:93%; float:none}
			#right_form_area{width:93%; float:none}
			#subbtn{ width:40%}
	}