/* 
   ------------------------------------------------------
					Responsive Styles
   ------------------------------------------------------
*/

@media (min-width: 992px) and (max-width: 1400px) { 

	.titlebar h2 									{ font-size: 26px;}
	.titlebar h3 									{ /*font-size: 20px; line-height: 24px; margin-bottom: 15px;*/ }
	.titlebar p, .job_types p.main_description		{ font-size: 17px; margin-bottom: 25px; }
	.slides-pagination								{ bottom: 50px;}
	.navbar-nav > li > a 							{ font-size: 160%; letter-spacing: 1px;}
	.intro-content 									{ width: 100%; }
	.intro-content h1 								{ font-size: 450%; }
	.intro-content h3 								{ font-size: 150%; }
	.google_map, #map-canvas						{ height: 300px;}
	.preload_logo 									{ margin: auto; margin-bottom: 115px; }
	.illustration, 	.preload_logo 					{ width: 200px; height: 180px; }
	#banner_1 .titlebar, #banner_2 .titlebar,
	#banner_3 .titlebar 							{ margin-bottom: 0; }  
	.list-item 										{ margin-bottom: 16px;} 
	.hover-details:hover .image_zoom 				{ top: 40%;} 
	.stores img 									{ width: 30%;} 
	.intro-content h1 								{ font-size: 500%; }
	.intro-content h2 								{ font-size: 500%; }
	.company_logo 									{ width: 200px; height: 180px; }
	.contact_details ul li 							{ background-size: 22px; padding-left: 40px;  margin-bottom: 15px; font-size: 15px; line-height: 22px;}
	
	
}


@media only screen and (max-width: 991px){

	.titlebar h2 		 							{ font-size: 26px;}
	.titlebar h3 		 							{ /*font-size: 20px; line-height: 24px; margin-bottom: 15px;*/ }
	.titlebar p, .job_types p.main_description		{ font-size: 17px; margin-bottom: 25px; } 
	.intro-content 		 							{ width: 100%; }
	.intro-content h1 	 							{ font-size: 420%; }
	.intro-content h2 	 							{ font-size: 400%; }
	.mh160 				 							{ min-height: 160px; }
	.company_logo 		 							{ width: 200px; height: 180%; }
	.contact_details ul li  						{ background-size: 22px; padding-left: 40px;  margin-bottom: 15px; font-size: 15px; line-height: 22px;}
	.contact_details ul  							{ margin-bottom: 40px;}
	.navbar-nav > li > a 							{ padding: 0px 10px;  font-size: 160%; }
	.google_map, #map-canvas 						{ height: 300px;} 
	#banner_2_image 								{ text-align: center !important;}
	#banner_2 .img-responsive 						{ display: inline-block; margin-bottom: 40px;	}
	.list-item 										{ margin-bottom: 15px;}
	.list-item h5 									{ font-size: 16px; } 
	#banner_3_image 								{ text-align: center !important;}
	#banner_3 .img-responsive 						{ display: inline-block; margin-top: 40px; } 
	
}


@media only screen and (max-width: 767px){
 

	.intro-content h1 								{ font-size: 250%; line-height: 100%; }
	.intro-content h2 								{ font-size: 250%; }
	#features h2 									{ font-size: 280%; }
	.intro-content h2, .intro-content h1  			{ font-size: 300%; }
	.qualifications 								{ margin-bottom: 20px;} 
	.navbar 										{ padding: 0px; background-color: #d5512b;}
	.navbar-brand 									{ line-height: 64px; padding: 0 25px;}
	.navbar-nav > li > a, .navbar-brand .black-color{ color: #fff; }
	.navbar-nav > li > a:hover, 
	.navbar-nav > li 								{ text-align: center; float: none;}
	.navbar-toggle:focus 							{ background-color: #BA4518; }
	.navbar-nav > li > a 							{ line-height: 40px; text-align: center; padding: 0px 10px;  font-size: 160%; }	
	.navbar-nav > li > a:hover,
	.navbar-nav > li > a.selected-nav 				{ color: #333;background-color: transparent;}
	.google_map, #map-canvas 						{ height: 300px;}
	.company_logo, .illustration, .preload_logo 	{ width: 140px; height: 120px; }
	.preload_logo 									{ margin-bottom: 120px;}
	.slides-pagination								{ bottom: 25px;} 
	#pricing-table-holder  							{ margin-right: 100px; margin-left: 100px; } 
	.feature-box 									{ margin-bottom: 30px; }
	.contact_details ul li 							{ font-size: 15px; }
	.grid figure 									{ height: 260px; width: 260px; }
	figure.effect-portfolio img 					{ height: 300px; }
	.grid figure p  								{ font-size: 12px; line-height: 15px; }
	figure.effect-portfolio figcaption::before  	{ top: 20px; right: 10px; bottom: 20px; left: 10px; }
	figure.effect-portfolio figcaption::after 		{ top: 10px; right: 20px;  bottom: 10px; left: 20px;} }

@media only screen and  (max-width: 664px) { 
		.grid figure 								{ display: block; margin: auto; float: none; }
}

@media only screen and  (max-width: 480px) { 
	 
	.intro-content 									{ width: 100%; }  
	.titlebar h2 									{ font-size: 26px;}
	.titlebar h3 									{ font-size: 20px; line-height: 24px; margin-bottom: 15px; }
	.titlebar p 									{ font-size: 17px; margin-bottom: 25px; } 
	.titlebar, .banner_1_content, #features .col-sm-6, 
	.banner_2_content, #screenshots-holder1, 
	#screenshots-holder2, .banner_3_content, 
	#contact .col-sm-12 							{ margin-right: 15px; margin-left: 15px;}
	#pricing-table-holder  							{ margin-right: 20px; margin-left: 20px;} 
	.list-item h5 									{ font-size: 14px; }  	
	#screenshots-holder1 .col-xs-6, 
	#screenshots-holder2 .col-xs-6 					{ width: 100%; float: none; }
	.stores 										{ text-align: center;}
	.stores a 										{ display: block; margin-bottom: 8px;}
 	
}


@media only screen and (max-width: 320px) {

	.titlebar, .banner_1_content, #features .col-sm-6, 
	.banner_2_content, #screenshots-holder1, 
	#screenshots-holder2, .banner_3_content, 
	#contact .col-sm-12, #pricing-table-holder  	{ margin-right: 5px; margin-left: 5px;}
	.intro-content 									{ width: 100%; }
	.grid figure 									{ height: 260px;} 
	.titlebar h2 									{ font-size: 24px;}
	.titlebar h3 									{ font-size: 18px; line-height: 24px; margin-bottom: 15px; }
	.titlebar p 									{ font-size: 15px; margin-bottom: 25px; }
}