/************** SMARTPHONES ****************/

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

	.hide-for-small{ display: none; }
	.mobile-nav{ display: block; }
	.navigation{ padding-bottom: 22px; }
	.navigation li{ float: none; margin-bottom: 11px; overflow: hidden; }
	.open-menu{ display: block !important;
	position: absolute;
	right: 22px;
	top: 31px;
	cursor: pointer;
	}
	.navigation li a{ float: left; }

	.tile-wrapper{ width: 100%; }
	#home-slider .slides li{ padding-top: 50px; padding-bottom: 50px; }
	.slider-bg{ max-width: 200%; }
	#about-text{
		columns: 100px 1;
		-webkit-columns: 100px 1;
		-moz-columns: 100px 1;
	}
	
	.team-img-holder img{ width: 50% }
	.service{ margin-bottom: 11px; }
	.services-row{ margin-bottom: 0px; }
	.client{ margin-bottom: 22px; }
	.client img{ width: 50%; }
	.work-item{ margin-bottom: 22px; }
	.work-row{ margin-bottom: 0px; }
	.project-details p{ width: 100%; }
	.project-img-holder{ width: 100%; height: 350px; }
	#map-toggle{ right: auto; left: 30%; }
	#contact-holder{ padding-top: 110px; }
	#contact-form #name{ width: 100%; margin-right: 0px; }
	#contact-form #email{ width: 100%; margin-right: 0px; }
	#contact-form #phone{ width: 100%; margin-right: 0px; }
	.flex-direction-nav a{ display: none; }

}

/****************** TABLETS (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

	#clients{  background-attachment: scroll; }
	#quote-divider{ background-attachment: scroll; }

}

/***************** TABLETS (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

	.navigation li{ margin-right: 32px; }
	.service h5{ 1em }
	.service{ max-height: 154px; }
	.work-overlay{ padding: 100px 15px 15px 15px; }
	.work-img-holder{ height: 220px; }
	#form-name{ width: 70%; }
	#form-email{ width: 70%; }

}

/***************** TABLETS (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

	#home-slider .slides li{
		padding-top: 117px;
		padding-bottom: 117px;
	}

}

/**************** SMALL SCREENS *****************/

@media only screen and (max-width: 960px){
	.slider-bg{ max-width: 200%; }
}