/*
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-layers .ls-wrapper h1 {
	font-family: "Ciron Classic"!important;
}

.ls-layers .ls-wrapper h2 {
	
}

.ls-layers .ls-wrapper span {
    /*height: auto !important;*/
}
.ls-layers .ls-wrapper:hover span {
	background: #FF394C !important;
    color: #fff !important;
}

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

}

.home-hero {
	/*max-height: 536px;*/
	@media screen and (min-width: 992px) {
		/*max-height: 456px;*/
		overflow: hidden !important;
	}
}

.home-hero .ls-container {
	@media screen and (min-width: 992px) {
		width: 100% !important;
		margin: 0 auto 40px auto!important;
		max-width: 1920px !important;
	}
}

.home-hero .ls-inner {
	@media screen and (min-width: 992px) {
        width: 100%!important;
		max-width: 1920px;
		margin: 0 auto 0 auto!important;
		box-sizing: border-box;
	}
}

.home-hero .ls-nav-prev {
	display: none!important;
	@media screen and (min-width: 992px) {
		left: 34px!important;
	}
}

.home-hero .ls-nav-next {
	@media screen and (min-width: 992px) {
		right: 34px!important;
	}
}

.home-hero .ls-container .ls-wrapper {
	@media screen and (min-width: 992px) {
		width: 100%!important;
	}
}

.home-hero-routine {
	max-height: 500px;
	@media screen and (min-width: 992px) {
		max-height: 334px;
	}
}

.ls-nav-active {
	background: #FF394C !important;
    border: 1px solid #FF394C !important;
}
.ls-v6 .ls-bottom-slidebuttons a {
	border: none !important;
}

.home-hero .hero-tag, .home-hero .hero-tag * {
    width: fit-content !important;
    height: fit-content !important;
}