/* Custom style to prevent carousel from being distorted 
   if for some reason image doesn't load */

body, html {
  height: 100%;
  margin: 0;
}

.carousel-inner img {
  margin: auto;
}

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img{
width: 100%; /* use this, or not */
margin: auto;
}


.carousel-control-next,
.carousel-control-prev  {
    filter: invert(100%);
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5%;
	color: #fff;
	background: none;
	border: 0;
	opacity: 0.5;
	transition: opacity 0.15s ease;
	  
}

ol.carousel-indicators {
  position: absolute;
  bottom: 0;
  margin: 0;
  left: 0;
  right: 0;
  width: auto;
}

ol.carousel-indicators li,
ol.carousel-indicators li.active {
  width: 30px;
  height: 5px;
  margin: 0;
  border-radius: 0;
  border: 0;
  background: orange;
}

ol.carousel-indicators li.active {
  background: #4f7d82;
}

.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 30px;
    height: 3px;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: orange;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    transition: opacity .6s ease;
}

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

.flex-container>div {
  background-color: #000000;
  color: white;
  width: 100%;
  height: 100%;
}