@charset "utf-8";
/* Carousel TRW CSS Document */

.carousel {
	width: 100%;
	background: #FFF; /* optional */
	padding: 10px 0;
	position: relative;
	overflow: hidden;
	z-index: 1000;
}

.carousel-track-logos {
	display: flex;       /* Key: Align images horizontally */
	flex-wrap: nowrap;
	white-space: nowrap; /* Ensures inline layout */
	will-change: transform;
	align-items: center;
	width: 100%;
	height: 70px;
	gap: 20px;
	margin: 0px;
	padding-top: 20px;
	padding-bottom: 50px; /* needed to show the rounded corner at the bottom of the image - or image ie chopped */
	animation: none;
/*	animation: scroll-loop 30s linear infinite;
/*	display: inline-flex;*/
/*  flex-direction: column; /* forces images to be in a column vs. row */
/*	flex-wrap: nowrap;         /* Prevent wrapping to a new line */
/*	animation: scroll-loop 60s linear infinite;
*//*  overflow: hidden; /* overflow hidden - causes white block on the right side of screen that is over images */
}

.carousel-track {
	display: flex;       /* Key: Align images horizontally */
	flex-wrap: nowrap;
	white-space: nowrap; /* Ensures inline layout */
	will-change: transform;
	align-items: center;
	width: 100%;
	height: 270px;
	gap: 20px;
	margin: 0px;
	padding-top: 20px;
	padding-bottom: 50px; /* needed to show the rounded corner at the bottom of the image - or image ie chopped */
	animation: none;
/*	animation: scroll-loop 30s linear infinite;
/*	display: inline-flex;*/
/*  flex-direction: column; /* forces images to be in a column vs. row */
/*	flex-wrap: nowrap;         /* Prevent wrapping to a new line */
/*	animation: scroll-loop 60s linear infinite;
*//*  overflow: hidden; /* overflow hidden - causes white block on the right side of screen that is over images */
}

.carousel-track-logos img {
/*	width: 100vw;        /* makes each image fill the viewport */
  width: auto;              /* or whatever fixed width you need */
  height: 70px; /* auto */
  object-fit:cover;
  vertical-align: middle;
  flex-shrink: 0;            /* Don't let them shrink */
  /*border-radius: 15px; /* for rounded corners */
  display: block;
}

.carousel-track img {
/*	width: 100vw;        /* makes each image fill the viewport */
  width: 600px;              /* or whatever fixed width you need */
  height: 270px; /* auto */
  object-fit:cover;
  vertical-align: middle;
  flex-shrink: 0;            /* Don't let them shrink */
  border-radius: 15px; /* for rounded corners */
  display: block;
}

.carousel-track-logos > * {
  margin: 0;
  padding: 0;
}

.carousel-track > * {
  margin: 0;
  padding: 0;
}

.carousel-row-logos {
	position: relative;
	align-items: center;
	overflow: hidden; /* overflow hidden - causes white block on the right side of screen that is over images */
	width: 100%;
	height: 70px;
	white-space: nowrap; /* Ensures inline layout */
	margin-bottom: 15px; /* gap between each row */
	padding-top: 10px; /* adds space above the row of logos */
	padding-bottom: 0px; /* 20px needed to show the rounded corner at the bottom of the image - or image ie chopped */
/*  display: flex;
  gap: 20px;
  width: max-content;
  animation: scroll-left 36s linear infinite;
  overflow: hidden;
  white-space: nowrap;
*/
}

.carousel-row {
	position: relative;
	align-items: center;
	overflow: hidden; /* overflow hidden - causes white block on the right side of screen that is over images */
	width: 100%;
	height: 270px;
	white-space: nowrap; /* Ensures inline layout */
	margin-bottom: 25px; /* gap between each row */
	padding-top: 15px;
	padding-bottom: 20px; /* needed to show the rounded corner at the bottom of the image - or image ie chopped */
/*  display: flex;
  gap: 20px;
  width: max-content;
  animation: scroll-left 36s linear infinite;
  overflow: hidden;
  white-space: nowrap;
*/
}





/* SLIDER of images with bar */
.slider-container {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
    scroll-snap-type: x mandatory;
}

.slider img {
  display: inline-block;
  width: 100%;
  max-width: 300px;
}
.slider-container {
    scroll-behavior: smooth;
}