body, html {
	margin: 0px;
	padding: 0px;
	background-color: #ededed;
	font-family: 'Trebuchet MS';
}

* {box-sizing:border-box}

.main {
	/* max-width: 350px;*/
	width:100%;
	position: relative;
	margin: auto;
}

/* Position the image slide (needed to position the left and right arrows) */
.slidewindow {
	position: relative;
	margin: auto;
	overflow: auto;
	whitespace: nowrap;
}

/* Hide the images by default */
.mySlides {
	width:100%;
	display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
	cursor: pointer;
}

/* Next & previous buttons */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	-webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	background-color: rgba(0,0,0,0.5);
}

.technallogo {
	cursor: pointer;
	position: absolute;
	top: 10px;
  right: 10px;
  z-index:1;
}
.technaltext {
  opacity:0;
  transition: all 1s;
	position: absolute;
	top: 50px;
	left: 50px;
  right: 50px;
  padding: 5px;
  z-index:1;
  border-radius:10px;
	font-size: 10px;
	font-family:Helvetica, Calibri, Geneva, Candara, Verdana, Arial;
	text-align: justify;
	color: white;
	background-color: rgba(0,0,0,0.3);
}
.technallogo:hover + .technaltext {opacity:1;}

/* Caption text */
.captiontitle {
	cursor: pointer;
	color: white;
	font-size: 12px;
	padding: 5px 12px;
	position: absolute;
	bottom: 0px;
	width: 100%;
	text-align: center;
  z-index:1;
	/*mix-blend-mode: overlay;*/
	font-family:Helvetica, Calibri, Geneva, Candara, Verdana, Arial;
}

.captiondesc {
  opacity:0;
  transition: all 1s;
	position: absolute;
	bottom: 22px;
	width: 100%;
	padding: 8px 25px;
  z-index:1;
	text-align: center;
	font-size: 10px;
	font-family:Helvetica, Calibri, Geneva, Candara, Verdana, Arial;
	color: white;
	background-color: rgba(0,0,0,0.3);
}

.captiontitle:hover + .captiondesc {opacity:1;}

.title {
	width: 100%;
	text-align: center;
	padding: 8px 12px;
	position: absolute;
	top: 8px;
}

.company {
	color: black;
	font-size: 30px;
	width: 100%;
	text-align: center;
	font-family: Helvetica, Calibri, Geneva, Candara, Verdana, Arial;
	text-shadow: -2px -2px 0px rgba(200, 200, 200, 0.3), 2px 2px 0px rgba(64, 64, 64, 0.8);
	mix-blend-mode: difference;
	float:left;
}

.logo {
	width:10%;
	float:left;
}

/* Number text (1/3 etc) */
.numbertext {
	color: white;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
	mix-blend-mode: overlay;
}

/* Container for image text */
.caption-slide {
	text-align: center;
	background-color: #222;
	padding: 2px 16px;
	color: white;
}

.row:after {
	content: "";title
	display: table;
	clear: both;  captionText.innerHTML = caption[0];
}

/* Six columns side by side */
.column {
	float: left;
	width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
	width:100%;
	opacity: 0.6;
}

.active,
.demo:hover {
	opacity: 1;
}

/* The dots/bullets/indicators */
.dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}

.active,
.dot:hover {
	background-color: #717171;
}

/* Fading animation */
/*
.fade {
	animation-name: fade;
	animation-duration: 1.5s;
}

@keyframes fade {
	from {opacity: 0.2}
	to {opacity: 1}
}
*/

.slide-left {animation: 3s slide-left-in;}
.slide-right {animation: 3s slide-right-in;}

@keyframes slide-left-in {
	from {margin-left: 100%;}
	to {margin-left: 0%;}
}
@keyframes slide-left-out {
	from {margin-left: 0%;}
	to {margin-left: -100%;}
}
@keyframes slide-right-in {
	from {margin-left: -100%;}
	to {margin-left: 0%;}
}
@keyframes slide-right-out {
	from {margin-left: 0%;}
	to {margin-left: 100%;}
}

.contact {
	width:100%;
	height:30px;
	background: white;
	text-align: center;	
}

.container {
	width: 100%;
	/* height: 100vh; */
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
}

.carousel-view {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/*
	gap: 10px;
	padding: 44px 0;
	*/
	transition: all 0.25s ease-in;
}

.carousel-view .item-list {
	/* max-width: 950px; */
	max-width:500px;
	width: 70vw;
	padding: 0px 0px;
	display: flex;
	/* gap: 48px; */
	scroll-behavior: smooth;
	/* transition: all 0.25s ease-in; */
	transition-property: all;
	transition-duration: 2s;
	transition-timing-function: ease-in-out;
	transition-delay: 0.25s;

	-ms-overflow-style: none; /* IE and Edge */
	/* scrollbar-width: none;  Firefox */
	overflow: auto;
	scroll-snap-type: x mandatory;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.item-list::-webkit-scrollbar {
	display: none;
}

.item {
	scroll-snap-align: center;
	width:500px;
	/* min-width: 350px;
	height: 350px; */
	background-color: deeppink;
	border-radius:8px;
}

.title2 {
	width: 100%;
	text-align: center;
	padding: 8px 400px;
	position: absolute;
	top: 0px;
}

.caption {
	width: 100%;
	text-align: center;
	padding: 185px 390px;
	position: absolute;
	top: 0px;
}

.captiontitle2 {
	color: white;
	font-size: 12px;
	padding: 5px 12px;
	position: absolute;
	bottom: 0px;
	width: 500px;
	text-align: center;
	/*mix-blend-mode: overlay;*/
	font-family:Helvetica, Calibri, Geneva, Candara, Verdana, Arial;
}

.captiondesc2 {
	display:none;
	color: white;
	font-size: 10px;
	padding: 8px 25px;
	position: absolute;
	bottom: 22px;
	width: 500px;
	text-align: center;
	font-family:Helvetica, Calibri, Geneva, Candara, Verdana, Arial;
	background-color: rgba(0,0,0,0.3);
}

.captiontitle2:hover + .captiondesc2 {display:block;}

/* Next & previous buttons */
.button {
	width: 100%;
	text-align: center;
	padding: 185px 390px;
	position: absolute;
	top: 0px;
}

.prev2, .next2 {
	cursor: pointer;
	position: absolute;
	top: 40%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	-webkit-user-select: none;
	margin-left:390px;
}

/* Position the "next button" to the right */
.next2 {
	right: 390px;
	border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev2:hover, .next2:hover {
	background-color: rgba(0,0,0,0.2);
}

.row2 {
	background-color:white;
	width:500px;
	/*position:relative;*/
	margin-left:390px;
	display:table;
}

.contact2 {
	background-color:white;
	width:500px;
	height:30px;
	background: white;
	text-align: center;
	display:table;
	margin-left:390px;
}