/**
 * Slider
 * See inc/slider.php
 */

/* before Swiper initialises (or with a single slide), only show the first slide */

.mca-slider:not(.swiper-initialized) .swiper-slide ~ .swiper-slide {
	display: none;
}

.mca-slider__slide {
	height: auto;
	background-color: var(--mca-slide-color, transparent);
}

.mca-slider__slider-inner {
	display: flex;
	align-items: center;
}

.mca-slider__content,
.mca-slider__media {
	flex: 0 0 50%;
	min-width: 0;
}

.mca-slider__content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
	padding: 20px 40px;
  box-sizing: border-box;
}

.mca-slider__title {
	margin-bottom: 20px;
  font-size: 120px;
  font-weight: 500;
  color: #fff;
  line-height: 1.04;
  font-family: "Barlow Condensed";
  margin: 0 0 0.5em;
  
  
}

@media(max-width: 1280px){
  .mca-slider__title {
    font-size: 90px;
  }
}

/*
 * the image behaves like background-size: cover; background-position: center
 * it is taken out of the flow so it never sizes the box: the box takes the full slide height, with a minimum
 */

.mca-slider__media {
	position: relative;
	align-self: stretch;
	min-height: 800px;
	overflow: hidden;
}

.mca-slider__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
}

.mca-slider__button{
  font-family: "Barlow Condensed" !important;
  font-size: 24px !important;
  text-transform: uppercase;
}

@media (max-width: 980px) {

	.mca-slider__slider-inner {
		flex-direction: column;
		align-items: stretch;
	}

	.mca-slider__content {
		padding: 30px 20px;
    align-items: flex-start;
	}
  
  .mca-slider__title br{
    display: none;
  }
  
  .mca-slider__media{
    min-height: 400px;
  }

}

@media (max-width: 600px) {
  .mca-slider__title {
    font-size: 70px;
  }
}

@media (max-width: 480px) {
  .mca-slider__title {
    font-size: 60px;
  }
  .mca-slider__media{
    min-height: 300px;
  }
}