/*----------------------------*/
/* Media queries for device compalability
/*----------------------------*/
@media only screen and (max-width: 768px){
.menu .active{ border-bottom: 1px solid #ccc; color:#303030;}
.headerTop {min-height:60px}
a.menu-link {background-color: #fff;color: #FFFFFF; display: inline;margin:1% 2% 0 0; padding: 4px 8px; position: relative; text-align: left; text-indent: -9999px; border-bottom:none;}
a.menu-link span{ border: 1px solid #303030;  display: block; margin: 4px auto;  position: relative;text-align: center;width: 17px;}	
.menu {clear: both;min-width: inherit;float: none;}
.menu, .menu > ul ul {overflow: hidden;max-height: 0;}
.menu > li > ul.sub-menu {padding: 0px;border: none;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;-webkit-background-clip: padding-box;-moz-background-clip: padding;background-clip: padding-box;}
.menu.active, .menu > ul ul.active {max-height: 55em; border-bottom:none;}
.menu ul {display: inline;}
.menu > ul {border-top: 1px solid #808080;}
.menu li, .menu > ul > li {display: block;}
.menu ul li a {color: #000;display: block;padding: 0.8em;border-bottom: 1px solid #ccc;position: relative;}
.menu li.has-submenu > a:after {content: "-";position: absolute;top: 0;right: 0;display: block;font-size: 1.5em;padding: 0.55em 0.5em;}
.menu li.has-submenu > a.active:after {	content: '+';}
.menu ul ul > li a {height:20px;padding: 13px 18px 8px 20px;-webkit-transition: background-color 0s ease-out;  -moz-transition: background-color 0s ease-out;-ms-transition: background-color 0s ease-out;-o-transition: background-color 0s ease-out;transition: background-color 0s ease-out;}
.menu ul ul > li a:hover{ border-bottom:1px solid #ccc;}
.menu ul ul, .menu ul ul ul {display: inherit;position: relative;left: auto; top:auto;box-shadow: none; border:none;}
.menu ul li:hover > .active li:last-child a{ border-bottom:none;}
}

/********************* Ipad MINI Horizontal*************************/
@media only screen and (min-width: 480px) and (max-width:956px)   {
.container{ width:480px;}
#headerWrapper header{ height:auto;}

/*------------Navigation----------------*/
	.headerTop .container{ width:inherit; }
	a.menu-link{ margin: 2% 2% 0 0;}
	
/*------------Feature Box----------------*/	
	.featBox{ width:320px;  margin:0 auto;}
	.featBox li{ margin:0 15px 25px 15px;}
	.featBox li:last-child{ margin-bottom:0;}
	.title{ z-index:9999;}
	
	
/*----------------Recent Work-----------------------*/	
	.jcarousel-skin-tango { width: 460px;}
	
/*------------Our Clients----------------*/
	.our-clients ul{ width:310px; margin:0 auto;}
	.our-clients ul li{margin: 6px 7px;}

	/*------------Footer----------------*/
	.container .left-coln,.container .right-coln, footer #footer-bottom .foot-contact, footer #footer-bottom .get-in-touch, 
	#footer-bottom .foot-logo, #footer-bottom .get-in-touch .inner{ float:none; margin:0 auto; width:460px!important; overflow:hidden;}
	#footer-bottom .get-in-touch .inner{ margin:0 auto 10px;}
	
	.container .right-coln .slideShow{ height:200px;}
	.container .right-coln{ margin-top:45px;}
	#footer-bottom .foot-logo{ text-align:left;}
	footer #footer-bottom .foot-contact, footer #footer-bottom .get-in-touch{ border:none; border-bottom:1px solid rgba(255,255,255,.3); height:auto; margin:15px auto; padding:0;}
	
/*-------------Internal Page Formating---------------*/	
	#headerWrapper .int-header{ height:auto; padding-bottom:0;}
	.text .sub-title{ font-size:15px; line-height:20px; width:80%;}
	
	/*---------Company---------*/
	#meet-our-team { width:225px; margin:0 auto;}
	.heading .our-stat{ width:auto;}
	.text-content{ width:460px;}
	
	/*------------Progress Bar------------*/
		.percentage{ margin: 35px auto 0; width:380px; float:none; overflow:hidden;}
		.percentage li { width:370px;}
		
	/*------------Services------------*/
		#services{ margin-right:0;}	
	
	/*------------Clients--------------*/
		#clients .clientsLogo{ float:none; width:460px; margin:0 auto;} 
		#clients .clientsLogo ul{ margin:0 -50px 0 0; overflow:hidden;}
		#clients .clientsLogo li{ margin:0 50px 33px 0;}
		#clients .testimonials section{ border:none;}
		#clients .left-coln, #clients .right-coln { height:200px; border-bottom:1px solid #EDEDED;}
		#clients .right-coln{ margin-top:35px;}
	
	/*--------------Pricing Table---------------*/
		#pricing .boxContainer1{ width:250px;}
		#pricing .boxContainer1 .box{ width:245px;}
		#pricing .boxContainer1 .boxCenter{ width:245px; margin:23px 0;}
		#pricing .boxContainer2{ width:250px;}
		#pricing .boxContainer2 .box{ width:245px;}
		#pricing .boxContainer2 .boxCenter{ width:245px; margin:23px 0;}
	
	/*--------------Portfolio---------------*/
		.portfolioNav{ margin:0 auto 35px;  width: 460px;}
		.portfolioFilter{border-bottom:1px solid #eee; width:inherit; float:none;}
		.portfolioFilter a{ text-align:center;  padding: 8px;}
		.portfolioContainer{ margin:0 auto;  text-align:center;}
		.portfolioWrapper{ width:290px; margin:0 auto;}
		.portfolioContainer .overlay .details-lrg{top:40px!important;}
		.portfolioContainer article{ width:290px; height:185px; margin:0 0 31px 0;}
		.portfolioNav .share-links{ margin: 0 auto; float:none; overflow: hidden; padding: 9px 0 2px; text-align: center; width: 130px;}
		
		/*---------- Portfolio inner--------------*/
		.portfolio-inner figure{ width:460px; float:none; margin:0 auto; height:350px;}
		.portfolio-inner{ margin-bottom:30px;}
		.portfolio-inner .details{ margin:0 auto; width:435px; float:none;}
	
	/*---------------Contact Us------------------*/
	.contact-left-frm, .form-field, .contact-right-frm, .contact-left-frm form, #contact .leftAlign{float: none;  width: inherit; overflow:hidden; } 
	.contact-left-frm { margin: 0 auto; overflow: hidden; width:460px; }
	#contact form, .contact-left-frm form, .contact-right-frm{  margin: 0 auto 60px; width:460px; padding:10px 0 0; }
	#contact .form-field{ margin: 0 auto 15px; width:435px;}
	#contact input{ width:97%;}  textarea{ width:97%;}
	#contact address{ width:94%; margin:0 0 0 8px;}
	.contact-left-frm input[type="submit"]{ float:left; margin:0 0 0 4px;}
	
	.black-bar a{ font-size:20px;}
	
	.featured-work .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto{ bottom:-30px;}
	.featured-work .bx-wrapper .bx-pager{ text-align:center;}
		
}



 

/********************* Iphone Vertical*************************/

@media only screen and (min-width: 320px) and (max-width: 479px)   {
	.text p{
		width:90% !important;overflow: visible;
	}
	.container{ width:320px; }
	#headerWrapper header{ height:auto;}
	
	/*------------Navigation----------------*/
	.headerTop .container{ width:inherit; }
	a.menu-link{ margin: 3% 2% 0 0;}
	
	/*------------Feature Box----------------*/	
	.featBox{ width:290px;  margin:0 auto;}
	 .services1 li{ width:93%;  margin:0 35px 0 0; position:relative; float:left; display:inline-block; text-align:center;padding-bottom:20px;
	 	transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -mox-transition: all 0.5s ease-in-out 0s;
	  -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s;}
	 .services li{ width:100%; cursor:pointer; margin:0 auto; position:relative; float:left; display:inline-block; text-align:center;padding-bottom:20px;
	.featBox li{ margin:0 0px 25px 0px; }
	.featBox li:last-child{ margin-bottom:0;}
	.title{ z-index:9999;}
	
	.heading li {background: url("../images/ddir-arrow.html") no-repeat scroll 148px 300px transparent;}


	#contact-left-frm{ width:auto;border:1px solid red;}

	/*--------------Recent Work-------------------*/
	.jcarousel-skin-tango{ width:220px;}
	
	/*------------Our Clients----------------*/
	.our-clients{ width:310px; margin:0 auto;}
	.our-clients ul li{margin: 6px 7px!important;}
	
	/*------------Footer----------------*/
	.container .left-coln,.container .right-coln, footer #footer-bottom .foot-contact, footer #footer-bottom .get-in-touch, 
	#footer-bottom .foot-logo,#footer-bottom .get-in-touch .inner{ float:none; margin:0 auto; width:290px; overflow:hidden;}
	
	#footer-bottom .foot-logo .inner{ float:left; margin:0 auto; width:450px; overflow:hidden;}
	#footer-bottom .get-in-touch .inner{ margin:0 auto 10px;}
	
	.container .left-coln li .description{  float: left; width: 63%;}
	.container .left-coln:before{ display:none;}

	.container .right-coln{ margin-top:45px;}
	.container .left-coln{ width:90%;}
	
	#footer-bottom .foot-logo{ text-align:left;}
	footer #footer-bottom .foot-contact, footer #footer-bottom .get-in-touch{ border:none; border-bottom:1px solid rgba(255,255,255,0.3); height:auto; margin:15px auto; padding:0;}

	#footer-top .slideShow .bx-controls-direction {   height: 26px; bottom:12px;}
	/*-------------Internal Page Formating---------------*/	
		
		/*-------------Company---------------*/	
		#innerHeader{ height:auto;}
		#meet-our-team { width:225px; margin:0 auto;}
		.text .sub-title{ font-size:15px; line-height:20px; width:80%;}
		.heading .our-stat{ width:auto;}
		.text-content{ width:290px;}
		
		/*------------Progress Bar------------*/
		.percentage{ margin: 35px auto 0; width:270px; float:none; overflow:hidden;}
		.percentage li { width:250px;}
		
		/*------------Services------------*/
		#services{ margin-right:0;}
		
		/*------------Clients--------------*/
		
		.clientsLogo li{ margin:0 20px 33px;}
		#clients .testimonials section{ border:none;}
		#clients .left-coln, #clients .right-coln { height:200px; border-bottom:1px solid #EDEDED;}
		#clients .right-coln{ margin-top:35px;}
		
		/*--------------Pricing Table---------------*/
		#pricing .boxContainer1{ width:250px;}
		#pricing .boxContainer1 .box{ width:245px;}
		#pricing .boxContainer1 .boxCenter{ width:245px; margin:23px 0;}
		#pricing .boxContainer2{ width:250px;}
		#pricing .boxContainer2 .box{ width:245px;}
		#pricing .boxContainer2 .boxCenter{ width:245px; margin:23px 0;}
		
		/*--------------Portfolio---------------*/
		.portfolioFilter a{ width:100%;}
		.portfolioContainer article{ width:290px; height:185px; margin:0 0 31px 0;  }
		.portfolioWrapper{ width:290px; margin:0 auto;}
		
		.portfolioContainer .overlay .details-lrg{top:40px!important;}
		.portfolioContainer{ margin:0 auto;}
		.portfolioNav .share-links{ margin: 0 auto; float:none; overflow: hidden; padding: 9px 0 2px; text-align: center; width: 130px;}
		
		/*---------- Portfolio inner--------------*/
		.portfolio-inner figure{ width:290px; float:none; margin:0 auto; height:250px;}
		.portfolioFilter a{ border-bottom:1px solid #eee; text-align:center;   padding: 8px 10px 8px;}
		.portfolio-inner{ margin-bottom:30px;}
		.portfolio-inner .details{ margin:0 auto; width:290px; float:none;}
		
		/*---------------Contact Us------------------*/
	.contact-left-frm, .form-field, .contact-right-frm, .contact-left-frm form, #contact .leftAlign{float: none;  width: inherit; overflow:hidden; } 
	.contact-left-frm { margin: 0 auto; overflow: hidden; width:290px; }
	
	#contact form, .contact-left-frm form, .contact-right-frm{  margin: 0 auto 60px; width:290px; padding:10px 0 0; }
	#contact .form-field{ margin: 0 auto 15px; width:290px;}
	#contact input{ width:93%;}  textarea{ width:93%;}
	#contact address{ width:94%; margin:0 0 0 8px;}
	.contact-left-frm input[type="submit"]{ float:left; margin:0 0 0 4px;}

	.black-bar a{ font-size:12px;}

	/*(Option for HOME PAGE)-*/ 
	
	.featured-work .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto{ bottom:-30px;}
	.featured-work .bx-wrapper .bx-pager{ text-align:center;}
	
	.bloghome article .description{ width: 68%; margin-left: 10px; float:left;} 

}

@media only screen and (max-width: 924px){
.bloghome article{ width:100%; }

}

@media only screen and  (max-width: 480px) {
.article-block{ width:95%}
.bloghome article{  margin-left:auto; margin-right:auto; }

}

/*----------------------------*/
/* Media queries for device compalability
/*----------------------------*/