/* Carousel */

.carousel {
	position: relative;
	overflow: hidden;

	padding: 2em 0 2em 0;
	margin-bottom: 0;
	margin: 0 auto;
}

.carousel .forward,
.carousel .backward {
	position: absolute;
	top: 50%;
	width: 6em;
	height: 12em;
	margin-top: -6em;
	cursor: pointer;
}

.carousel .forward:before,
.carousel .backward:before {
	content: '';
	display: block;
	width: 6em;
	height: 6em;
	border-radius: 100%;
	background-color: rgba(72, 57, 73, 0.5);
	position: absolute;
	top: 50%;
	margin-top: -3em;
	-moz-transition: background-color 0.35s ease-in-out;
	-webkit-transition: background-color 0.35s ease-in-out;
	-o-transition: background-color 0.35s ease-in-out;
	-ms-transition: background-color 0.35s ease-in-out;
	transition: background-color 0.35s ease-in-out;
	-webkit-backface-visibility: hidden;
}

.carousel .forward:after,
.carousel .backward:after {
	content: '';
	width: 3em;
	height: 3em;
	position: absolute;
	top: 50%;
	margin: -1.5em 0 0 0;
	background: url("images/arrow.svg") no-repeat center center;
}

.carousel .forward:hover:before,
.carousel .backward:hover:before {
	background-color: rgba(239, 131, 118, 0.75);
}

.carousel .forward {
	right: 0;
}

.carousel .forward:before {
	right: -3em;
}

.carousel .forward:after {
	right: -0.25em;
}

.carousel .backward {
	left: 0;
}

.carousel .backward:before {
	left: -3em;
}

.carousel .backward:after {
	left: -0.25em;
	-moz-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
	transform: scaleX(-1);
}

.carousel .reel {
	white-space: nowrap;
	position: relative;
	-webkit-overflow-scrolling: touch;
	padding: 0 2em 0 2em;
}

.carousel article {
	display: inline-block;
	width: 18em;
	background: #4b4b4b;
	text-align: center;
	padding: 0 1em 0em 1em;
	margin: 0 2em 0 0;
	white-space: normal;
	opacity: 1.0;
	-moz-transition: opacity 0.75s ease-in-out;
	-webkit-transition: opacity 0.75s ease-in-out;
	-ms-transition: opacity 0.75s ease-in-out;
	transition: opacity 0.75s ease-in-out;
}

.carousel article.loading {
	opacity: 0;
}

.carousel article .image {
	position: relative;
	left: -1em;
	top: 0;
	width: auto;
	margin-right: -2em;
	margin-bottom: 0em;
}

.carousel article p {
	text-align: center;
}
.showcase h2 {
	margin-top: 5em;
		text-align: center;

}

/* LIGHTBOX */
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  background: rgba(0,0,0,0.9);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;

  z-index: 999999; /* very high */
}
#lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

#lightbox img {
  max-width: 80vw;
  max-height: 80vh;
  object-fit: contain;

  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.8);
}

/* close button */
.lightbox-close {
  position: absolute;
  top: 30px;
  right: 40px;

  font-size: 3rem;
  color: white;
  cursor: pointer;

  opacity: 0.8;
}

.lightbox-close:hover {
  opacity: 1;
}

/* Card Images */
.image.featured img {
  display: block;
  width: 100%;
  height: 450px;
  object-fit: cover;
  opacity: 0.8;
  transition: opacity 0.5s;
}



.image.featured img:hover {
  opacity: 1;
}

/* ===============================
   MOBILE CAROUSEL FIX
   =============================== */
@media (max-width: 600px) {

  /* section title spacing */
  .showcase h2 {
    margin-top: 3em;
    margin-bottom: 1.5em;
    font-size: 1.8rem;
  }

  /* main wrapper */
  .carousel {
    padding: 1.5em 0;
  }

  /* hide desktop arrows on phones */
  .carousel .forward,
  .carousel .backward {
    display: none;
  }

  /* reel scroll area */
  .carousel .reel {
    padding: 0 1em;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .carousel article {
    width: 75vw;
    max-width: 320px;

    margin-right: 1em;

    scroll-snap-align: center;
  }

  /* image wrapper offset reset */
  .carousel article .image {
    left: 0;
    margin-right: 0;
  }

  /* IMAGE HEIGHT FIX */
  .image.featured img {
    height: 260px;
  }

  /* ------------------
     LIGHTBOX
  ------------------ */

  #lightbox img {
    max-width: 92vw;
    max-height: 75vh;
  }

  .lightbox-close {
    top: 16px;
    right: 18px;
    font-size: 2.2rem;
  }
}