/* HERO */

#hero .slides {
	min-height: 220px;
	height: 41vh;
}

#hero .main-title {
	min-height: 305px;
	height: 50vh;
	position: relative;
}

#hero .main-title .logo img {
	max-width: 4rem;
}

.main-title-carousel {
	max-width: 45rem;
	width: 95%;
	line-height: 1;
}

.secondary-title-carousel {
	background: #477bd9a6 !important;
	background: linear-gradient(to top right, #3890dfcc  25%, #477bd9a6 95%) !important;
	max-width: 28rem;
	width: 95%;
	line-height: 1;
}

.d-hero-hide {
	display: none;
}


@media (max-width: 576px) {
#hero .carousel-caption h2 {
	font-size: calc(1.375rem + 1.5vw) !important;
}

}

@media (max-width: 385px) {
.main-title-carousel {
		font-size: calc(1.475rem + 0.3vw) !important;
}
	
.secondary-title-carousel {
		font-size: 1.1rem !important;
}
}

@media (max-width: 350px) {
.main-title-carousel {
		font-size: calc(1.275rem + 0.3vw) !important;
}
	
.secondary-title-carousel {
		font-size: 1rem !important;
}


}

@media (min-width: 768px) {
	
.secondary-title-carousel, .main-title-carousel {
	line-height: 1.15;
}
	
#hero .main-title .logo img {
	max-width: 10rem;
}


#hero .slides {
	height: 91vh;
	overflow: hidden;
}

#hero .main-title {
	height: 91vh;
	-webkit-box-shadow: 24.1rem 4rem 1rem -24rem rgb(34 60 80 / 20%) inset;
	-moz-box-shadow: 24.1rem 4rem 1rem -24rem rgb(34 60 80 / 20%) inset;
	box-shadow: 24.1rem 4rem 1rem -24rem rgb(34 60 80 / 20%) inset;
}
}

#hero_slider_div .background_color {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.33;
    background: #3f2704;
}

#hero_slider_div, #hero_slider_div .carousel-inner, #hero_slider_div .carousel-inner .carousel-item, #hero_slider_div .carousel-inner .carousel-item .slider_img {
	width: 100%;
	height: 100%;
}


#hero_slider_div .carousel-caption {
	position: absolute;
    bottom: 0;
    left: 0;
    padding-top: 0;
    padding-bottom: 0;
	right: 0;
}

#hero_slider_div .carousel-control-prev, #hero_slider_div .carousel-control-next {
	align-items: flex-end;
	padding-bottom: 1.5rem;
}

/* Видео в модальном окне */

.video_modal .modal-body {
	position: relative;
}

.video_modal .modal-content {
	background-color: var(--bs-dark);
}

.video_modal .btn-close {
	position: absolute;
    right: 0rem;
    top: 0rem;
    z-index: 1;
    width: 2rem;
    height: 2rem;
    border-radius: 0;
    background-color: var(--bs-light);
    opacity: 0.8;
}

.video_modal .btn-close:hover {
    opacity: 1;
}