/* Main Header */
.mainvision-header{
	position:absolute;
	z-index:2;
	top:0px;
	left:0px;
	width:100%;
	height:50px;
	background:#21272C;
}

@media only screen and (min-width: 768px) {
	.mainvision-header{
		height:70px;
		background:transparent;
	}
}

.mainvision-header-logo{float:left;margin:13px 0px 0px 5%;}
.mainvision-header-logo img{display:block;}

@media only screen and (min-width: 768px) {
	.mainvision-header-logo{margin:23px 0px 0px 5%;}
}

/* Slider */
.mainvision-hero{position:relative;}

.mainvision-hero-slider{
	position:relative;
	height:100vh;
	width:100%;
	overflow:hidden;
	list-style:none;
	margin-bottom:0px;
}
@media only screen and (min-width: 576px) {
	.mainvision-hero-slider{height:500px;}
}

@media only screen and (min-width: 1170px) {
	.mainvision-hero-slider{height:700px;}
}

.mainvision-hero-slide{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	/* Force Hardware Acceleration */
	-webkit-transform:translateZ(0px);
			transform:translateZ(0px);
	will-change:transform;
	-webkit-transform:translateX(100%);
		-ms-transform:translateX(100%);
			transform:translateX(100%);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

.mainvision-hero-slide.mainvision-hero-slide--selected{
	/* this is the visible slide */
	-webkit-transform:translateX(0);
		-ms-transform:translateX(0);
			transform:translateX(0);
}

.mainvision-hero-slide.mainvision-hero-slide--move-left{
	/* slide hidden on the left */
	-webkit-transform:translateX(-100%);
		-ms-transform:translateX(-100%);
			transform:translateX(-100%);
}

.mainvision-hero-slide.mainvision-hero-slide--is-moving,
.mainvision-hero-slide.mainvision-hero-slide--selected{
	/* the mainvision-hero-slide--is-moving class is assigned to the slide which is moving outside the viewport */
	-webkit-transition:-webkit-transform 0.5s;
	transition:-webkit-transform 0.5s;
	transition:transform 0.5s;
	transition:transform 0.5s, -webkit-transform 0.5s;
}

/* Slide style */
.mainvision-hero-slide{
	background-position:center center;
	background-size:cover;
	background-repeat:no-repeat;
}

.mainvision-hero-content.mainvision-hero-content--full-width,
.mainvision-hero-content.mainvision-hero-content--half-width{
	position:absolute;
	left:0px;
	top:50%;
	width:100%;
	z-index:1;
	/* this padding is used to align the text */
	text-align:center;
	transform:translateY(-50%);
}

.mainvision-hero-content .h2,
.mainvision-hero-content p,
.mainvision-hero-btn,
.mainvision-hero-content--img img{
	/* Force Hardware Acceleration */
	-webkit-transform:translateZ(0);
			transform:translateZ(0);
	will-change:transform;
}

.mainvision-hero-content.mainvision-hero-content--img{
	/* hide image on mobile device */
	display:none;
}

.mainvision-hero-content--img img{
	position:absolute;
	left:50%;
	top:50%;
	bottom:auto;
	right:auto;
	-webkit-transform:translateX(-50%) translateY(-50%);
		-ms-transform:translateX(-50%) translateY(-50%);
			transform:translateX(-50%) translateY(-50%);
}

.mainvision-hero-content.mainvision-hero-content--bg-video{
	/* hide video on mobile device */
	/*display:none;*/
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	overflow:hidden;
}

.mainvision-hero-content--bg-video video{
	/* you won't see this element in the html, but it will be injected using javascript */
	display:block;
	min-height:100%;
	min-width:100%;
	max-width:none;
	height:auto;
	width:auto;
	position:absolute;
	left:50%;
	top:50%;
	bottom:auto;
	right:auto;
	-webkit-transform:translateX(-50%) translateY(-50%);
		-ms-transform:translateX(-50%) translateY(-50%);
			transform:translateX(-50%) translateY(-50%);
}

.mainvision-hero-content .h2, .mainvision-hero-content p{
	text-shadow:0px 1px 3px rgba(0,0,0,0.1);
	line-height:1.2;
	margin:0px auto 14px;
	color:#FFF;
	width:90%;
	max-width:400px;
}

.mainvision-hero-content .h2{font-size:2.4rem;}
.mainvision-hero-content p{font-size:1.4rem;line-height:1.4;}

.mainvision-hero-btn{
	display:inline-block;
	padding:1.2em 1.4em;
	margin-top:.8em;
	font-size:1.3rem;
	font-weight:700;
	letter-spacing:1px;
	color:#FFF;
	background:rgba(0,0,0,0.5);
	-webkit-box-shadow:0px 3px 6px rgba(0,0,0,0.1);
			box-shadow:0px 3px 6px rgba(0,0,0,0.1);
	-webkit-transition:background 0.2s;
			transition:background 0.2s;
}

.mainvision-hero-btn:hover{
	color:#FFF;
	background:rgba(var(--bs-primary-rgb),0.8);
}

@media only screen and (min-width: 768px) {
	/*.mainvision-hero-content.mainvision-hero-content--bg-video{display:block;}*/
	.mainvision-hero-content.mainvision-hero-content--half-width{width:45%;}
	.mainvision-hero-content.mainvision-hero-content--half-width:first-of-type{left:5%;}
	.mainvision-hero-content.mainvision-hero-content--half-width:nth-of-type(2){right:5%;left:auto;}
	.mainvision-hero-content.mainvision-hero-content--img{display:block;}
	.mainvision-hero-content .h2,
	.mainvision-hero-content p{max-width:520px;}
	.mainvision-hero-content .h2{font-size:2.4em;font-weight:300;}
	.mainvision-hero-btn{font-size:1.4rem;}
}

@media only screen and (min-width: 1170px) {
  .mainvision-hero-content .h2,
  .mainvision-hero-content p{margin-bottom:20px;}
  .mainvision-hero-content .h2{font-size:3.2em;}
  .mainvision-hero-content p {font-size:1.6rem;}
}

/* Single slide animation */
@media only screen and (min-width: 768px) {
	.mainvision-hero-content.mainvision-hero-content--half-width{
		opacity:0;
		-webkit-transform:translateX(40px);
			-ms-transform:translateX(40px);
				transform:translateX(40px);
	}
	.mainvision-hero-slide--move-left .mainvision-hero-content.mainvision-hero-content--half-width{
		-webkit-transform:translateX(-40px);
			-ms-transform:translateX(-40px);
				transform:translateX(-40px);
	}
	.mainvision-hero-slide--selected .mainvision-hero-content.mainvision-hero-content--half-width{
		/* this is the visible slide */
		opacity: 1;
		-webkit-transform:translateX(0);
			-ms-transform:translateX(0);
				transform:translateX(0);
	}
	.mainvision-hero-slide--is-moving .mainvision-hero-content.mainvision-hero-content--half-width{
		/* this is the slide moving outside the viewport 
		wait for the end of the transition on the <li> parent before set opacity to 0 and translate to 40px/-40px */
		-webkit-transition:opacity 0s 0.5s, -webkit-transform 0s 0.5s;
				transition:opacity 0s 0.5s, -webkit-transform 0s 0.5s;
				transition:opacity 0s 0.5s, transform 0s 0.5s;
				transition:opacity 0s 0.5s, transform 0s 0.5s, -webkit-transform 0s 0.5s;
	}
	.mainvision-hero-slide--from-left.mainvision-hero-slide--selected .mainvision-hero-content.mainvision-hero-content--half-width:nth-of-type(2),
	.mainvision-hero-slide--from-right.mainvision-hero-slide--selected .mainvision-hero-content.mainvision-hero-content--half-width:first-of-type{
		/* this is the selected slide - different animation if it's entering from left or right */
		-webkit-transition:opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
				transition:opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
				transition:opacity 0.4s 0.2s, transform 0.5s 0.2s;
				transition:opacity 0.4s 0.2s, transform 0.5s 0.2s, -webkit-transform 0.5s 0.2s;
	}
	.mainvision-hero-slide--from-left.mainvision-hero-slide--selected .mainvision-hero-content.mainvision-hero-content--half-width:first-of-type,
	.mainvision-hero-slide--from-right.mainvision-hero-slide--selected .mainvision-hero-content.mainvision-hero-content--half-width:nth-of-type(2){
		/* this is the selected slide - different animation if it's entering from left or right */
		-webkit-transition:opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s;
				transition:opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s;
				transition:opacity 0.4s 0.4s, transform 0.5s 0.4s;
				transition:opacity 0.4s 0.4s, transform 0.5s 0.4s, -webkit-transform 0.5s 0.4s;
	}
	.mainvision-hero-content--full-width .h2,
	.mainvision-hero-content--full-width p,
	.mainvision-hero-content--full-width .mainvision-hero-btn{
	-webkit-transform:translateX(100px);
		-ms-transform:translateX(100px);
			transform:translateX(100px);
	}
	.mainvision-hero-slide--move-left .mainvision-hero-content--full-width .h2,
	.mainvision-hero-slide--move-left .mainvision-hero-content--full-width p,
	.mainvision-hero-slide--move-left .mainvision-hero-content--full-width .mainvision-hero-btn{
		-webkit-transform:translateX(-100px);
			-ms-transform:translateX(-100px);
				transform:translateX(-100px);
	}
	.mainvision-hero-slide--selected .mainvision-hero-content--full-width .h2,
	.mainvision-hero-slide--selected .mainvision-hero-content--full-width p,
	.mainvision-hero-slide--selected .mainvision-hero-content--full-width .mainvision-hero-btn{
		/* this is the visible slide */
		-webkit-transform:translateX(0);
			-ms-transform:translateX(0);
				transform:translateX(0);
	}
	.mainvision-hero-slide--is-moving .mainvision-hero-content--full-width .h2,
	.mainvision-hero-slide--is-moving .mainvision-hero-content--full-width p,
	.mainvision-hero-slide--is-moving .mainvision-hero-content--full-width .mainvision-hero-btn{
		/* this is the slide moving outside the viewport 
		wait for the end of the transition on the li parent before set translate to 100px/-100px */
		-webkit-transition:-webkit-transform 0s 0.5s;
				transition:-webkit-transform 0s 0.5s;
				transition:transform 0s 0.5s;
				transition:transform 0s 0.5s, -webkit-transform 0s 0.5s;
	}
	.mainvision-hero-slide--selected .h2{
		-webkit-transition:-webkit-transform 0.5s 0.2s;
				transition:-webkit-transform 0.5s 0.2s;
				transition:transform 0.5s 0.2s;
				transition:transform 0.5s 0.2s, -webkit-transform 0.5s 0.2s;
	}
	.mainvision-hero-slide--selected p{
		-webkit-transition:-webkit-transform 0.5s 0.3s;
				transition:-webkit-transform 0.5s 0.3s;
				transition:transform 0.5s 0.3s;
				transition:transform 0.5s 0.3s, -webkit-transform 0.5s 0.3s;
	}
	.mainvision-hero-slide--selected .mainvision-hero-btn{
		-webkit-transition:background 0.2s 0s, -webkit-transform 0.5s 0.4s;
				transition:background 0.2s 0s, -webkit-transform 0.5s 0.4s;
				transition:transform 0.5s 0.4s, background 0.2s 0s;
				transition:transform 0.5s 0.4s, background 0.2s 0s, -webkit-transform 0.5s 0.4s;
	}
}

/* Slider navigation */
.mainvision-hero-nav{
	position:absolute;
	width:100%;
	bottom:0px;
	z-index:2;
	text-align:center;
	height:55px;
	background:rgba(0,0,0,0.5);
}

.mainvision-hero-nav nav,
.mainvision-hero-nav ul,
.mainvision-hero-nav li,
.mainvision-hero-nav a{height:100%;}

.mainvision-hero-nav nav{display:inline-block;position:relative;}

@media (max-width: 767px) {
	.mainvision-hero-nav nav{display:block;}
}

.mainvision-hero-marker{
	position:absolute;
	bottom:0px;
	left:0px;
	width:calc(100% / 5);
	height:100%;
	color:var(--brand-primary);
	background:#FFF;
	-webkit-box-shadow:inset 0 4px 0 currentColor;
			box-shadow:inset 0 4px 0 currentColor;
	-webkit-transition:-webkit-transform 0.2s, -webkit-box-shadow 0.2s;
			transition:-webkit-transform 0.2s, -webkit-box-shadow 0.2s;
			transition:transform 0.2s, box-shadow 0.2s;
			transition:transform 0.2s, box-shadow 0.2s, -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
	z-index:-2;
}

.mainvision-hero-marker.mainvision-hero-marker--item-2{
	-webkit-transform:translateX(100%);
		-ms-transform:translateX(100%);
			transform:translateX(100%);
}

.mainvision-hero-marker.mainvision-hero-marker--item-3{
	-webkit-transform:translateX(200%);
		-ms-transform:translateX(200%);
			transform:translateX(200%);
}

.mainvision-hero-marker.mainvision-hero-marker--item-4{
	-webkit-transform:translateX(300%);
		-ms-transform:translateX(300%);
			transform:translateX(300%);
}

.mainvision-hero-marker.mainvision-hero-marker--item-5{
	-webkit-transform:translateX(400%);
		-ms-transform:translateX(400%);
			transform:translateX(400%);
}

.mainvision-hero-nav ul{padding-left:0px;}
.mainvision-hero-nav ul:after{
	clear:both;
	content:'';
	display:table;
}

.mainvision-hero-nav li{
	display:inline-block;
	width:calc(100% / 5);
	float:left;
}
.mainvision-hero-nav li .bi{display:block;width:100%;font-size:24px;color:#FFF;}
.mainvision-hero-nav .mainvision-selected .bi{color:var(--brand-primary);}
.mainvision-hero-nav .nav-item{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;height:100%;position:relative;z-index:-1;}
.mainvision-hero-nav li:not(.mainvision-selected) a:hover .nav-item{background:rgba(0,1,1,0.5);color:#A8B4BE;}

.mainvision-hero-nav .mainvision-selected a{color:#2C343B;}
.mainvision-hero-nav .mainvision-selected a:hover{background:transparent;}

.mainvision-hero-nav a{
	display:block;
	position:relative;
	font-size:12px;
	font-weight:bold;
	color:#A8B4BE;
	-webkit-transition:background 0.2s;
			transition:background 0.2s;
}

@media only screen and (min-width: 768px) {
	.mainvision-hero-nav{height:80px;}
	.mainvision-hero-marker,
	.mainvision-hero-nav li{width:95px;}
}

/* Main Content */
.mainvision-main-content{
	width:90%;
	max-width:768px;
	margin:0px auto;
	padding:2em 0px;
}

.mainvision-main-content p{
	font-size:1.4rem;
	line-height:1.8;
	color:#999;
	margin:2em 0px;
}

@media only screen and (min-width: 1170px) {
	.mainvision-main-content{padding:3em 0px;}
	.mainvision-main-content p{font-size:1.6rem;}
}

/* Javascript disabled */
.no-js .mainvision-hero-slide{display:none;}
.no-js .mainvision-hero-slide.mainvision-hero-slide--selected{display:block;}
.no-js .mainvision-hero-nav{display:none;}