/*  z5 Breakpoint Guidelines   =========================================================== */

/*  Borrowing from Bootstrap 3 breakpoints
	------------------------------------------
	Extra Small Devices ----- ( <544px )
	Small Devices ----------- ( >544px - <768px )
	Medium Devices ---------- ( >768px - <992px )
	Large Devices ----------- ( >992px - <1200px )
	Extra Large Devices ----- ( >1200px )

*/

/*  z5 Preset Hide Points   =========================================================== */
.hidden { display:none; }
.visible {display:block;}
.visible-ib {display:inline-block;}

/* Set To Bootstrap breakpoints */

/* hide specified size and down */
@media only screen and (max-width: 1199px) { 
	.hidden-xl { display:none !important;; 
		  width: 100%;	
	} 
}
@media only screen and (max-width: 991px) { 
	.hidden-lg { display:none;
	}
}
@media only screen and (max-width: 768px) { 
	.hidden-md { display:none !important;; } 
	
}
@media only screen and (max-width: 544px) {
	.hidden-sm { display:none !important;;}
	.hidden-mobile { display:none !important;;}	
}

@media only screen and (max-width: 480px) {
	.hidden-xs { display:none !important;;
	} 
}
	
@media only screen and (max-width: 300px) {
	.hidden-xxs { display:none !important;;
	}	
}


/* hide specified size and up */

@media only screen and (min-width: 1200px) { 
	.hidden-xl-up { display:none !important;; 	
	} 
}
@media only screen and (min-width: 992px) { 
	.hidden-lg-up { display:none !important;}
}
@media only screen and (min-width: 769px) { 
	.hidden-md-up { display:none !important;; 
	} 
}
@media only screen and (min-width: 545px) {
	.hidden-sm-up { display:none !important;;
	} 
}

@media only screen and (min-width: 480px) {
	.hidden-xs-up { display:none !important;;
	} 
}



/*  z5 Preset Special Breakpoints   ======================================================== */

/* Set To Bootstrap breakpoints */
@media only screen and (max-width: 1199px) { 
	.lg { display:block; 
		  width: 100%;	
	} 
}
@media only screen and (max-width: 991px) { 
	.md { display:block;
		  width: 100%;
	}
}
@media only screen and (max-width: 768px) { 
	.sm { display:block; 
		  width: 100%;
	} 
}
@media only screen and (max-width: 575px) {
	.xs { display:block;
		  width: 100%;
	} 
}
@media only screen and (max-width: 480px) {
	.xxs { display:block;
		  width: 100%;
	} 	
}












/*  Custom   =========================================================== */






/* Big tablet to 1200px (widths smaller taht the 1140px row) */
@media only screen and (max-width: 1199px) {
	.slider-bar i {padding:8px 8px;}
}


/* Small tablet to big tablet: from 768px to 991px */
@media only screen and (max-width: 991px) {
	.slick-dots { bottom: 50px;}
	
	
	
	.work-wrapper .col {margin-bottom:135px;}
	.work-wrapper h3 {font-size:180%;line-height:34px;}
	.work-wrapper img {padding: 10px 1%}
	
	h1 {text-align:center;font-size:175%}
	.about-box-1 {padding:0;}
	.about-box p {text-align:justify;padding: 0 0 5px 0;}
	
	
	#work {margin-bottom:-100px;}
	
	
}



/* Small phones to small tablets: from 481px to 767px */
@media only screen and (max-width: 768px) {
	h1 {padding: 0;}
	.feature-box{width:100%; padding:0 5%; }
	
	
	.slick-slider:hover .slick-prev, 
	.slick-slider:hover .slick-next {
	visibility: hidden;
	}
	
    
}

/* Small phones: from 480 to 575px */
@media only screen and (max-width: 575px) {
	
	section {padding: 75px 0;}
	
	.about-box h1 {padding:0;}
	.mc p {width:100%;font-size:90%;}
	.about-box p {padding: 0 0% 5px 0%;}
	
	ol li {
		margin-left: 26px;
		margin-bottom:65px;
	}

	ol li:before {
		left: -24px;

		font: bold 260% sans-serif;
		line-height: 75px;
		margin-top:2px;
		width: 75px; height: 75px;

		border:3px solid #ccc;	
	}

	ol li:hover:before {  
		border:5px solid #ccc;
		margin-top:0;
		left: -26px;
	}
	#processb h3,
	#processb p{
		padding-left:80px;
	}
	#processb h3 {
		margin-bottom:10px;
	}
	
	.legal-right{float:left;}
	
	
	

	
}

/* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) {
    .work-wrapper h3 {font-size:140%;}
	.slider-text button {width:100%; }
	
	ol li {
		margin-left: 10px;
		margin-bottom:65px;
	}

	ol li:before {
		left: -5px;

		font: bold 175% sans-serif;
		line-height: 50px;
		margin-top:-2px;
		width: 50px; height: 50px;

		border:4px solid #ccc;	
	}

	ol li:hover:before {  
		border:4px solid #ccc;
		margin-top:-2px;
		left: -5px;
	}
	#processb h3{
		padding-left:60px;
		min-height:50px;
	}
	#processb h3 {
		margin-bottom:10px;
	}
	
	#processb p {padding-left: 0;}
	#processb p:first-of-type {padding-top:10px;}
	
	
}