/*
	You can type here custom CSS code, which will be loaded both on your admin and front-end pages.
	Please make sure to not override layout properties (positions and sizes), as they can interfere
	with the sliders built-in responsive functionality. Here are few example targets to help you get started:
*/

.ls-container { /* Slider container */

}

.ls-layers { /* Layers wrapper */ 

}

.ls-3d-box div { /* Sides of 3D transition objects */ 

}

#layerslider_2::before {
	content: "Providing innovative, bespoke, industry leading modular buildings across the UK";
	position: absolute;
	width: 80%;
	top: 30%;
	left: 10%;
	text-align: center;
	font-size: 50px;
	line-height: 100%;
	color: #fff;
	z-index: 31;
}
#layerslider_2::after {
	content: "Large or small, temporary or permanent, buildings for marketing suites, retail, sports, leisure, logistics, temporary warehousing, waste management.";
	position: absolute;
	width: 70%;
	top: 50%;
	left: 15%;
	text-align: center;
	font-size: 22px;
	line-height: 130%;
	color: #eb8026;
	white-space: pre-wrap;
	z-index: 32;
}
@media (max-width: 1200px) {
	
	#layerslider_2::before {
		top: 30%;
		font-size: 40px;
	}
	
	#layerslider_2::after {
		top: 50%;
		font-size: 20px
	}
	
}
@media (max-width: 900px) {
	
	#layerslider_2::before {
		top: 20%;
		font-size: 26px;
	}
	#layerslider_2::after {
		top: 50%;
		font-size: 15px
	}
	
}
@media (max-width: 500px) {
	
	#layerslider_2::after {
		display: none;
	}
	#layerslider_2::before {
		font-size: 20px
	}
	
}