/*
	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-slide { 

}
.ls-slide .ls-l {

}

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

}


/* Layer styles */
.ls-layers h1,.ls-layers h2 {
    font-weight: 300;
    letter-spacing: 0px;
    color: #ffffff;
}

.ls-layers h2 {
    font-size: 1.5em !important;
    margin-bottom: 40px;
}

.t-dark {
    color: #333 !important;
}



/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* David: Change slider content position and align text to center */
	.ls-wrapper.ls-in-out {
    	top: 0% !important;
		text-align: center;
	}
	
	.ls-layers h1 {
		font-size: 20px !important;
		line-height: 20px !important;
		margin-bottom: 10px !important;
	}
	
		
	.ls-layers h2 {
		font-size: 15px !important;
		line-height: 20px !important;
    	margin-bottom: 15px !important;
	}
	
	.ls-bottom-nav-wrapper {
		display: none !important;
	}
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* David: Change slider content position and align text to centers */
	.ls-wrapper.ls-in-out {
    	top: 15% !important;
		text-align: center;
	}
}