/* You can type here any CSS code that will be loaded both on your admin and front-end pages.
Let us help you by giving a few exmaple CSS classes: */

/* Front-end sliders & preview */

.ls-container { /* The slider itself */

}

.ls-slide { 

}

.ls-slide a:hover {
	
}

.ls-slide #yourID {

}

.ls-slide .yourClass {

}

/* Side color of 3D objects */
.ls-3d-box div { background: #777; }

/* Common styles for h1, h3, and the custom class */
h1, h3, .slider-text {
    text-align: left !important;
    line-height: 1.2em !important;
    margin-bottom: 10px !important;
}

/* Styles for h1 */
h1 {
    color: #e1523e !important;
    font-size: 1.2em !important; /* Adjust the base font size using em units */
    font-weight: bold !important;
    max-width: 50%; /* Adjust the max-width as needed */
}

/* Styles for h3 */
h3 {
    color: #ffffff !important;
    font-size: 0.8em !important; /* Adjust the base font size using em units */
    max-width: 50%; /* Adjust the max-width as needed */
}

/* Media query for medium screens */
@media only screen and (min-width: 601px) {
    h1 {
        font-size: 1.2em !important; /* Adjust the font size for larger screens */
    }
    h3 {
        font-size: 0.8em !important; /* Adjust the font size for larger screens */
    }
}

/* Media query for small screens (e.g., mobile devices) */
@media only screen and (max-width: 600px) {
    h1, h3 {
        max-width: 100%; /* Reduce the max-width for smaller screens */
    }

    h1 {
        font-size: 2em !important; /* Adjust the font size for smaller screens */
    }
    h3 {
        font-size: 1.8em !important; /* Adjust the font size for smaller screens */
    }
}