.visiondemo{
	background-image: linear-gradient(#2A2553, #4D3956, #2A2553);
	margin-left: 0 !Important;
	margin-right: 0 !Important;
	padding-top: 2rem;
	padding-left: 3rem;
	padding-right: 3rem;
	box-shadow: 0px 0 50px 50px #2A2553;

	.row{
		display: flex;

		.audials-col-sm-4{
			width: 33.33333333%;
		}
		.audials-col-sm-8{
			width: 66.66666667%;
		}
	}
	.feature-show{
		padding-bottom: 0rem;
	}
	.feature-show > .row{
		.text{
			h2 {
				font-size: 22px !important;
				line-height: 25px !important;
				padding-bottom: 0.5rem !important;

				span.pp2024-vision{
					font-weight: bolder;
				}
			}
			p{
				a{
					font-size: 16px;
					line-height: 20px;
					font-weight: normal !important;
					color: #ffffff;
				}
				a:hover{
					color: #000000;
				}
			}
		}
		.audials-col-sm-8{
			margin-right: 1rem;
			margin-bottom: 2rem;

			video#demovid{
				border-radius: 20px;
				width: 100%;
				margin-bottom: 2rem;
			}
		}
		.audials-col-sm-4{
			margin-left: 1rem;
			height: 100%;

			.featuredescription.ms{
				opacity: 1;
				display: flex;
				flex-direction: row;

				.text{
					width: calc(100% - 5rem);
					@include breaklongwords;
				}
				.switch{
					width: 5rem;
					float: right;
					display: flex;
					align-items: center;
				}
			}
			.featuredescription:hover{
				opacity: 1;
			}
			.featuredescription{
				opacity: 0.85;
				background-image: linear-gradient(to bottom right, #8E7A99, #66637E);
				border-radius: 20px;
				margin-bottom: 2rem;
				padding: 0.8rem;
				padding-left: 1.6rem;
				padding-right: 1.6rem;
				min-height: calc(20% - 2rem);

				input[type=checkbox]{
					height: 0;
					width: 0;
					visibility: hidden;
				}
				label {
					cursor: pointer;
					text-indent: -9999px;
					width: 80px;
					height: 40px;
					background: grey;
					display: block;
					border-radius: 100px;
					position: relative;
				}

				label:after {
					content: '';
					position: absolute;
					top: 2px;
					left: 2px;
					width: 36px;
					height: 36px;
					background: #fff;
					border-radius: 90px;
					transition: 0.1s;
				}

				input:checked + label {
					background: #3286BD;
				}

				input:checked + label:after {
					left: calc(100% - 5px);
					transform: translateX(-100%);
				}

				label:active:after {
					width: 52px;
				}
			}
		}
	}
	.row.col.tri{
		justify-content: space-between;
		grid-gap: 1rem;

		.audials-col-sm-4{
			width: 33.33333333% !important;
			padding: 0 !important;
			margin: 0 !important;

			div.active{
				border-style: solid;
				border-color: #fff;
				border-width: 3px;
				opacity: 1;
			}
			div{
				border-radius: 20px;
				opacity: 0.85;

				img{
					border-radius: 20px;
					width: 100%;
					height: auto;
					margin-top: 0 !important
				}
			}
			div:hover{
				cursor: pointer;
			}
		}
	}
}
@media screen and (max-width: 1500px) {
	.visiondemo > .feature-show > .row{
		flex-direction: column;

		.audials-col-sm-8{
			margin-right: 0;
			margin-bottom: 0.2rem;

			video#demovid {
				width: 75%;
				display: block;
				margin: 0 auto;
				margin-bottom: 0.7rem;
			}

			.row.col.tri{
				width: 50%;
				margin: 0 auto;

				#demovid1, #demovid2, #demovid3{
					border-radius: 10px

					img{
						border-radius: 10px;
					}
				}
			}
		}
		.audials-col-sm-4{
			margin-left: 0;
			display: flex;
			flex-direction: row;
			justify-content: center;
			flex-wrap: wrap;

			.featuredescription{
				flex: 0 0 calc(33% - 1.2rem);
				margin: 1rem;
				padding-left: 0.9rem;
				padding-right: 0.9rem;
			}
			.featuredescription:first-of-type{
				margin-left: 0;
			}
			.featuredescription:nth-of-type(3){
				margin-right: 0;
			}

			.featuredescription.ms{
				0.4: 0.3;

				.text {
					width: calc(100% - 4rem);
				}
				.switch {
					width: 4rem;
				}

				label {
					width: 80px;
					height: 40px;
				}

				label:after {
					top: 2px;
					left: 5px;
					width: 36px;
					height: 36px;
				}

				input:checked + label:after {
					left: calc(100% - 5px);
					transform: translateX(-100%);
				}

				label:active:after {
					width: 52px;
				}
			}


		}
		.audials-col-sm-4, .audials-col-sm-8{
			width: 100%;
		}
	}
}
@media screen and (max-width: 1450px) {
	.visiondemo > .feature-show > .row .audials-col-sm-4 .featuredescription {
		flex: 0 0 calc(33% - 0.7rem);
		margin: 0.5rem;
	}
}
@media screen and (max-width: 1000px) {
	.visiondemo .feature-show > .row .text h2 {
		margin-bottom: 0 !important;
	}
	.visiondemo > .feature-show > .row .audials-col-sm-8 .row.col.tri {
		width: 24rem;
	}
}
@media screen and (max-width: 1000px) {
	.visiondemo{
		padding-left: 6.15%;
		padding-right: 6.15%;

	}
	.visiondemo > .feature-show > .row .audials-col-sm-8 video#demovid {
		width: 100%;
	}
}
@media screen and (max-width: 850px) {
	.visiondemo .feature-show > .row{
		.audials-col-sm-4 {
			flex-direction: column;

			.featuredescription.ms {
				flex-direction: row;
			}
			.featuredescription{
				margin-left: 0;
				margin-right: 0;
			}
		}
		.audials-col-sm-8 > .row.col.tri{
			flex-direction: row !important;
		}
	}
}
@media screen and (max-width: 600px) {
	.row.quad {
		grid-gap: 1rem !important;
	}
}

@media screen and (max-width: 1000px) {
	.visiondemo > .feature-show > .row .audials-col-sm-8 .row.col.tri {
		width: 100%;
	}
}