

/* Heroslider */

.heroslider {
	background: #f2f2f2;
	position:relative;
}

.heroslider-images {
	width:100%;
	height: 30vw;
	overflow: hidden;
}

.heroslider-images .swiper-slide {
	background-size: 60%;
	background-position: top left;
	background-repeat: no-repeat;
	background-color: #f2f2f2;
}

.content-container {
	width: 60vw;
	position:absolute;
	top:0;
	right: 0;
	bottom:0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	z-index:2;
}

.swiper-fixed-content-left {
	width: 25%;
	padding-left:80px;
}
.swiper-fixed-content-right {
	width: 25%;
	padding-right:80px;
}


.swiper-fixed-content svg {
	width: 100%;
	height:auto;
}

.heroslider-content {
	width:100%;
	height:100%;
	overflow:hidden;
}

.heroslider-content .swiper-slide{
	height:100% !important;
	width:100% !important;
	display: flex;
  justify-content: center;
  flex-direction: column;
  -ms-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.heroslider-content .swiper-slide > *{
	padding-right:30px;
  /*font-size: 30px;*/
  /*line-height:40px;*/
	color: #9e2886;
}

.swiper-button-next,
.swiper-button-prev {
	  color: #9e2886;
}

@media (max-width: 991px) {

	.heroslider {
		overflow: hidden;
		margin-top:50px;
	}
	
	.heroslider-images .swiper-slide {
		background-size: 100%;
	}
	
	.heroslider-content .swiper-slide > * {
  padding-right: 0;
	}
	
	.heroslider-images {
		height: 100vh;
		height: 100svh;
	}	
	
	.content-container {
		top:25%;
		width:100vw;
		height:100%;
	}
	
	.content-container,
	.content-container * {
   pointer-events: none;
	}
	
	.heroslider-content {
	  overflow: visible;
	}

}

@media(max-width: 779px) {
	
	.heroslider-images {
		height: 80vh;
		height: 80svh;
	}
	
  .heroslider-content .swiper-slide * {
  	line-height: calc(24px + 6 *  ((100vw - 576px) / 191));
  }
	.heroslider-content .swiper-slide .herotext{
		font-size: calc(18px + 6 * ((100vw - 576px) / 191));
	}		
	
}


@media (max-width: 719px) {
	
	.heroslider-images .swiper-slide {
		background-size: 120%;
	}	
	
	.swiper-fixed-content {
	  padding-right: 20px;
	}	
	
	.swiper-fixed-content-left {
	   padding-left: 20px;
	}
	.swiper-fixed-content-right	{
		 padding-right: 20px;
	}

	.heroslider-content .swiper-slide > *{
		padding-right:15px;
	}	
	
	.heroslider-content .swiper-slide {
	  padding-left: 15px;
	}

}

@media (max-width: 479px) {
	
	.heroslider-images .swiper-slide {
		background-size: 140%;
	}	
	
	.heroslider-content .swiper-slide > *{
		padding-right:8px;
	}		
	
	.heroslider-content .swiper-slide * {
			line-height: calc(25px + 3 *  ((100vw - 319px) / 160));
	}
	.heroslider-content .swiper-slide .herotext {
		font-size: calc(13px + 3 * ((100vw - 319px) / 160));
	}			

	.swiper-fixed-content-right	{
		 width: auto;
	}
	
}

@media (max-width: 319px) {
	
  .heroslider-content .swiper-slide * {
		line-height: 14px;
  }
	.heroslider-content .swiper-slide .herotext {
		font-size: 10px;
	}			
	
}


@media (min-width: 992px) {

	.heroslider-content .swiper-slide .herotext{
		font-size: calc(25px + 10 * ((100vw - 992px) / 928));
		line-height: calc(38px + 10 * ((100vw - 992px) / 928));
	}
}

@media (min-width: 992px) and (max-width: 1279px) {

	.content-container {
		width: 65vw;
	}
	
	.swiper-fixed-content {
		width: 40%;
	}
	
	.swiper-fixed-content-left,
	.swiper-fixed-content-right	{
		width: 22%;
	}

	.heroslider-content .swiper-slide .herotext{
		font-size: calc(23px + 5 * ((100vw - 992px) / 928));
		line-height: calc(26px + 5 *  ((100vw - 992px) / 928));
	}

}




.heroimage {
	width:100%;
	height: 30vw;
	overflow: hidden;
}

.heroimage picture {
	width: 100%;
	height:100%;	
	display: block;
}

.heroimage picture > * {
	object-fit: cover;
	height:100%;
	width:100%;
}



@media(max-width:991px) {

	.heroimage {
		height: 100vh;
		height: 100svh;
	}	

}	

@media(max-width: 779px) {

	.heroimage {
		height: 80vh;
		height: 80svh;
	}

}