/************** 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;
		z-index: 0
	}
	.navigation li a{ float: left; }

	.tile-wrapper{ width: 100%; }
	#home-slider .slides li{ padding-top: 50px; padding-bottom: 50px; }
	

	.slider-bg {
		object-position: top; /* Adjust the focus of the image for smaller screens */
	}

	@media only screen and (max-width: 767px) and (orientation: landscape) {
		#home-slider .slides li {
			padding-bottom: 0; /* Remove the padding-top */
            padding-top: 0;
            margin-top: 30px;
		}

		#nav {
			padding-bottom: 1.5rem; /* Extra padding to prevent overlap */
            max-height: 125px;
		}

		#home-slider {
			/*margin-top: 1.5rem;*/
		}
	}

    #home-slider1 .slides li{ padding-top: 0px; padding-bottom: 0px; background-position: center !important; }
	.slider-bg1{ max-width: 200%; }
	#about-text{
		columns: 100px 1;
		-webkit-columns: 100px 1;
		-moz-columns: 100px 1;
	}

	#quote-divider {
		background: url('../img/location.jpg');
		background-size: cover;
		position: relative;
		background-position: center;
	}
	
	.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:630px; }
	#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; }
	.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%; }

}