<!-- Flickity Carousel CSS -->
.carousel-details {
	padding: 0.1rem;
	width: 100%;
	margin: 5px;
}

/* carousel height */
.carousel {
	height: 200px;
	width: 100%;
	
	padding: 0;
	margin: 0;
}

/* cell inherit height from carousel */
.carousel-cell {
  height: 100%;
}

.carousel-image {
  display: block;
  height: px;
  /* set min-width,
     allow images to determine cell width */
  min-width: 300px;
  max-width: 450px;
  min-height: 200px;
  margin-right: 10px;
  /* vertically center */
  top: 50%;
  transform: translateY(-50%)
}

.carousel.is-fullscreen .carousel-image {
  max-height: 80%;
}

.flickity-fullscreen-button-exit {
	margin-top:30px; /* edit if fulll screen exit button disappears under header */
}

/* position dots in carousel */
.flickity-page-dots {
  bottom: 0px;
}
.flickity-page-dots .dot {
  height: 4px;
  width: 40px;
  margin: 0;
  border-radius: 0;
}
.flickity-page-dots .dot.is-selected {
  background: white;
} 

body {
  padding-top: 54px;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

<!-- Index Page CSS -->

.hero {
	padding-bottom: 5px;
	margin-top:29px; /*Bring hero image flush with header */
	height: auto;
}	

.hero img {
	padding:0px;
	margin:0px;
	padding-right: 5px;
	width:100%;
	height: auto;
}

.intro {
	background-color: #d6d5d5;
	margin-top:5px;
	margin-right: 5px;
	padding-left: 10px;	
	padding-bottom: 5px;
	padding-right: 5px;
	font-size: 0.9rem;
}
.intro p{
	font-size:0.8rem;
	margin-bottom: 5px;
	paddding-bottom: 0px;
}


.card {
  padding: 5px;
  
  margin-left:0px;
  padding-top: 5px;
  padding-right: 8px;
  padding-left:0px;
  border: 0px;
}

.card-wrapper {
  margin-left: 0px;
  margin-right: 10px;
  margin-bottom: 0.3rem;
  padding: 0;
}

.card-body {
	display: inline-block
	text-align: left;
	padding: 0px;
	padding-top: 2px;
	height:10rem;
	vertical-align:top;
	background-color: white;
	height: 100px;
	
}	

.card-body h5 {
	text-size: 0.9rem;
	margin-bottom: 5px;
	paddding-bottom: 0px;
	font-weight: bold;
}	

.card-body p{
	font-size:0.8rem;
	margin-bottom: 0px;
	paddding-bottom: 0px;
}


	
.row {
	margin-left:0px;
	padding-left:0px;
	padding-right:10px;
}
	
.row a:link { 
  color: black;
    text-decoration: none;
}

.row a:visited { 
  color: black;
  text-decoration: none;
}

.row a:active { 
  color: black;
  text-decoration: none;
}	
.row a:hover { 
  color: black;
  text-decoration: none;
}	

/* Availability banner on index */
.indexavailability {
	width:100%;
	color: white;
	background-color: #800000;
	padding-left:10px;	
}