@charset "UTF-8";
/* CSS Document */

.CarouselH3 { width: 80%; padding: 0 10%; margin: 0; display: flex; position: relative; align-items: center;float: left;}

.CarouselH3Smaller {font-size: 2em; font-weight: bold; color: rgb(29, 74, 145); text-align: center; line-height: 1.6em; width: 100%; float: left; padding: 0px 0px 2%; margin: 0px;}

.CarouselWrapper { width: 100%; overflow: hidden; position: relative; margin:0px 0 2% 0; float: left;} 

.Carousel { display: inline-block;  white-space: nowrap;  position: relative; padding: 1% 0 3% 0;}

.CarouselImage {  display: inline-block;   vertical-align: middle; border-radius: 15px; width: 450px; height: auto;  margin: 0 4em;  border: 1px solid #e4e4e4;}

  .CarouselImage:hover {cursor: pointer; transform: scale(1.01); transition: transform 0.3s ease, background-color 0.3s ease; }
  

.CarouselBG {position:absolute; top: 0; left: 0; height: 300px; width: 100%; }

.modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(220, 218, 218, 0.8);  text-align: center;}

.modal-wrapper {  display: inline-block; position: relative; vertical-align: middle; margin: auto;}

.modal-content {  border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); max-width: 50vw; max-height: 95vh; width: auto; height: auto; display: block; animation: zoomIn 0.3s forwards;}

.modal::before { content: ""; display: inline-block; height: 100%; vertical-align: middle;}

.close { position: absolute; top: -12px; right: -12px; background-color: rgb(15, 20, 28); border: 2px solid #ffffff; color: #ffffff; width: 30px; height: 30px; border-radius: 50%; text-align: center; line-height: 24px; font-size: 25px;  font-weight: bold; z-index: 100; cursor: pointer; opacity: 0; transition: opacity .5s ease-in-out; /* slow fade */ pointer-events: none; }

.close.show { opacity: 1; pointer-events: auto; }

.close:hover {transition: transform 0.4s ease, background-color 0.2s ease;  transform: rotate(360deg);}

@keyframes zoomIn {
    from { transform: scale(0.8); }
  to { transform: scale(1); }
}



.CarouselScroller {  overflow-x: auto;  overflow-y: hidden;  -webkit-overflow-scrolling: touch;  scroll-behavior: smooth;  width: 100%; 
   /* hide scrollbars (optional) */
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* IE/Edge */
  position: relative;        /* stacking context below arrows */
  z-index: 1;
}
.CarouselScroller::-webkit-scrollbar { display: none; }

/* Arrows are anchored to the NON-scrolling .CarouselWrapper */
.CarouselArrow { position: absolute;  top: 50%; transform: translateY(-50%); width: 44px; height: 44px;  border: 0;  border-radius: 50%;  background: rgba(0,0,0,0.45);  color: #fff;  display: flex;  align-items: center;  justify-content: center;  cursor: pointer;  z-index: 2;    transition: background .2s, opacity .2s;}
.CarouselArrow:hover { background: rgba(0,0,0,0.65); }
.CarouselArrow.left  { left: 10px; }
.CarouselArrow.right { right: 10px; }

/* Auto-hide when you can't scroll further (optional) */
.CarouselArrow[disabled] {  opacity: 0;  pointer-events: none;}

/* Optional: image niceties */
.CarouselImage {  display: inline-block;  margin-right: 10px;  cursor: pointer;  transition: transform .2s;}
.CarouselImage:hover { transform: scale(1.03); }


/* Media queries for responsiveness ---------------------------------*/

@media only screen and (min-width: 2500px) {
.CarouselImage { width: 550px;}
}

@media only screen and (min-width: 1350px) and (max-width: 1750px) {
  .CarouselImage { width: 350px; }
}

@media only screen and (min-width: 1000px) and (max-width: 1349px) {
  .CarouselImage { width: 275px; margin: 0 2em; }
}

@media only screen and (max-width: 999px) {
  .CarouselImage { width: 200px; margin: 0 1.5em; }
  .modal-content {  max-width: 80vw;}
  .Carousel { padding: 1% 0 10% 0;}
}