/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media handheld, screen and (min-width: 768px) and (max-width: 959px) {
.logo 										{ display:block; }
		.logo img									{ float:none !important;width: 80%; text-align:center; margin:20px auto;}
		
		.video img									{ float:none !important; margin:0px auto; width:100% !important; padding:0px !important; }
		.container									{ margin:20px auto;}
		.indo 										{color: #385f99; float:none !important; position: absolute; top:160px;
													 line-height:30px; text-align:center}
		.tagline 									{color: #385f99; float:none !important; padding: 65px 0 0 0px;}
		
	
		.top-links  								{ float:none !important; margin:-30px 20px 0 0px; }
		.top-links li 								{display:inline; padding:0px 10px 0px 10px; }
		.search 									{float:none; padding: 0px 0 0 30px; margin:0px auto;}
		.top_right 									{ float:left !important; width:100% !important;}
		
		.navbar-header								{ float:none !important; width:100%; display:block !important; margin-top:-15px; }
		.navbar-collapse							{ float:none !important; width:100%; padding:0px auto; background-color:#00062d !important; }
		.navbar 									{ float:none !important; width:100%; margin:-20px auto; }
		
		.container									{ width:100% !important;}
		.bannerbg 									{ width:100% !important; float:none !important; height:111px; margin-top:-35px; }
		
		.bannerbg_designing							{width:100% !important; margin:-40px auto !important;}
		
		.flexslider 								{ width:85% !important; float:none; margin:0px auto; position:absolute; left:20px;}
		
		.media_content								{ height:140px; margin-top:100px !important;}
		
		.info										{ width:100% !important; float:none !important;}
		.design_content								{ background:url(../images/texture2.png);}
		.info-txt									{  float:left !important;}
		.news										{ float:none !important; width:100% !important;}
		.news-left									{ float:none !important; width:100% !important; margin:-20px auto;}
		.view										{ float:none !important; margin:50px auto;}
		.download									{ float:none !important; margin:-50px auto;}
		.bannerbg .flexslider img					{ width:100% !important; padding:0px; margin:0px; float:none !important;}
		.nav navbar navbar-inverse 					{ background:#navbar-inverse; height:auto;}
		.welcome img								{ width:100% !important; float:none !important;}
		.welcome-txt 								{ text-align:justify; float:none !important;}
		h4											{ text-align:center; float:none !important; margin-top:20px !important;}
		.event_img1 img 							{ width:100% !important; float:none !important;}
		.event_txt 									{ float:none !important; margin-left:140px !important;}
		
		.map img									{ width:85% !important;}
		.readmore									{ width:70px !important;  top:80px; left:5px; background:#000;padding:2px; borer-radius:2px;

													-webkit-border-radius:2px;
													-moz-border-radius:2px;
													-o-border-radius:2px;
													}
		.read_more									{ float:none !important; padding:0px 0px 0px 15px !important;}
		.readmore a{color:#fff;font-family:Arial;font-size:10px;font-weight:normal;text-align:center;padding-left:5px;text-decoration:none;}
		.design										{padding: 20px 0px 0px 60px !important;}
		.development								{padding: 20px 0px 0px 60px !important;}
		.hosting									{padding: 20px 0px 0px 60px !important;}
		.seo										{padding: 20px 0px 0px 60px !important;}
		.marketing									{padding: 20px 0px 0px 60px !important;}
		.testimonial_stroke							{ display:none;}
		.enquiry_stroke								{ display:none;}
		
		.flex-direction-nav li .prev 				{left: 10px; 
													background:url(../images/left-arrow.png) no-repeat; 
													position:absolute; 
													
													top:10px;
													}
		.flex-direction-nav li .next 				{right: 0px; 
													background:url(../images/right-arrow.png) no-repeat; 
													position:absolute; 
													
													top:10px;
													}
		
		.bannerbg_designing	img						{ width:282px; min-height:100px !important; float:none !important; }
		
		.webdesigning img							{float:none !important; width:100%;}
		.webdevelopment img							{float:none !important; width:100%;}
		.webhosting img								{float:none !important; width:100%;}
		.websoftware img							{float:none !important; width:100%;}
		.webonline img								{float:none !important; width:100%;}
		.webadvertising img							{float:none !important; width:100%;}

	
		
		
		.footer_left								{  float:none !important;}
		.footer_right								{  width:100% !important;}
		.footer_right img							{   margin-left:20px;}
		
		.footer_item1 								{  margin-left: 10px; width:100%!important; float:none !important;}
		.footer_item2						{ width:100%!important; float:none !important;margin-top:-10px;}
		.footer_item3					{ width:100%!important; float:none !important;  margin-top:-10px;}
		.footer_item4					{ width:100%!important; float:none !important;  margin-left: 10px;margin-top:-10px;}
		
		.social_media								{  float:none !important; margin-left:20px;}
		.copyright								{  float:none !important; margin-left:20px; text-align:left;}
		.copy_left									{ float:none !important; text-align:center;}
		.copy_right									{ float:none !important; text-align:center;}
		

		
	
		
	
    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media handheld, screen and (max-width: 767px) {
		#wrapper{ width:100% !important;}
		img.scale-with-grid {max-width: 100% !important;height: auto; }
		#menu1{ display:block !important;  margin-top:30px;}
		.menu_container green_glass full_width effect2{ display:block; float:none !important;}
		.select, input[type="file"] { display:none; margin-top:50px;}
		.select, textarea, { display:none !important; }
		
		
		
		.white-panel {height:auto !important; }
		.row-fluid.white-panel {height:auto !important; width:100% !important;}
		.effect2{display:none; width:100% !important;}
		
		.photo{ float:none !important; left:0px;}
		.green-checks{ width:100% !important;}
		.sp-slideshow input + label {top:110px;}
		.sp-arrow sp-a1{display:none;}
		
		.sp-slider clearfix{ font-size:80%; padding:3% 0 4%;}
		.sp-slideshow { height: auto; margin:0px auto; width:100%; float:left; }
		.sp-slider > li img {-moz-box-sizing: border-box; display: block; margin: 0 auto; width: 100% !important; }
		.row-fluid [class*="span"] { display: block; float:none;margin-left:0px;width: 100% !important;}
		.row-fluid:before, .row-fluid:after { width:100% !important;}
		
		#wrapper					{ width:100% !important; height:100% !important; }
		
		
		.logo 										{ display:block; }
		.logo img									{ float:none !important; /*width: 80%;*/ margin:0px 0px 0px 40px; }
		.quick_call									{ float:none !important; margin-top:10px;}
		.info										{ float:none !important;  margin-top:10px;}
		.info-txt									{ float:none !important;  margin-top:10px;}
		.support-icon								{ float:none !important;  margin-top:10px; display:block;}
		
		.video img									{ float:none !important; margin:0px auto; width:100% !important; padding:0px !important; }
		/*.container									{ margin:20px auto;}*/
		.indo 										{color: #385f99; float:none !important; position: absolute; top:160px;
													 line-height:30px; text-align:center}
		.tagline 									{color: #385f99; float:none !important; padding: 65px 0 0 0px;}
	
		.top-links  								{ float:none !important; margin:-30px 20px 0 0px; }
		.top-links li 								{display:inline; padding:0px 10px 0px 10px; }
		.search 									{float:none; padding: 0px 0 0 0px; margin:0px auto;}
		.top_right 									{ float:left !important; width:100% !important;}
		
		.navbar-header								{ float:none !important; width:100%; display:block !important; margin-top:0px; }
		.navbar-collapse							{ float:none !important; width:100%; padding:0px auto; background-color:#141414 !important; }
		.navbar 									{ float:none !important; width:100%; margin:-20px auto; }
		
		
		.container									{ width:100% !important;}
		.bannerbg 									{ width:100% !important; float:none !important; height:111px; margin-top:15px; }
		
		.bannerbg_designing							{width:100% !important; margin:-40px auto !important;}
		
		.flexslider 								{ width:85% !important; float:none; margin:0px auto; position:absolute; left:20px;}
		.quick_enquiry								{ margin-top:10px;}
		
		.media_content								{ height:140px; margin-top:100px !important;}
		
		.info										{ width:100% !important; float:none !important;}
		.design_content								{ background:url(../images/texture2.png);}
		.info-txt									{  float:left !important; margin-top:-10px;}
		.news										{ float:none !important; width:100% !important;}
		.news-left									{ float:none !important; width:100% !important; margin:-20px auto;}
		.view										{ float:none !important; margin:0px auto; margin-left:0px;}
		.download									{ float:none !important; margin:-50px auto;}
		.bannerbg .flexslider img					{ width:100% !important; padding:0px; margin:0px; float:none !important;}
		.nav navbar navbar-inverse 					{ background:#navbar-inverse; height:auto;}
		.welcome img								{ width:100% !important; float:none !important;}
		.welcome-txt 								{ text-align:justify; float:none !important;}
		h4											{ text-align:center; float:none !important; margin-top:20px !important;}
		.event_img1 img 							{ width:100% !important; float:none !important;}
		.event_txt 									{ float:none !important; margin-left:140px !important;}
		
		.map img									{ width:85% !important;}
		.readmore									{ width:70px !important;  top:80px; left:5px; background:#000;padding:2px; borer-radius:2px;

													-webkit-border-radius:2px;
													-moz-border-radius:2px;
													-o-border-radius:2px;
													}
		.read_more									{ float:none !important; padding:0px 0px 0px 15px !important;}
		.readmore a{color:#fff;font-family:Arial;font-size:10px;font-weight:normal;text-align:center;padding-left:5px;text-decoration:none;}
		.design										{padding: 20px 0px 0px 60px !important;}
		.development								{padding: 20px 0px 0px 60px !important;}
		.hosting									{padding: 20px 0px 0px 60px !important;}
		.seo										{padding: 20px 0px 0px 60px !important;}
		.marketing									{padding: 20px 0px 0px 60px !important;}
		.testimonial_stroke							{ display:none;}
		.testimonial_right							{ margin-right:-20px; margin-top:-5px;}
		.enquiry_stroke								{ display:none;}
		
		.flex-direction-nav li .prev 				{left: 10px; 
													background:url(../images/left-arrow.png) no-repeat; 
													position:absolute; 
													
													top:22px;
													}
		.flex-direction-nav li .next 				{right: 0px; 
													background:url(../images/right-arrow.png) no-repeat; 
													position:absolute; 
													
													top:22px;
													}
		
		.bannerbg_designing	img						{ width:282px; min-height:100px !important; float:none !important; }
		
		.webdesigning img							{float:none !important; width:100%;}
		.webdevelopment img							{float:none !important; width:100%;}
		.webhosting img								{float:none !important; width:100%;}
		.websoftware img							{float:none !important; width:100%;}
		.webonline img								{float:none !important; width:100%;}
		.webadvertising img							{float:none !important; width:100%;}
		.bottom-content								{float:none !important; padding:10px 0px 40px 0px; display:block;}
		.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus 				{background-color: #141414;}

	
		
		.footer										{margin-top:-45px;}
		.footer_left								{  float:none !important;}
		.footer_right								{  width:100% !important;}
		.footer_right img							{   margin-left:20px;}
		
		.footer_item1 								{  margin-left: 10px; width:100%!important; float:none !important;}
		.footer_item2						{ width:100%!important; float:none !important;margin-top:-10px;}
		.footer_item3					{ width:100%!important; float:none !important;  margin-top:-10px;}
		.footer_item4					{ width:100%!important; float:none !important;  margin-left: 10px;margin-top:-10px;}
		
		.social_media								{  float:none !important; margin-left:20px;}
		.copyright								{  float:left !important; margin-left:20px; text-align:left;}
		.copy_left									{ float:none !important; text-align:center;}
		.copy_right									{ float:none !important; text-align:center;}
		

		.pic img                                     {width:500px;height:400px}
		
		.pic2 img                                     {width:500px;height:200px}
        .pic3 img                                     { width: 220px; height: 103px;    }
           
           
    

       

}
		
		
	
    }

/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media handheld, screen and (min-width: 480px) and (max-width: 767px) {
		.img	{ float:none; width:100%; height:auto;}
		.span4{width:35% !important; margin-left:0px !important;}
		.white-panel{min-width:100% !important;}
		.row-fluid.white-panel {height:auto !important; width:300px !important;}
		.sp-slider clearfix{ font-size:80%; padding:3% 0 4%;}
		.sp-slideshow {width: 100%; height: auto; margin:0px auto; float:none !important;}
		.sp-content{ height:auto; margin:0px auto; float:none !important;}
		.sp-parallax-bg{ float:none !important;}
		.sp-slider{ float:none !important;}
		#logo{ display:block; width: 100%; text-align:center; position:relative;}
		.indo 										{color: #385f99; float:none !important; position: absolute;}
		.tagline 									{color: #385f99; float:none !important; padding: 65px 0 0 140px;}
      


	@media handheld, screen and (max-width: 768px) {
	#header											{ padding-bottom:0; }
	#smoothmenu1 									{ position:relative; width:100%; }
	#menu-icon 										{ 
														width:100%; height:38px; padding:0px 20px; cursor:pointer; 
														margin:0px 0px 20px 0px; display:block; font-size:20px; text-transform:uppercase; 
														font-family: 'Oswald', sans-serif; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
														box-sizing:border-box; word-spacing:3px; float:left;
													}
	#menu-icon div									{ 
														color:#fff; width:100%; height:36px; background:url(../images/navi-back.gif) repeat-x top #333333; 
														padding:0px 0px 0 0px; cursor:pointer; border:#1d1d1d solid 1px; border-radius:3px; padding:6px 0px 0px 8px;
														margin:0px 0px 0px 0px; display:block; font-size:16px; text-transform:uppercase; 
														font-family: 'Oswald', sans-serif; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
														box-sizing:border-box; word-spacing:3px; text-align:left; float:left;
														position:relative;
													}
	#menu-icon div span									{ 
														float:right; width:39px; height:36px; display:inline-block; background:url(../images/navi-back.png) no-repeat; 
														position:absolute; right:0px; top:0px;
													}
	#menu-icon:hover div							{ background:#333; }
	#menu-icon.active div 							{  }
	.main-navi		 								{ 
														clear:both; position:absolute; top:36px; width:100%; z-index:10000; 
														display:none; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:0px 20px;
													}
	.main-navi li 									{ 
														clear:both; float:none; margin:0px 0; width:100%; display:block; -webkit-box-sizing:border-box; 
														-moz-box-sizing:border-box; box-sizing:border-box; text-align:left; background:#333;  padding:0;
													}
	.main-navi a, .main-navi ul a 					{ 
														font:inherit; background:none; display:inline-block; padding:0px 0px 0px 0px; color:#fff;
														border:none; width:100%; font-size:12px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
														box-sizing:border-box;  padding:5px 8px; text-transform:none;
													}
	.main-navi a:hover, 
	.main-navi ul a:hover 							{}
	.main-navi ul 									{ width:100%; padding:0; margin:0; position:static; display:block; border:none; background:inherit; }
	.main-navi ul li 								{ padding-left:10px; }
	.main-navi ul li a 								{ font-size:12px; font-family:Arial, Helvetica, sans-serif; border-color:#666666 }
	
	.main-navi ul li ul li:first-child 				{ padding-top:0px; }
}

@media handheld, screen and (min-width: 768px) {
	.main-navi 										{ display:block }
	
}